我在學習表單元素的時候感覺很混亂，特別是 name value這兩個屬性，沒有真正理解它們是干什么的，所以需要梳理一下。
HTML表單元素主要有 <form> <input> <select> <textarea> <button> <fieldset> <legend>
HTML5新增的表單元素有三個<datalist> <keygen> <output>
下面梳理一下這些表單元素的用法并指出各元素的name、value屬性含義
1. <form>元素
<form>元素定義HTML表單，收集用戶輸入。
屬性主要有 action和method；
action定義在提交表單時執(zhí)行的動作，向服務器提交表單的通常做法是使用提交按鈕（type為submit的<input>元素）；如果省略該屬性，則action會被設(shè)置為當前頁面。
method屬性規(guī)定在提交表單時所用的HTTP方法（HTTP方法有GET和POST兩種，這里只說一下兩者的主要區(qū)別：GET方法會使表單數(shù)據(jù)在頁面地址欄是可見的，而POST方法不可見，所以POST方法安全性更佳）。
<form action="action_page.php" method="get">
form elements...
</form>
2. <input>元素
<input>元素很常用（為行內(nèi)元素，在“去哪兒”找實習面試的時候被問到過，當時都答錯......），根據(jù)不同的type屬性，可以變化為多種形態(tài)。
type的取值有text radio checkbox password submit button;HTML5又新增了type類型email url search number range color date pickers（date month week...），這些新類型提供了更好的輸入控制和驗證。
對于<input>元素，除了type屬性，常用的就是name和value屬性：
name屬性----想要被正確地提交，每個輸入字段必須設(shè)置一個name屬性。
value屬性----為<input>元素設(shè)定值，對于不同的type，value屬性的含義也不同。
type="submit"、"button"、"reset" ——定義按鈕上顯示的文本
type="text"、"password"、"hidden" ——定義輸入字段的初始值
type="radio"、"checkbox"、"image" ——定義與輸入相關(guān)聯(lián)的值
type="file" ——無法與value屬性一起使用
這里只具體介紹type為radio checkbox的<input>元素。
- radio定義單選鈕，允許用戶在有限數(shù)量的選項中選擇一個。
<form action="action_page.php" method="get">
<fieldset> <!--<fieldset>元素用于組合表單中相關(guān)數(shù)據(jù)；<legend>元素用于為<fieldset>元素定義標題-->
<legend>你喜歡誰？</legend><br>
<input type="radio" name="star" value="楊洋">楊洋<br>
<input type="radio" name="star" value="許嵩">許嵩<br>
<input type="radio" name="star" value="吳彥祖">吳彥祖<br>
<input type="submit">
</fieldset>
</form>
效果圖如下
當選擇“許嵩”，點擊“提交”按鈕后，看到頁面地址欄里表單數(shù)據(jù)的內(nèi)容如下圖所示。
注意：單選鈕的各個name屬性值要完全一致，否則會不只選中一個選項
- checkbox是復選框，允許用戶在有限數(shù)量的選項中選擇零個或多個選項。
<form action="" method="get">
<fieldset>
<legend>你喜歡誰？</legend><br>
<input type="checkbox" name="star" value="楊洋">楊洋<br>
<input type="checkbox" name="star" value="許嵩">許嵩<br>
<input type="checkbox" name="star" value="吳彥祖">吳彥祖<br>
<input type="submit">
</fieldset>
</form>
效果圖如下
當我全選時（好像暴露了什么），
name和value值表現(xiàn)如下
3. <select>元素- -下拉列表
定義下拉列表，需要配合<option>使用，<option>定義待選擇的選項；通常會把首個選項顯示為被選選項；可通過selected屬性來定義預定義選項。
<form action="action_page.php" method="get">
<select name="fruits">
<option value="apple">apple</apple>
<option value="pineapple">pineapple</apple>
<option value="mango">mango</apple>
<option value="grape">grape</apple>
</select>
<input type="submit">
</form>
效果圖如下：
打開下拉列表，選擇"mango"這一項，并點擊"提交"按鈕，因為
method設(shè)置為了get，所以在地址欄中可看到數(shù)據(jù)：分別取自<select>中的name屬性值和被選項的value屬性值。
當value的屬性值是空的時候，會取<option>的內(nèi)容值作為表單數(shù)據(jù)提交。
4. <textarea>元素
定義多行輸入字段（文本域）
<form action="action_page.php" method="get">
<textarea name="msg" rows="10" cols="30">Just Do It!</textarea>
<input type="submit">
</form>
效果如下圖
地址欄數(shù)據(jù)如下圖所示。當文本域為空時，提交的表單數(shù)據(jù)也為空；改變文本域的值，再次提交，則表單數(shù)據(jù)也會相應的改變。
5. <button>元素
<button>元素的type屬性有三個可能的值button submit和reset；這里只介紹屬性值button
type為button時，定義可點擊的按鈕
<form action="action_page.php" method="get">
<button type="button" onclick="alert('How are you doing?')">click</button>
</form>
效果如下圖
點擊后出現(xiàn)
6. <datalist>元素
規(guī)定輸入域的選項列表；需要配合<option>元素一起使用，該元素定義列表項；如需把datalist綁定到輸入域，需要把輸入域的list屬性值設(shè)置為datalist的id值；<option>元素必須要設(shè)置value屬性。
<form action="action_page.php" method="get">
<input type="url" name="website" list="url_list">
<datalist id="url_list">
<option value="http://www.baidu.com"></option>
<option value="http://www.google.com"></option>
<option value="http://www.itdecent.cn"></option>
<option value="http://www.w3cschool.com"></option>
</datalist>
<input type="submit">
</form>
效果圖如下
當選擇第三項，并點擊"提交"按鈕后，地址欄數(shù)據(jù)如下
7. <keygen>元素
提供一種驗證用戶的可靠方法。
<keygen>元素是密鑰對生成器（key-pair generator）。當提交表單時會生成兩個鍵，一個是公鑰，一個是私鑰。私鑰存儲于客戶端，公鑰則被發(fā)送到服務器。公鑰可用于之后驗證用戶的客戶端證書。
目前瀏覽器對該元素糟糕的支持程度不足以使其成為有用的安全標準。
<form action="" method="get">
<keygen name="security"></keygen>
<input type="submit">
</form>
效果圖如下
點擊第一項并提交后，地址欄的數(shù)據(jù)為
file:///C:/Users/wxf/Desktop/imooc/home/test4.html?security=MIICQDCCASgwggEiMA0GCSqGSIb3DQEBAQUAA4IBDwAwggEKAoIBAQCiOHLvFmlmZKNDwqFZ8ie7mSP%2FmRRVSxhgtvH3ORHEoAl63sO9mZWVEPs8ZrcgCLW5z1TFGs9hadvhL%2BafxUs%2FN6lXYWDpoM7juZLuRDbK%2BdF4WAMWDbgX3NzK5fj2t2J5oMiLaBh8slUUByCAENCktHXeEBCs%2BuaFqxZN%2B458BBTz%2Fg%2BYoQ5AUj3jv0lzfwUZ46xxd2yUyUVYpnYy8PMUQMwV4vZ2hNQEzM%2BW7HKHkBDTD8OQFDwmSuizLq5DO34x%2BInnvS9lpiJOkUHCUdciYITtLS2lw45JZnjkuJdeWGSwXmBdboBix99u6jZ6NGEtTQ2Pb%2BqNQFeutzLzrEEpAgMBAAEWADANBgkqhkiG9w0BAQQFAAOCAQEAHe4OWmRmaxhQxUPQnwY9W8kWwMMtEKZJ%2B28qVmZILOiBUJWYDiEXo2VJy9fUUuOL7gdrlc1exPNRMOIQSK2n221foHJ%2BKWmecnZ9jVwWr46eHASrrRKUHDANePwDxrUQ0bxr26vdcpGPZBFlvqf5RehkATlrYtt3Aij9txjzE%2FNss4d%2BL%2BtAOyY4KdgHRTjmn8HdA9%2BDgflroHyQ8frO3jvprojyDX3Jhko5o6XxScXJDKX3QO51PLOPcVsJLBElU8QPKZybO9GpCuj36TvX74CxP22wtsGkuRAGeqOyjjyyGBmKio83b1HudL6KEh31T2xyntk6STyqO%2FlxEdIRpQ%3D%3D
8. <output>元素
用于不同類型的輸出，如計算或腳本輸出。
<form action="action_page.php" method="get" oninput="resCalc()">
<input type="Number" id="num_a" value="3"> +1
<input type="range" id="num_b" value="4" min="1" max="10">10 =
<output id="result" ></output>
</form>
<script type="text/javascript">
function resCalc(){
numA=document.getElementById("num_a").value;
numB=document.getElementById("num_b").value;
document.getElementById("result").value=Number(numA)+Number(numB);
}
</script>
效果如下圖
通過總結(jié)對這些元素的認識更加深刻了，所以要經(jīng)常整理！
