表單是HTML中獲取用戶輸入的的手段隔缀。一個基本的表單實例如下:
<form action="form_action.asp" method="get">
<p>First name: <input type="text" name="fname" /></p>
<p>Last name: <input type="text" name="lname" /></p>
<input type="submit" value="Submit" />
</form>
action屬性值為提交的地址袱吆。method屬性指定了用來將表單數(shù)據(jù)發(fā)送到服務器的HTTP方法,允許的值為get和post,默認值為get夷蚊。get請求用于安全交互,同一個請求可以發(fā)起任意多次而不會產(chǎn)生額外作用翘簇。post請求則用于不安全交互撬码,提交數(shù)據(jù)的行為會導致一些狀態(tài)的改變。具體區(qū)別可以參考get與post區(qū)別版保。
表單主要是input元素呜笑,常用input標簽如下:
常用input標簽
button 定義可點擊按鈕(多數(shù)情況下,用于通過 JavaScript 啟動腳本)彻犁。
checkbox 定義復選框叫胁。
file 定義輸入字段和 "瀏覽"按鈕,供文件上傳汞幢。
hidden 定義隱藏的輸入字段驼鹅。
image 定義圖像形式的提交按鈕。
password 定義密碼字段森篷。該字段中的字符被掩碼输钩。
radio 定義單選按鈕。
reset 定義重置按鈕仲智。重置按鈕會清除表單中的所有數(shù)據(jù)买乃。
submit 定義提交按鈕。提交按鈕會把表單數(shù)據(jù)發(fā)送到服務器钓辆。
text 定義單行的輸入字段剪验,用戶可在其中輸入文本。默認寬度為 20 個字符前联。
其它常用輸入元素還有select和textarea
<select>
<option value ="volvo">Volvo</option>
<option value ="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<textarea rows="3" cols="20">
test
</textarea>
select 元素可創(chuàng)建單選或多選菜單
textarea 元素定義多行的文本輸入控件
常用label元素將字段與標簽關(guān)聯(lián)
<form>
<label for="male">Male</label>
<input type="radio" name="sex" id="male" />
<br />
<label for="female">Female</label>
<input type="radio" name="sex" id="female" />
</form>
label 元素不會向用戶呈現(xiàn)任何特殊效果功戚。不過,它為鼠標用戶改進了可用性似嗤。如果在 label 元素內(nèi)點擊文本啸臀,就會觸發(fā)此控件。就是說烁落,當用戶選擇該標簽時壳咕,瀏覽器就會自動將焦點轉(zhuǎn)到和標簽相關(guān)的表單控件上。<label> 標簽的 for 屬性應當與相關(guān)元素的 id 屬性相同顽馋。
fieldset與legend
<fieldset>
<legend>健康信息</legend>
身高:<input type="text" />
體重:<input type="text" />
</fieldset>
fieldset 元素可將表單內(nèi)的相關(guān)元素分組谓厘,legend 元素為fieldset 元素定義標題。
本部分內(nèi)容參考HTML5權(quán)威指南寸谜,w3school竟稳,需要更詳細的內(nèi)容可以參考MDN文檔。