武林網(www.vevb.com)文章簡介:HTML5每日一練之Form新屬性的使用。
在HTML5中增加了許多新的標籤和功能屬性,今天我們來看一個Form表單在HTML5中新的使用方法。那麼在HTML5中新加入的這個功能與之前咱們使用的功能區別在哪裡呢?在下面咱們有幾個場景來看,你就明白啦~
假如咱們需要把頁面中不同的表單元素提交,而這些表單元素又分佈在HTML中的各個位置,那麼Form就只能包含所有的Form標籤了。
老方法:
<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=提交/>
</form>
但是在此Form中又包含一些不需要在此From中提交的元素(比如userAge)怎麼辦呢?貌似只能提交了,讓後台程序員不接受此參數或者使用js把所有需要再此表單中提交的內容放入到hidden隱藏區域中,然後提交,你可能會修改成如下
改良後:
<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=提交/>
嗯,這樣整理了一下是不錯,可以滿足我們的要求,但是js就太多了,浪費網絡資源和HTTP請求數據包,增加項目大小,維護起來相對比較麻煩。
HTML5的方法:
<form id=form1 action=>
<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的元素了。現在再看代碼,乾淨利索多了,項目文件也不大,易於維護。
如果你有不懂的,可以也可以直接給我留言,我會盡快回復大家的。
如果看懂這個以後,大家可以自己練習一下,把練習發上來,幫助大家一起進步!