HTML5 실습 및 양식 분석

HTML5는 새로운 데이터 확인 기능을 추가하고 새로운 태그 속성을 추가하여 양식을 일부 개선했습니다. 이러한 검증 기능을 사용하면 JavaScript 없이 검증을 수행할 수 있습니다. JavaScript가 비활성화된 경우에도 아무런 압력 없이 양식을 검증할 수 있습니다. 개발자는 JavaScript를 사용하지 않습니다. 브라우저는 마크업의 규칙에 따라 유효성 검사를 수행하고 적절한 오류 메시지를 표시합니다. 이러한 사용자 친화적인 기능은 HTML5를 지원하는 브라우저에서만 효과적입니다. 지원되는 브라우저에는 Opera 10+, Safari 5+, Chrome 및 Firefox 4+가 포함됩니다.

HTML5에 새로 추가된 양식 기능에는 기타 입력 유형, 입력 모드, 값 범위, 필수 필드, 유효성 검사 비활성화 및 유효성 검사가 포함됩니다. 아래에서는 이러한 기능을 자세히 소개합니다.

1. 기타 입력 유형

입력 유형이라고 하면 누구나 쉽게 입력 태그를 떠올릴 것입니다. 입력 태그만 다른 유형을 지정할 수 있습니다. HTML5는 입력의 유형 속성에 몇 가지 새로운 속성 값을 추가합니다. 이러한 새로운 속성 값은 데이터 유형 정보를 반영할 수 있을 뿐만 아니라 일부 기본 유효성 검사 기능도 제공합니다. 그 중에서 "email"과 "url"은 가장 많이 지원되는 두 가지 유형이며, 각 브라우저에는 이에 대한 맞춤형 확인 메커니즘도 추가되었습니다. 새로 추가된 유형은 다음과 같습니다

　email: 이메일 입력란은 일반 입력과 다르지 않습니다. 입력한 이메일이 인증에 실패합니다. 모바일 키보드가 변경됩니다

　tel:전화번호

　url:웹페이지 URL

　검색 : 검색 엔진. 크롬 아래에 텍스트를 입력하면 닫힌 추가

숫자

: 숫자만 포함할 수 있는 입력 상자　

color

: 색상 선택기

datetime

: 전체 날짜 표시　

datetime-local

: 시간대 없이 전체 날짜 표시　

time

: 표시 시간대가 없는 시간　

날짜

: 표시 날짜　

주

: 표시 주　

월

: 월 표시

작은 예제 HTML 코드

<form action="http://www.baidu.com">
    <input type="email" />
    <input type="tel" />
    <input type="url" />
    <input type="search"/>
    <input type="range" min="0" max="10" step="2" />
    <input type="number"/>
    <input type="color"/>
    <input type="date"/>
    <input type="datetime"/>
    <input type="datetime-local"/>
    <input type="time"/>
    <input type="month"/>
    <input type="week"/>
    <!-- placeholder是让密码输入框拥有默认提示 -->
    <input type="password" placeholder="请输入密码"/>
    <input type="submit"/>
</form>

2. 입력 모드 HTML5뿐만 아니라 몇 가지 새로운 입력 유형을 추가하고 새로운 속성 - 패턴 속성도 추가합니다. Patten 속성의 값은 텍스트 상자의 값을 일치시키는 데 사용되는 정규식입니다. 정규식을 작성할 때 ^ 및 $ 기호를 시작과 끝 부분에 추가하지 않도록 주의하십시오(이미 존재한다고 가정). 이 두 기호는 입력된 값이 처음부터 끝까지 패턴과 일치해야 함을 나타냅니다. 작은 예는 다음과 같습니다

HTML 코드

<form action="#">
    <input type="text" name="user" pattern="\d{1,9}"/>
    <!-- 点击之后 会本页面提交-->
    <input type="submit"/>
</form>

Chrome 미리보기 효과

3. 값 범위

"이메일", "URL" 외에 HTML5 또한 다른 입력 요소도 정의합니다. 이러한 각 요소에는 일종의 숫자 기반 값을 채워야 합니다. 하지만 이러한 새로 추가된 값과의 브라우저 호환성은 그다지 좋지 않습니다. 따라서 이러한 숫자 유형의 입력 요소에 대해 min 속성(가능한 가장 작은 값), max 속성(가능한 가장 큰 값) 및 step 속성(최소에서 최대까지 두 척도 간의 차이)을 지정할 수 있습니다. 작은 예는 다음과 같습니다

HTML 코드

<input type="range" min="0" max="10" step="2" id="range" />

JavaScript 코드

var oInput=document.getElementById("range");
oInput.stepUp() //每次加1
oInput.stepUp(5) //每次加5
oInput.stepDown() //每次减1
oInput.stepDown(10) //每次减10

4. 필수 필드 필수 필드이며 비워둘 수 없다는 메시지를 사용자에게 표시하려면 양식 필드에 필수 속성을 지정하세요. 이 속성은 입력 태그, 텍스트 영역 태그 및 선택 태그(Opera 12+에서 지원)에 적용됩니다. JavaScript에서는 필수 속성을 통해 양식이 필요한지 여부를 확인할 수 있습니다. 브라우저마다 빈 필수 필드를 다르게 처리합니다. Opera 11 및 Firefox 4는 양식 제출을 방지하고 해당 필드 아래에 도움말 상자를 표시하는 반면 Chrome(9 이전) 및 Safari(5 이전)는 아무 작업도 수행하지 않으며 양식 제출을 방지하지 않습니다. 작은 예는 다음과 같습니다

HTML 코드

<input type="text" id="text" required/>

JavaScript 코드

//检验是否支持必填属性
//支持的为true ，不支持的为false
var is = "required" in document.createElement("input");

5. 유효성 검사 비활성화 양식 태그에 novalidate 속성을 추가하면 양식 자체의 유효성 검사를 방지할 수 있습니다. JavaScript에서는 novalidate를 사용하여 이를 얻을 수 있습니다. 존재하면 true이고, 그렇지 않으면 false입니다. 제출 버튼이 여러 개 있는 경우 특정 제출 버튼을 클릭하면 양식 유효성 검사가 필요하지 않도록 지정하려면 해당 버튼에 formnovalidate 속성을 추가할 수 있습니다. 검증을 비활성화하는 속성은 JavaScript를 사용하여 추가할 수도 있습니다. 작은 예는 다음과 같습니다

HTML 코드

	<input type="text" id="text" required/>
    


	<input type="text" id="text" required/>
    

6、检测有效性，及新添属性和方法

　　在JavaScript中使用checkValidity()方法可以检测表单中的某个字段是否有效。所有表单字段都有这个方法，如果字段的值是有效的，这份方法会返回true，否则则是false。与checkValidity()方法相比，validity属性可以告诉你很多东西。

　　valueMissing : 输入值为空时

　　typeMismatch : 控件值与预期类型不匹配

　　patternMismatch : 输入值不满足pattern正则

　　tooLong : 超过maxLength最大限制

　　rangeUnderflow : 验证的range最小值

　　rangeOverflow：验证的range最大值

　　stepMismatch: 验证range 的当前值 是否符合min、max及step的规则

　　customError： 不符合自定义验证，是否设置setCustomValidity(); 自定义验证

　　placeholder : 输入框提示信息

　　autocomplete : 是否保存用户输入值。默认为on，关闭提示选择off

　　autofocus : 指定表单获取输入焦点

　　list和datalist : 为输入框构造一个选择列表。list值为datalist标签的id

　　Formaction : 在submit里定义提交地址

小例子JavaScript代码

if(input.validity && !input.validity.valid){
	if(input.validity.valueMissing){
		alert("不能为空")
	}else if(input.validity.typeMismatch){
		alert("控件值与预期类型不匹配");
	}
}

　　HTML5 실습 및 양식 분석就为大家介绍到这里，有了表单自行验证，JavaScript的工序又会变得少之又少，对开发人员来说真是件没事儿。更多相关内容请关注PHP中文网（www.php.cn）！