Article introduction of Wulin.com (www.vevb.com): HTML5 daily practice of the new attributes of Form.
Many new tags and functional attributes have been added to HTML5. Today we will look at the new usage method of a Form form in HTML5. So what is the difference between this function newly added in HTML5 and the functions we used before? Let's look at a few scenes below, you will understand~
If we need to submit different form elements in the page, and these form elements are distributed in various locations in HTML, then Form can only contain all Form tags.
Old method:
<form id=form1 action=>
<input id=userName name=userName type=text/>
<input id=userPwd name=userPwd type=password/>
<input id=userAge name=userAge type=text/>
<input type=submit value=submit/
</form>
But what should I do if this Form contains some elements (such as userAge) that do not need to be submitted in this From? It seems that you can only submit it, so that the background programmer does not accept this parameter or uses js to put all the contents that need to be submitted in this form into the hidden hidden area, and then submit it. You may modify it to the following
Improved:
<form id=form1 action=>
<input id=hd_userName name=userName type=hidden/>
<input id=hd_userPwd name=userPwd type=hidden/>
</form>
<input id=userName name=userName type=text/>
<input id=userPwd name=userPwd type=password/>
<input id=userAge name=userAge type=text/>
<input type=submit value=submit/
Well, it is good to sort it out like this and can meet our requirements, but there are too many js, which wastes network resources and HTTP request packets, increases the project size, and is relatively troublesome to maintain.
HTML5 method:
<form id=form1 action=>
<input type=submit value=submit/
</form>
<input id=userName name=userName for=form1 type=text/>
<input id=userPwd name=userPwd for=form1 type=password/>
<input id=userAge name=userAge type=text/>
The for attribute here = the form ID, so that it is clear which form these elements belong to. You can understand this for attribute as the for attribute in label, but in this case in HTML5, it belongs to the element of fome1. Now looking at the code, it is much cleaner and the project files are not large, making it easy to maintain.
If you don’t understand, you can leave me a message directly and I will reply to everyone as soon as possible.
If you understand this, you can practice it yourself and post it to help everyone make progress together!