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 verification of new elements in the form and form in the form during submission. Next, let's talk about automatic verification.
In HTML5, the method of using the attributes of the element can be implemented by the function of automatic verification during the form of the form. After the code is executed, the content input will be automatically verified when submitting the form. Error information text.
<! Doctype html> <html Lang = EN> <Head> <meta charset = UTF-8> <Title> Form verification example </title> </head> <blate> <FORM ACTION =# METHOD = Post> <input> <input Type = Text name = Text Required Pattern =^/W.*$> <input Type = Submit Value = Submit> </Form> </Body> </html>
Next, let's take a look at the specification of attributes that limit the content of the input content in the HTML5 in HTML5.
1.required attribute
The newer attribute in HTML5 can be applied to most input elements (except for hidden elements, picture element buttons). When submitting, if the content in the element is blank. If you are not allowed to be submitted, the information prompt text is displayed in the browser, prompting the user to enter the content in this element, the effect is as shown in the figure
2. Pattern attribute
The newly added Input elements mentioned earlier, such as Email, Number, URL, etc., require the input content to meet a certain format, use Pattern attributes for input elements, and set the attribute value to a regular expression of a certain format. When submitting Will check whether the content is in line with the format. When the content of the input does not meet the format, the submission is not allowed. At the same time, the information prompt text is displayed in the browser. The
<! Doctype html> <html Lang = EN> <gead> <meta charset = UTF-8> <Title> Form verification example </title> </head> <body> <FORM ACTION =# METHOD = POST> Please enter Specifying content: <input pattern = [0-9] [az] {3} name = Part Placeholder = Input: A number of numbers three capital letters> <input type = submit value = Submit> </form> </body> < /html>The execution effect is as follows:
3.min property and MAX attribute
The two attributes of MIN and MAX are the special attributes of the INPUT element of the date or numerical type. They limit the range and date of the value entered in the INPUT element.
<! Doctype html> <html Lang = EN> <gead> <meta charset = UTF-8> <Title> Form verification example </title> </head> <body> <FORM ACTION =# METHOD = POST> Please enter Value: <input type = number name = point min = 0 max = 100/> <input type = submit value = Submit> </form> </body> </html>
The execution effect is as follows:
4.Step attribute
STEP attribute controls the value in the INPUT element to increase the steps when decreased. For example, when you want the value of the user to enter between 0 and 100, but when you must be a multiple of 5, you can specify that STEP is 5, and the code is as follows:
<! Doctype html> <html Lang = EN> <Head> <meta charset = UTF-8> <Title> Form verification example </title> </head> <blate> <FORM ACTION =# METHOD = get> <input> <input> Type = NUMBER NAME = POINT STEP = 5/> <input Type = SUBMIT/> </Body> </html>
The effect is as follows:
I hope that for the new attributes of these forms, you can have a deeper understanding! If you have any questions, please leave me a message, Xiaobian will reply to everyone in time. Thank you very much for your support for the VEVB Wulin website!