1、form表單有什么用？有哪些常用的input標(biāo)簽，分別有什么作用？

表單是web頁(yè)面與服務(wù)器交互過(guò)程中最重要的信息來(lái)源，它會(huì)搜集用戶的輸入，并以提交的方式來(lái)傳輸?shù)椒?wù)器上進(jìn)行處理并可能返回反饋的一個(gè)媒介，從而來(lái)實(shí)現(xiàn)人機(jī)交互。
常見(jiàn)的input標(biāo)簽及作用有下面幾個(gè)

<input type="text">  單行文本輸入框
<input type="password">  密碼輸入框
<input type="checkbox">  復(fù)選框
<input type="radio">  單選框
<input type="file">  上傳按鈕
<input type="submit">  提交按鈕
<input type="button">  按鈕(也可以寫為<button>內(nèi)容</button>)
<input type="reset">  重置按鈕
<select>  下拉單選
  <option></option>
  <option></option>
</select>
<textarea></textarea> 多行文本輸入框
<input type="number">  數(shù)字輸入框
<input type="hidden"> 隱藏域

2、form的method屬性get和post的區(qū)別是什么？

1.get方法是將提交內(nèi)容拼成一個(gè)字符串進(jìn)行提交，提交的輸入項(xiàng)name和value值會(huì)暴露（但我們不能夠憑這一點(diǎn)就直接判定post方法比get方法安全），而且在內(nèi)容非常龐雜的時(shí)候，因?yàn)闉g覽器輸入域名的位置有字?jǐn)?shù)限制可能會(huì)截取一部分，不能完全提交，而post方法就沒(méi)有這一缺點(diǎn)
2.get請(qǐng)求的URL可以被瀏覽器緩存；post的請(qǐng)求不能夠被瀏覽器緩存：這涉及到一個(gè)使用場(chǎng)景的問(wèn)題，如果用戶的輸入不是非常重要機(jī)密的信息就比如性別年齡這一種，當(dāng)下次用戶還是使用同一瀏覽器進(jìn)行訪問(wèn)這個(gè)網(wǎng)站的時(shí)候，使用get方法可能會(huì)更合適一些。
3.get表達(dá)的是一種冪等的，只讀的，純粹的操作，即它除了返回結(jié)果不應(yīng)該會(huì)產(chǎn)生其它副作用（如寫數(shù)據(jù)庫(kù)），因此絕大部分get請(qǐng)求（通常超過(guò)90%）都直接被CDN緩存了，這能大大減少web服務(wù)器的負(fù)擔(dān)。而post所表達(dá)的語(yǔ)義是非冪等的，有副作用的操作，所以必須交由web服務(wù)器處理。（關(guān)于冪等的概念：Idempotent - 冪等 冪等的概念是指同一個(gè)請(qǐng)求方法執(zhí)行多次和僅執(zhí)行一次的效果完全相同。按照RFC規(guī)范，PUT，DELETE和安全方法都是冪等的。同樣，這也僅僅是規(guī)范，服務(wù)端實(shí)現(xiàn)是否冪等是無(wú)法確保的。）

3、在input中，name有什么作用？

name是作為inout的一個(gè)屬性存在的，在處理表單時(shí)，我們的關(guān)注點(diǎn)為用戶填寫的信息，此時(shí)，表單的每一項(xiàng)的name都作為我們提取到的信息的一個(gè)”標(biāo)簽“，可以理解為每個(gè)分類的一個(gè)標(biāo)簽名稱，每一個(gè)表單項(xiàng)都必須要有name值，否則這個(gè)表單無(wú)法進(jìn)行任何操作，相當(dāng)屬于一個(gè)廢的表單。有一個(gè)需要注意的點(diǎn)：在單選按鈕組中，我們的需求一般是多個(gè)中選擇一個(gè)合理的，那么這個(gè)時(shí)候這個(gè)單選按鈕組無(wú)論有幾個(gè)<input type="radio">它們的name都必須一致。而提交的內(nèi)容顯示形式為：name:value的形式。

4、radio如何分組？

這個(gè)問(wèn)題即為上個(gè)問(wèn)題末尾所說(shuō)的，一組單選按鈕需要選擇一個(gè)時(shí)，那么無(wú)論有幾個(gè)<input type="radio">它們的name都必須一致。以下是個(gè)示例：

<label>請(qǐng)選擇性別</label>
<input type="radio" value="男"  name="gender">男
<input type="radio" value="女"  name="gender">女

<label>請(qǐng)選擇晚飯吃什么</label>
<input type="radio" value="one"  name="dinner">火鍋
<input type="radio" value="two"  name="dinner">披薩
<input type="radio" value="three"  name="dinner">烤魚
<input type="radio" value="four"  name="dinner">沙拉

5、placeholder有什么作用？

我們經(jīng)常會(huì)遇到一些表單沒(méi)有l(wèi)abel提示項(xiàng)，這個(gè)時(shí)候，表單可以用placeholder來(lái)對(duì)用戶進(jìn)行提醒，這一個(gè)輸入框是需要輸入什么樣的內(nèi)容，如下圖紅框內(nèi)容：

demo.png

6、type=hidden隱藏域有什么作用?

根據(jù)我的個(gè)人少少的經(jīng)驗(yàn)所得，一般后端開(kāi)發(fā)會(huì)經(jīng)常使用這個(gè)表單項(xiàng)。隱藏域可以存數(shù)一些數(shù)據(jù),在頁(yè)面上是不做展示的,這個(gè)有一個(gè)比較好的作用是可以預(yù)防csrf攻擊，給這個(gè)隱藏域賦一個(gè)值，當(dāng)用戶點(diǎn)擊提交時(shí)后臺(tái)進(jìn)行驗(yàn)證隱藏域的內(nèi)容是否是我們定義的值，如果是，那么這個(gè)表單是正常的，如果沒(méi)有隱藏域或者隱藏域的位置不對(duì)，內(nèi)容不對(duì)，那么我們需要警惕是否被攻擊。

7、HTML表單的用法

當(dāng)頁(yè)面上有表單項(xiàng)的時(shí)候，能夠提交的前提是這一部分表單必須有<form></form>標(biāo)簽包裹，否則不能提交！??！原因是：表單提交需要有一個(gè)提交地址以及提交方式，也就是我們需要給form標(biāo)簽規(guī)定其method（提交方式）和action（提交地址）以便服務(wù)器能夠處理。內(nèi)容中的input中每一種表單項(xiàng)需要給每一個(gè)規(guī)定其value值（有一部分value初始值可有可無(wú)，比如說(shuō)<input type="text">；當(dāng)然<input type="password">是沒(méi)必要有初始值的也不建議有；select中的option每一個(gè)需要有一個(gè)value值以便進(jìn)行處理；<input type="radio">和<input type="checkbox">的value值是必須存在的）和name值（必需）。最后我們需要一個(gè)提交按鈕，一般是用<input type="submit">來(lái)進(jìn)行提交的。