Comments: The absolutely powerful functions in HTML5 forms are described in detail in this article, including: Form attributes, including, for details, refer to section 1. for automatic mailbox verification, only type = "email" is required"
2. date verification (year, month, day): type = "date"
3. time verification (Format: 00: 00): type = "time"
4. digit verification (you can add or subtract) type = "number"
5. month (-- year -- month) type = "month"
6. week (-- year -- week) type = "week"
7. range (range: 0-100) type = "range"
8. search type = "search"
9. color: type = "color"
10. url verification (must be prefixed with http: // ---) type = "url"
The Code is as follows:
<Form action = "Myform. php" id = 'myform' method = 'post'>
Email: <input type = "email" id = 'email 'required = "required"/> <br/>
Date: <input type = "date" id = 'date'/> <br/>
Time: <input type = "time" id = 'time'/> <br/>
Number: <input type = "number" id = 'number'/> <br/>
Month: <input type = "month" id = 'month'/> <br/>
Week: <input type = "week" id = 'Week '/> <br/>
Range: <input type = "range" id = 'range'/> <br/>
Search: <input type = "search" id = 'search'/> <br/>
Color: <input type = "color" id = 'color'/> <br/>
<Input type = "text" name = "auto" value = "" list = "movie"/>
<Datalist id = "movie">
<Option> hehao </option>
<Option> feeding </option>
<Option> </option>
</Datalist>
<Input type = "submit" value = "submit"/>
</Form>
Url: <input type = "url" id = 'url' required = "required" name = "url" form = "Myform"/> <br/>
User name: <input type = "text" required = "required" placeholder = "Enter the user name" form = "Myform" autofocus = "autofocus" pattern = '\ w {5}'/>
New Form attributes in html
1. required for required = "required" verification
2. placeholder = "Enter the user name" default value. It is not submitted to the server.
3. autofocus = "autofocus" automatic focus function to improve user friendliness
4. pattern = '\ w {5}' Fill in the Regular Expression in the html Element
You can also submit a form outside the form, but in <input form = "Myform"/>, form = "Myform" must be equal to the id value in form: <form id = "Myform"> </form>
Automatic Filling form: (the effect is much better than the drop-down list and the effect is good) the value of list must be equal to the value of id in datalist to identify what I want to display:
The Code is as follows:
<Input type = "text" name = "auto" value = "" list = "movie"/>
<Datalist id = "movie">
<Option> hehao </option>
<Option> feeding </option>
<Option> </option>
</Datalist>
Texture: