Examples of HTML5 form automatic verification and html5 form instance code

Examples of HTML5 form automatic verification and html5 form instance code

In HTML5, while adding a large number of form elements and attributes, It also adds a large number of functions to verify the content validity of the newly added elements in the form and form at the time of submission, next, let's talk about automatic verification.

In Html5, attributes can be used for elements to perform automatic verification when a form is submitted. After the code is executed, when the form is submitted, the system automatically verifies whether the entered content is a number. If the verification fails, the error message text is displayed.

<! DOCTYPE html> 
Next, let's take a look at the attributes appended to html5 that restrict the input content in the element.
1. required attributes
The new required attribute in html5 can be applied to most input elements (except hidden elements and Image Element buttons ). If the content in the element is blank during submission. It is not allowed to be submitted, and the prompt text is displayed in the browser, prompting users that the content must be entered in this element.

2. pattern attributes
The newly added input elements, such as email, number, and URL, must conform to certain formats and use the pattern attribute for the input element, set the attribute value to a regular expression in a certain format. When submitting the Statement, the system checks whether the content conforms to the specified format. If the entered content does not conform to the specified format, the submission is not allowed. The prompt text is displayed in the browser. The submitted content must comply with the specified format. The Code is as follows, the input must be a number and 3 uppercase letters:
<! DOCTYPE html> 
The execution result is as follows:

3. min and max attributes
Min and max are special attributes of the input element of the date or numeric type. They limit the value and date range entered in the input element.
<! DOCTYPE html> 
The execution result is as follows:

4. step attributes
The step attribute controls the step when the value in the input element is increased or decreased. For example, if you want the user to input a value between 0 and 100, but it must be a multiple of 5, you can specify step as 5. The Code is as follows:
<! DOCTYPE html> 
The effect is as follows:

We hope you can have a deeper understanding of the new attributes of these forms! If you have any questions, please leave a message and the editor will reply to you in time. Thank you very much for your support for the help House website!