1娃殖、表單簡(jiǎn)介
HTML 表單用于搜集不同類(lèi)型的用戶輸入定庵。
表單是一個(gè)包含表單元素的區(qū)域。表單元素包括：文本域(textarea)锣光、下拉列表、單選框(radio-buttons)铝耻、復(fù)選框(checkboxes)等等誊爹。下面會(huì)對(duì)常見(jiàn)表單元素做逐一介紹。
２瓢捉、表單標(biāo)簽
表單使用表單標(biāo)簽 <form> 來(lái)設(shè)置:
<form>·input 元素·</form>
３频丘、表單元素
（1）輸入元素—<input>標(biāo)簽
input標(biāo)簽的輸入類(lèi)型是由類(lèi)型屬性（type）定義的。大多數(shù)經(jīng)常被用到的輸入類(lèi)型如下：
1）文本域通過(guò)<input type="text"> 標(biāo)簽來(lái)設(shè)定泡态，當(dāng)用戶要在表單中鍵入字母搂漠、數(shù)字等內(nèi)容時(shí)，就會(huì)用到文本域某弦。
<form>
name: <input type="text" name="name">
</form>
可以增加placeholder屬性桐汤，在文本輸入框中顯示灰色提示文字，開(kāi)始輸入內(nèi)容靶壮，提示文字會(huì)消失怔毛。
<form>
name: <input type="text" name="name" placeholder="請(qǐng)輸入名字">
</form>
2）密碼字段通過(guò)標(biāo)簽<input type="password"> 來(lái)定義,密碼字段字符不會(huì)明文顯示，而是以星號(hào)或圓點(diǎn)替代腾降。
<form>
Password: <input type="password" name="pwd">
</form>
3）單選按鈕（Radio）通過(guò)<input type="radio"> 標(biāo)簽定義了表單單選框選項(xiàng)拣度。
<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
4）復(fù)選框（Checkboxes）通過(guò)<input type="checkbox"> 定義了復(fù)選框.。用戶需要從若干給定的選擇中選取一個(gè)或若干選項(xiàng)螃壤。
<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>
5）上傳文件框（file）通過(guò)<input type="file" >定義上傳文件框抗果，用戶可以看到一個(gè)文件選擇的窗口，通過(guò)點(diǎn)擊“瀏覽”按鈕選擇文件奸晴。accept屬性是指定瀏覽的文件類(lèi)型冤馏。如下代碼，則只能瀏覽選擇git/png格式的圖片文件寄啼。
<form>
<input type="file" accept="image/gif,image/png">
</form>
6）提交按鈕
- submit類(lèi)型
<input type="submit"> 定義了提交按鈕宿接。當(dāng)用戶單擊確認(rèn)按鈕時(shí)，表單的內(nèi)容會(huì)被傳送到另一個(gè)文件辕录。表單的動(dòng)作屬性定義了目的文件的文件名睦霎。由動(dòng)作屬性定義的這個(gè)文件通常會(huì)對(duì)接收到的輸入數(shù)據(jù)進(jìn)行相關(guān)的處理。
<form name="input" action="test.html" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
示例代碼的執(zhí)行是：在上面的文本框內(nèi)鍵入幾個(gè)字母走诞，然后點(diǎn)擊確認(rèn)按鈕副女，那么輸入數(shù)據(jù)會(huì)傳送到 "test.html" 的頁(yè)面。該頁(yè)面將顯示出輸入的結(jié)果蚣旱。
button類(lèi)型
<input type="button"> 只是定義顯示提交按鈕碑幅。當(dāng)用戶單擊確認(rèn)按鈕時(shí)戴陡，表單的內(nèi)容不會(huì)被提交傳送。reset類(lèi)型
<input type="reset"> 定義清空按鈕沟涨。當(dāng)用戶單擊清空按鈕時(shí)恤批，input輸入框內(nèi)用戶輸入的內(nèi)容都會(huì)被清空重置。
7）隱藏（hidden）通過(guò)<input type="hidden">來(lái)隱藏內(nèi)容裹赴，在頁(yè)面上該input不做顯示喜庞。
<form>
<input type="hidden" name="huangyh" value="name">
</form>
示例代碼的input在頁(yè)面中并不會(huì)顯示，但瀏覽器仍然會(huì)向后臺(tái)傳輸name值和value值棋返。
（2）注記元素—<label> 標(biāo)簽
<label> 標(biāo)簽為 input 元素定義標(biāo)注（標(biāo)記）延都。
label 元素不會(huì)向用戶呈現(xiàn)任何特殊效果。不過(guò)睛竣，它為鼠標(biāo)用戶改進(jìn)了可用性晰房。如果您在 label 元素內(nèi)點(diǎn)擊文本，就會(huì)觸發(fā)此控件射沟。就是說(shuō)殊者，當(dāng)用戶選擇該標(biāo)簽時(shí)，瀏覽器就會(huì)自動(dòng)將焦點(diǎn)轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上验夯。
注意：<label> 標(biāo)簽的 for 屬性應(yīng)當(dāng)與相關(guān)元素的 id 屬性相同幽污。
<form action="test.html">
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male"><br>
<label for="female">Female</label>
<input type="radio" name="sex" id="female" value="female"><br>
<input type="submit" value="提交">
</form>
（3）下拉選擇元素—<select> 標(biāo)簽
<select> 元素用來(lái)創(chuàng)建下拉列表。<select> 元素是一種表單控件簿姨，可用于在表單中接受用戶輸入距误。<select> 元素中的 <option> 標(biāo)簽定義了列表中的可用選項(xiàng)。
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
（4）文本域—<textarea> 標(biāo)簽
<textarea> 標(biāo)簽定義一個(gè)多行的文本輸入控件扁位。用于輸入大段文字段落准潭。文本區(qū)域中可容納無(wú)限數(shù)量的文本忠售，其中的文本的默認(rèn)字體是等寬字體（通常是 Courier）杆逗∈觯可以通過(guò) cols 和 rows 屬性來(lái)規(guī)定 textarea 的尺寸大小偿警，不過(guò)更好的辦法是使用 CSS 的 height 和 width 屬性。
<form>
<textarea rows="10" cols="30">
我是一個(gè)文本框科平。
</textarea>
</form>
后記
以上為Form表單中常用常見(jiàn)的元素校镐，整理以作記憶衣厘，也方便日后補(bǔ)充添加垦细。
