Comment: The absolutely powerful functions in HTML5 forms are introduced in detail in this article, including: the properties of the form, and there are renderings. You can refer to them.
1. Automatic verification of email only requires type=email2. Verification of date (year, month, date): type=date
3. Time verification (format: 00:00): type=time
4. Verification of numbers (can be added up and subtracted down) type=number
5. Month (--year--month) type=month
6. Week (--------------------------------------------------------------------------------------------------------------------------
7. range(range 0-100) type=range
8. Search type=search
9. Color collection: type=color
10. Url verification (must be preceded) type=url
<form action="Myform.php" method='post'>
Email: <input type="email" required="required" /><br/>
Date: <input type="date" /><br/>
Time: <input type="time" /><br/>
Number: <input type="number" /><br/>
Month: <input type="month" /><br/>
Week: <input type="week"/><br/>
range: <input type="range" /><br/>
search: <input type="search"/><br/>
Color: <input type="color" /><br/>
<input type="text" value="" list="movie"/>
<datalist>
<option>Hahaha</option>
<option>Hey Hey Hey Hey</option>
<option>Hehehe</option>
</datalist>
<input type="submit" value="submit"/>
</form>
url:<input type="url" required="required" form="Myform" /><br/>
Username: <input type="text" required="required" placeholder="Please enter username" form="Myform" autofocus="autofocus" pattern='/w{5}'/>
html added form attribute
1. required=required. Required.
2. placeholder=Please enter the default value of the user name. The prompt is not submitted to the server.
3. autofocus=autofocus autofocus function to improve user-friendliness
4. pattern='/w{5}' Fill in regular expression in html element
You can submit forms outside of forms, but in <input form=Myform/>, form=Myform needs to be equal to the value of id in form form, i.e.: <form id=Myform></form>
Automatically fill form: (The effect feels much better than the drop-down list and it feels good) The value of the list should be equal to the value of the id in the datalist so that I can recognize the content I want to display:
<input type="text" value="" list="movie"/>
<datalist>
<option>Hahaha</option>
<option>Hey Hey Hey Hey</option>
<option>Hehehe</option>
</datalist>
A sticker: