關(guān)于選題
其實在構(gòu)思這篇文章的時候，標(biāo)題一度想起名為：“如何正確的吃透Form表單”笤成。之所以不敢起上述的名字有一個非常重要的原因，就是表單所傳輸?shù)臄?shù)據(jù)一般都與后端數(shù)據(jù)庫息息相關(guān)，而自己對這方面基本一無所知狭归，所以不敢說自己能完全吃透。
1. form表單有什么作用文判？有哪些常用的input標(biāo)簽屬性过椎，分別有什么作用？
form表單的作用主要是用于向服務(wù)器傳輸數(shù)據(jù)戏仓。
<form action="xxx.php" method="post/get">
<input type="text" name="email" /> 定義單行的輸入字段疚宇，用戶可在其中輸入文本,默認(rèn)寬度為 20 個字符。
<input type="button" value="按鈕" /> 定義可點擊按鈕赏殃。
<input type="submit" value="提交" /> 定義提交按鈕敷待。提交按鈕會把表單數(shù)據(jù)發(fā)送到服務(wù)器。
<input type="reset" value="重置" /> 定義重置按鈕仁热。重置按鈕會清除表單中的所有數(shù)據(jù)榜揖。
<input type="radio" name="sex" value="male" /> 男 定義單選按鈕。單選按鈕允許用戶選取給定數(shù)目的選擇中的一個選項抗蠢。
<input type="radio" name="sex" value="female" /> 女
<input type="password" /> 定義密碼字段举哟。密碼字段中的字符會被掩碼（顯示為星號或原點）。
<input type="file" /> 用于文件上傳迅矛。
<input type="checkbox" name="sports" value="Running" /> 跑步 定義復(fù)選框妨猩。
<input type="checkbox" name="sports" value="Swimming" /> 游泳
</form>
2. post 和 get 方式的區(qū)別？
傳輸方式的不同
GET請求的數(shù)據(jù)會附在URL之后（就是把數(shù)據(jù)放置在HTTP協(xié)議頭中）秽褒，以?分割URL和傳輸數(shù)據(jù)壶硅，參數(shù)之間以&相連，如：login.action?name=hyddd&password=idontknow&verify=%E4%BD%A0%E5%A5%BD
POST把提交的數(shù)據(jù)則放置在是HTTP包的包體中震嫉。數(shù)據(jù)大小的限制不同
GET是通過URL提交數(shù)據(jù)森瘪，HTTP協(xié)議規(guī)范沒有對URL長度進(jìn)行限制，但是特定的瀏覽器及服務(wù)器對它有所限制票堵，IE對URL長度的限制是2083字節(jié)(2K+35)扼睬。對于其他瀏覽器，如Netscape悴势、FireFox等窗宇，理論上沒有長度限制，其限制取決于操作系統(tǒng)的支持特纤。
理論上講军俊，POST是沒有大小限制的，HTTP協(xié)議規(guī)范也沒有進(jìn)行大小限制捧存。安全性方面也有所差別
POST的安全性要比GET的安全性高粪躬。比如：通過GET提交數(shù)據(jù)担败，用戶名和密碼將明文出現(xiàn)在URL上，因為登錄頁面有可能被瀏覽器緩存镰官，其他人查看瀏覽器的歷史紀(jì)錄提前，那么別人就可以拿到你的賬號和密碼了，除此之外泳唠，使用GET提交數(shù)據(jù)還可能會造成Cross-site request forgery攻擊狈网。簡單總結(jié)一下
Get是向服務(wù)器發(fā)索取數(shù)據(jù)的一種請求，而Post是向服務(wù)器提交數(shù)據(jù)的一種請求笨腥，在FORM（表單）中拓哺，Method默認(rèn)為"GET"，實質(zhì)上脖母，GET和POST只是發(fā)送機(jī)制不同士鸥，并不是一個取一個發(fā)！
3. 在input里镶奉，name 有什么作用础淤？
在我們第一個舉例的常見標(biāo)簽中，我們可以看到在input的屬性中經(jīng)常會出現(xiàn)name和value這兩個屬性哨苛。這兩個屬性其實就是所謂的“鍵值對”鸽凶，name對應(yīng)鍵名，value對應(yīng)鍵值建峭。name 屬性用于對提交到服務(wù)器后的表單數(shù)據(jù)進(jìn)行標(biāo)識玻侥，或者在客戶端通過 JavaScript 引用表單數(shù)據(jù)。
直觀的感受看下面兩幅圖我想你就能明白了：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<form action="xxx.php" method="post">
<label for="user_name">姓名：</label><input id="user_name" type="text" placeholder="用戶名"><br>
<label for="user_password">密碼：</label><input id="user_password" type="password"><br>
<label>性別：</label>
<input type="radio" name="性別" value="男" checked="checked">男
<input type="radio" name="性別" value="女">女<br>
<label>取向：</label>
<input type="radio" name="取向" value="男">男
<input type="radio" name="取向" value="女" checked="checked">女<br>
<label>愛好：</label>
<input type="checkbox" name="hobby" value="dota">dota
<input type="checkbox" name="hobby" value="旅游">旅游
<input type="checkbox" name="hobby" value="寵物">寵物<br>
<label for="comment">評論：</label><textarea name="評論" id="comment" cols="30" rows="10" placeholder="ddd"></textarea><br>
<label>我的car：</label>
<select name="我的車">
<option value="寶馬320">寶馬320</option>
<option value="奔馳A45">奔馳A45</option>
<option value="奧迪RS6">奧迪RS6</option>
</select>
<input type="submit" value="提交" />
</form>
</body>
從上圖我們可以清晰的看到亿蒸，name的作用就是對提交到服務(wù)器后的表單數(shù)據(jù)進(jìn)行標(biāo)識凑兰。可以看到我在代碼中特地把愛好改成的英文hobby边锁，就是為了防止有些朋友被誤導(dǎo)姑食，認(rèn)為并不是name在起作用。
4. radio 如何分組?
還是沿用上面的例子茅坛，在性別的兩個單選框中音半，我都使用了input type="radio" name="性別"。
type="radio"是用來聲明這是個單選框贡蓖，而 name="性別" 則將選項男和女這兩個單選框進(jìn)行了關(guān)聯(lián)曹鸠，讓用戶只能在這兩個選項中進(jìn)行選擇。
5. placeholder 屬性有什么作用?
還拿上面的那個表單舉例斥铺，在姓名的那一欄后面的輸入框中彻桃，你可以看到一個默認(rèn)的“用戶名”這三個字，當(dāng)你在輸入框中輸入內(nèi)容的時候晾蜘，這幾個字就會消失邻眷，這就是用 placeholder 屬性來實現(xiàn)的眠屎。
6. type=hidden隱藏域有什么作用?
隱藏域在頁面中對于用戶是不可見的，在表單中插入隱藏域的目的在于收集或發(fā)送信息肆饶，以利于被處理表單的程序所使用组力。瀏覽者單擊發(fā)送按鈕發(fā)送表單的時候，隱藏域的信息也被一起發(fā)送到服務(wù)器抖拴。
有些時候我們要給用戶一信息，讓他在提交表單時提交上來以確定用戶身份腥椒，如sessionkey阿宅，等等．當(dāng)然這些東西也能用cookie實現(xiàn)，但使用隱藏域就簡單的多了．而且不會有瀏覽器不支持笼蛛，用戶禁用cookie的煩惱洒放。
有些時候一個form里有多個提交按鈕，怎樣使程序能夠分清楚到底用戶是按那一個按鈕提交上來的呢滨砍？我們就可以寫一個隱藏域往湿，然后在每一個按鈕處加上onclick="document.form.command.value="xx""然后我們接到數(shù)據(jù)后先檢查command的值就會知道用戶是按的那個按鈕提交上來的。
有時候一個網(wǎng)頁中有多個form惋戏，我們知道多個form是不能同時提交的领追，但有時這些form確實相互作用，我們就可以在form中添加隱藏域來使它們聯(lián)系起來响逢。
javascript不支持全局變量绒窑，但有時我們必須用全局變量，我們就可以把值先存在隱藏域里舔亭，它的值就不會丟失了些膨。
還有個例子，比如按一個按鈕彈出四個小窗口钦铺，當(dāng)點擊其中的一個小窗口時其他三個自動關(guān)閉．可是IE不支持小窗口相互調(diào)用订雾，所以只有在父窗口寫個隱藏域，當(dāng)小窗口看到那個隱藏域的值是close時就自己關(guān)掉矛洞。
