HTML5 API - FORM
HTML5 2012. 5. 18. 16:14
HTML5 FORM에서는 사용자 접근성 향상을 위해 기존 컨트롤보다 더 많은 종류의 컨트롤(기존 자바스크립트 + CSS를 활용하여 구현된 컨트롤 등)들이 대거 추가되었습니다.
즉, 표준으로 지원하지 않는 모든 컨트롤들은 각 어플리케이션 환경에 따라 사용자가 직접 만들어 사용하였습니다.
1. 브라우저 지원현황:
HTML5 FORM을 지원하는 브라우저가 점차 많아지고 있는 것이 현실이지만, 아직 까지는 많이 미흡한 편이며, 최근 웹킷(WebKit)기반 브라우저에서도 폼에 대한 지원을 강화하고 있는 추세입니다.(모바일 웹 브라우저 기준)
브라우저 지원현황:
http://caniuse.com/#feat=form-validation
- 아래는 HTML5 FORM 코드 예제이며, 컨트롤 지원 형태는 웹과 모바일 브라우저가 다르다는 것을 명심하시기 바라며, 프로젝트 적용 시 해당 컨트롤에 대한 브라우저 지원사항을 꼼꼼히 테스트하시기 바랍니다.
2. 마크업 예제:
- 웹 브라우저:
거의 대 부분의 컨트롤이 지원하지 않습니다.
- 모바일 브라우저:
대부분의 컨트롤이 지원하며, 특히, 모바일 디바이스의 스마트 키보드(컨트롤 타입에 따라 키보드 배열이 달라진다)를 통해 사용자 접근성이 향상됩니다.
1. 전화(input_tel) 컨트롤:
2. 날짜(input_date) 컨트롤:
3. 주소(input_url) 컨트롤:
3. 유효성 검사 예제
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
<html xmlns="http://www.w3.org/1999/xhtml">
-
<head>
-
<title>postMessage</title>
-
</head>
-
<body>
-
<script type="text/javascript">
-
//<![CDATA[
-
-
bind(window, 'load', function () {
-
-
bind(document.html5Form.input_text, 'invalid', function (e) {
-
var e = e.srcElement.validity;
-
// 정해진 유효성 검사에 대한 결과(성공: true / 실패: false)
-
alert(e.valid);
-
// 컨트롤에 반드시 값이 지정되게 하며, 비어있다면 true를 반환한다.
-
// required 속성을 지정하여 사용한다.
-
alert(e.valueMissing);
-
// 지정된 컨트롤의 패턴이 부합되지 않으면, true를 반환한다.
-
// Pattern 속성을 지정하여 사용한다.
-
alert(e.patternMismatch);
-
// 지정된 컨트롤의 값에 너무 많은 문자가 들어가면 true를 반환한다.
-
// maxLength 속성을 지정하여 사용한다.
-
alert(e.tooLong);
-
alert(e.validationMessage);
-
-
});
-
-
bind(document.html5Form.input_tel, 'invalid', function (e) {
-
var e = e.srcElement.validity;
-
// 정해진 유효성 검사에 대한 결과(성공: true / 실패: false)
-
alert(e.valid);
-
});
-
-
bind(document.html5Form.input_email, 'invalid', function (e) {
-
var e = e.srcElement.validity;
-
// 정해진 유효성 검사에 대한 결과(성공: true / 실패: false)
-
alert(e.valid);
-
// 지정된 유형에 맞는 값인지 확인하며, 실패 시 true를 반환한다.
-
// 즉, 이메일 폼 같은 경우는 "@" 문자열이 반드시 포함되어야 한다.
-
alert(e.typeMismatch);
-
-
});
-
});
-
-
-
// 이벤트 할당dasdad
-
function bind(elem, type, handler, capture) {
-
type = typeof type === 'string' && type || '';
-
handler = handler || function () { ; };
-
-
if (elem.addEventListener) {
-
elem.addEventListener(type, handler, capture);
-
}
-
else if (elem.attachEvent) {
-
elem.attachEvent('on' + type, handler);
-
}
-
-
return elem;
-
};
-
-
-
//]]>
-
</script>
-
<form id="html5Form" name="html5Form" action="" onsubmit="return false">
-
<!-- input -->
-
<input type="text" id="input_text" name="input_text" placeholder="input_text" autocomplete="on" Pattern="([\w])+" maxlength="5" required /><br />
-
<!-- 아래 컨트롤의 formnovalidate 속성으로 유효성 검사를 무시할 수 있다. -->
-
<input type="text" id="Text1" name="input_text" placeholder="input_text" autocomplete="on" Pattern="([\w])+" maxlength="5" formnovalidate="formnovalidate" /><br />
-
<input type="tel" id="input_tel" name="input_tel" placeholder="input_tel" autocomplete="off" Pattern="([0-9])+" required /><br />
-
<input type="email" id="input_email" name="input_email" placeholder="input_email" required /><br />
-
-
<!-- input -->
-
<!-- submit -->
-
<input type="submit" value="submit" />
-
<!-- submit -->
-
</form>
-
</body>
-
</html>
실행 결과:
참고 사이트:
@Clearboth HTML5 스펙:
HTML5 데모:
