Form表单在HTML5中新的使用方法

2020-03-24 18:25:07

字体：大中小

来源：转载

供稿：网友

在HTML5中增加了许多新的标签和功能属性，今天我们来看一个Form表单在HTML5中新的使用方法。那么在HTML5中新加入的这个功能与之前咱们使用的功能区别在哪里呢？在下面咱们有几个场景来看，你就明白啦~

假如咱们需要把页面中不同的表单元素提交，而这些表单元素又分布在HTML中的各个位置，那么Form就只能包含所有的Form标签了。
老方法： form id= form1 action= http://www.phpstudy.net/
input id= userName name= userName type= text /
input id= userPwd name= userPwd type= password /
input id= userAge name= userAge type= text /
input type= submit html' target='_blank'>value= 提交 /
/form 但是在此Form中又包含一些不需要在此From中提交的元素（比如userAge）怎么办呢？貌似只能提交了，让后台程序员不接受此参数或者使用js把所有需要再此表单中提交的内容放入到hidden隐藏区域中，然后提交，你可能会修改成如下

改良后：
form id= form1 action= http://www.phpstudy.net/
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= 提交 / 嗯，这样整理了一下是不错，可以满足我们的要求，但是js就太多了，浪费网络资源和HTTP请求数据包，增加项目大小，维护起来相对比较麻烦。HTML5的方法：
form id= form1 action= http://www.phpstudy.net/
input type= submit value= 提交 /
/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 / 这里的for属性=表单的ID，这样一来，这些元素到底归那个表单就一目了然了，这个for属性，你可以理解为label中的for属性，只不过在HTML5中的这种情况下，他就属于fome1的元素了。现在再看代码，干净利索多了，项目文件也不大，易于维护。如果你有不懂的，可以也可以直接给我留言，我会尽快回复大家的。
如果看懂这个以后，大家可以自己练习一下，把练习发上来，帮助大家一起进步！html教程

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。

上一篇：HTML5 form标签之解放表单验证、增加文件上传、集

下一篇：IE浏览器支持HTML5标准的方法