HTML5 practice and analysis of forms

HTML5 has also made some improvements to the form, adding some new data verification functions and adding some new tag attributes. With these validation functions, you can perform validation without JavaScript. Even if JavaScript is disabled, you can validate the form without any pressure. Developers don't use JavaScript; the browser performs validation based on the rules in the markup and displays the appropriate error message. These user-friendly features are only effective in browsers that support HTML5. Supported browsers include Opera 10+, Safari 5+, Chrome and Firefox 4+.

The newly added form functions of HTML5 include: other input types, input modes, value ranges, required fields, disabling validation and detecting validity. Below we will introduce these functions in detail.

1. Other input types

Speaking of input types, everyone will quickly think of the input tag. Only input tags can specify different types. HTML5 just adds some new attribute values ​​​​to the type attribute in the input. These new attribute values ​​can not only reflect data type information, but also provide some default validation functions. Among them, "email" and "url" are the two most supported types, and each browser has also added customized verification mechanisms for them. The newly added types are as follows

　email: The email text box is no different from the ordinary one. When the input is not an email, the verification fails. The mobile keyboard will change

　tel : Phone number

　url: URL of the webpage

　search : search engine. After entering text under chrome, there will be an additional closed X

　range: Value selector within a specific range, min, max, step (number of steps)

　number: Input box that can only contain numbers

　color : Color selector

　datetime: Display the complete date

　datetime-local : Display the complete date without time zone

　time : Display time without time zone

　 date : Display date

　week : Display week

　month : Display month

Small example HTML code

<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. Input mode

HTML5 not only adds some new input types, but also adds new Attribute - pattern attribute. The value of the Patten attribute is a regular expression that is used to match the value in the text box. When writing regular expressions, be careful not to add ^ and $ symbols at the beginning and end (assuming they already exist). These two symbols indicate that the entered value must match the pattern from beginning to end. A small example is as follows

HTML code

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

Chrome preview effect

##3. Value range

In addition to “email” and “url”, HTML5 also defines other input elements. Each of these elements requires filling in some kind of number-based value. But browser compatibility with these newly added values ​​is not very good. So for input elements of these numerical types, you can specify the min attribute (the smallest possible value), the max attribute (the largest possible value), and the step attribute (the difference between the two scales from min to max). A small example is as follows

HTML code

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

JavaScript code

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

4. Required fields

Specify the required attribute in the form field to prompt the user that this is a required field and cannot be empty. This attribute applies to input tags, textarea tags, and select tags (supported by Opera 12+). In JavaScript, you can check whether a form is required through the required attribute.

Different browsers handle empty required fields differently. Opera 11 and Firefox 4 will prevent form submission and pop up a help box under the corresponding field, while Chrome (before 9) and Safari (before 5) do nothing and do not prevent form submission. A small example is as follows

HTML code

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

JavaScript code

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

5. Disable validation

By adding the novalidate attribute to the form tag, you can prevent the form from validating itself. You can use novalidate to obtain it in JavaScript. If it exists, it is true, otherwise it is false. If there are multiple submit buttons, in order to specify that clicking a certain submit button does not require validation of the form, you can add the formnovalidate attribute to the corresponding button. Attributes that disable validation can also be added using JavaScript. A small example is as follows

HTML code

	<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 practice and analysis of forms就为大家介绍到这里，有了表单自行验证，JavaScript的工序又会变得少之又少，对开发人员来说真是件没事儿。更多相关内容请关注PHP中文网（www.php.cn）！