HTML5 practice and Analysis of forms

HTML5 has also been improved in terms of forms, some new functions for verifying data are added, and some new tag attributes are added. With these verification functions, you can verify the form without using JavaScript, even if JavaScript is disabled, without pressure. Developers do not need JavaScript. the browser performs verification based on the rules in the tag, and then displays the appropriate error information. These user-friendly features are only available in HTML5 browsers. Supported browsers include Opera 10 +, Safari 5 +, Chrome and Firefox 4 +.

Newly Added HTML5 forms include: other input types, input mode, value range, required fields, disable verification, and check validity. The following describes these functions in detail.

1. Other input types

When it comes to the input type, you will soon think of the input tag. Only the input tag can specify different types. HTML5 adds some new property values to the type attribute of input. These new property values not only reflect the data type information, but also provide some default verification functions. Among them, "email" and "url" are the two most supported types, and each browser also adds a custom verification mechanism for them. The newly added types are as follows:

　　Email: The email text box is no different from the ordinary one. verification fails when the input is not an email box. The mobile keyboard may change.

　　Tel: Phone number

　　Url: Webpage URL

　　Search: Search engine. After entering text in chrome, an extra closed X

　　Range: The value selector in a specific range. Options include min, max, and step)

　　Number: Enter boxes that can only contain numbers

　　Color: Color selector

　　Datetime: Display the complete date

　　Datetime-local: Display the complete date, excluding the time zone

　　Time: Display time, excluding the time zone

　　Date: Display date

　　Week: Display week

　　Month: Display month

　　Small example HTML code

2. input mode

HTML5 not only adds some new input types, but also adds the patten attribute. The value of the Patten attribute is a regular expression used to match the value in the text box. When writing regular expressions, note that ^ and $ are not added to the beginning and end (assuming there is already a regular expression ). These two symbols indicate that the input value must match the pattern from start to end. Example

　　HTML code

　　Chrome Preview

3. Value Range

In addition to "email" and "url", HTML5 also defines several other input elements. All these elements require a numeric-based value. However, the browser is not compatible with these new values. Therefore, for the input elements of these numeric types, you can specify the min attribute (minimum possible value) and max attribute (maximum possible value) and step attributes (the difference between the two scales from min to max ). Example

　　HTML code

　　JavaScript code

Var oInput = document. getElementById ("range"); oInput. stepUp () // Add 1oInput each time. stepUp (5) // Add up to input at a time. stepDown () // subtract 1 oinput each time. stepDown (10) // subtract 10 each time

4. Required Fields

Specify the required attribute in the form field and you will be prompted that this is a required item and cannot be blank. This attribute applies to the input tag, textarea tag, and select tag (supported by Opera 12 + ). In JavaScript, the required attribute can be used to check whether the form is required.

For blank fields, the processing methods for different browsers are different. Opera 11 and Firefox 4 will prevent forms from being submitted. A help box will pop up under the corresponding fields. Chrome (before 9) and Safari (before 5) will neither do anything nor stop form submission. Example

　　HTML code

　　JavaScript code

// Check whether required properties are supported. // true is supported. falsevar is = "required" in document. createElement ("input") is not supported ");

5. Disable Verification

By adding the novalidate attribute to the form tag, the form is not verified by itself. JavaScript can be obtained using novalidate. If it exists, it is true. Otherwise, it is false. If there are multiple submission buttons, you can add the formnovalidate attribute to the corresponding button to specify that you do not need to click a submission button to verify the form. You can also use JavaScript to add the property for disabling verification. Example

　　HTML code

6. check validity and add new attributes and Methods

In JavaScript, The checkValidity () method can be used to check whether a field in the form is valid. All form fields have this method. If the field value is valid, this method returns true; otherwise, it is false. Compared with the checkValidity () method, the validity attribute can tell you a lot.

　　ValueMissing: When the input value is null

　　TypeMismatch: The control value does not match the expected type.

　　PatternMismatch: The input value does not meet the pattern regular expression.

　　TooLong: Exceeds maxLength limit

　　RangeUnderflow: The minimum value of the verified range.

　　RangeOverflow: Maximum value of the verified range

　　StepMismatch: Verify that the current value of range complies with the rules of min, max, and step.

　　CustomError: Whether setCustomValidity () is set and custom verification is not met.

　　Placeholder: Prompt information in the input box

　　Autocomplete: Whether to save user input values. The default value is on. If it is disabled, the system prompts to select off.

　　Autofocus: Specify the form to get the input focus

　　List and datalist: Creates a selection list for the input box. The list value is the id of the datalist tag.

　　Formaction: Define the submission address in submit

　　Small ExampleJavaScript code

If (input. validity &&! Input. validity. valid) {if (input. validity. valueMissing) {alert ("cannot be blank")} else if (input. validity. typeMismatch) {alert ("the control value does not match the expected type ");}}

The form of HTML5 practice and analysis is introduced here. With form self-verification, JavaScript processes will become fewer and fewer, which is really okay for developers. More HTML5-related content can be found at Menglong xiaozhan.