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

1. 表單的作用是搜集用戶的輸入，用戶提交表單時(shí)向服務(wù)器傳輸數(shù)據(jù)，從而實(shí)現(xiàn)用戶與web服務(wù)器的交互。

<form name="myForm" action=""  method="get"> </form>

name：表單提交時(shí)的名稱
action：提交到的地址
method：提交方式，get和post（默認(rèn)是get）

2. input標(biāo)簽根據(jù)type屬性不同，分以下常用標(biāo)簽：

button——定義可點(diǎn)擊的按鈕
checkbox——定義復(fù)選框
radio——定義單選按鈕
text——定義單行輸入框，可在其中輸入文本
file——定義輸入字段和“瀏覽”按鈕，供文件上傳
hidden——定義隱藏的輸入字段
image——定義圖像形式的提交按鈕
password——定義密碼字段，該字段中的字符被掩碼
reset——定義重置按鈕，用于清除表單中的所有數(shù)據(jù)
submit——定義提交按鈕，把表單數(shù)據(jù)發(fā)給服務(wù)器

二、post 和 get 方式的區(qū)別？

1. 表象不同，get把提交的數(shù)據(jù)url可以看到，post看不到
2. 原理不同，get 是拼接 url， post 是放入http 請(qǐng)求體中
3. 提交數(shù)據(jù)量不同，get最多提交1k數(shù)據(jù)，瀏覽器的限制。post理論上無(wú)限制，受服務(wù)器限制
4. get提交的數(shù)據(jù)在瀏覽器歷史記錄中，安全性不好
5. 場(chǎng)景不同，get 重在 "要", post 重在"給"
6. 在搜索引擎中檢索信息時(shí)，應(yīng)使用get方法，而在注冊(cè)、登錄、提交用戶信息等場(chǎng)景中，應(yīng)使用post方法

三、在input里，name 有什么作用？

1. 規(guī)定input元素的名稱，用于對(duì)提交到服務(wù)器后的表單數(shù)據(jù)進(jìn)行標(biāo)識(shí)
2. 在客戶端提供給 JavaScript，使其可以引用表單數(shù)據(jù)
3. 用于單選／多選分組，相同name為一組

四、radio 如何 分組?

radio 使用name屬性來(lái)分組的，所有name屬性相同的radio 使用時(shí)其中只有一個(gè)會(huì)被選中。如：

<label>性別：</label>
<input type="radio" name="sex" value="man" checked>男
<input type="radio" name="sex" value="woman">女
<label>取向：</label>
<input type="radio" name="orientation" value="man">男
<input type="radio" name="orientation" value="woman" checked>女

五、placeholder 屬性有什么作用?

placeholder 屬性提供可描述輸入字段預(yù)期值的提示信息，該提示會(huì)在輸入字段為空時(shí)顯示，并會(huì)在字段獲得焦點(diǎn)時(shí)消失，且不會(huì)被提交

六、type=hidden隱藏域有什么作用? 舉例說(shuō)明

• 作用：對(duì)用戶不看見(jiàn)，但是可以提交，這個(gè)特點(diǎn)應(yīng)用很多
• 常見(jiàn)的防范CSRF：服務(wù)端防范的辦法為在用戶成功登錄過(guò)后向客戶端返回一個(gè)隨機(jī)的token，由客戶端放在表單的隱藏域中，在提交表單是一并提交到服務(wù)器，由服務(wù)器驗(yàn)證通過(guò)后在執(zhí)行相關(guān)的邏輯操作。

type=hidden應(yīng)用總結(jié)

1. 隱藏域在頁(yè)面中對(duì)于用戶是不可見(jiàn)的，在表單中插入隱藏域的目的在于收集或發(fā)送信息，以利于被處理表單的程序所使用。瀏覽者單擊發(fā)送按鈕發(fā)送表單的時(shí)候，隱藏域的信息也被一起發(fā)送到服務(wù)器。
2. 有些時(shí)候我們要給用戶一信息，讓他在提交表單時(shí)提交上來(lái)以確定用戶身份，如sessionkey，等等．當(dāng)然這些東西也能用cookie實(shí)現(xiàn)，但使用隱藏域就簡(jiǎn)單的多了．而且不會(huì)有瀏覽器不支持，用戶禁用cookie的煩惱。
3. 時(shí)候一個(gè)form里有多個(gè)提交按鈕，怎樣使程序能夠分清楚到底用戶是按那一個(gè)按鈕提交上來(lái)的呢？我們就可以寫一個(gè)隱藏域，然后在每一個(gè)按鈕處加上onclick="document.form.command.value="xx""然后我們接到數(shù)據(jù)后先檢查command的值就會(huì)知道用戶是按的那個(gè)按鈕提交上來(lái)的。
4. 有時(shí)候一個(gè)網(wǎng)頁(yè)中有多個(gè)form，我們知道多個(gè)form是不能同時(shí)提交的，但有時(shí)這些form確實(shí)相互作用，我們就可以在form中添加隱藏域來(lái)使它們聯(lián)系起來(lái)。
5. javascript不支持全局變量（我們常說(shuō)的全局變量其實(shí)是最外層作用域中的變量），但有時(shí)我們必須用全局變量，我們就可以把值先存在隱藏域里，它的值就不會(huì)丟失了。
6. 還有個(gè)例子，比如按一個(gè)按鈕彈出四個(gè)小窗口，當(dāng)點(diǎn)擊其中的一個(gè)小窗口時(shí)其他三個(gè)自動(dòng)關(guān)閉．可是IE不支持小窗口相互調(diào)用，所以只有在父窗口寫個(gè)隱藏域，當(dāng)小窗口看到那個(gè)隱藏域的值是close時(shí)就自己關(guān)掉。

七、 HTML 表單的用法

請(qǐng)參考HTML之Form表單應(yīng)用

八、實(shí)現(xiàn)如下表單,附上預(yù)覽地址。其中性別和取向是單選，愛(ài)好是多選

image.png