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標準的方法