主要內(nèi)容： form表單的作用及常用的input 標(biāo)簽介紹，GET和 POST的區(qū)別欢际。

form表單的作用及常用的input 標(biāo)簽

form表單的作用

HTML <form> 元素 表示了文檔中的一個(gè)區(qū)域良拼，這個(gè)區(qū)域包含有交互控制元件筹淫，用來(lái)向web服務(wù)器提交信息想际，擁有以下屬性：

• action 一個(gè)處理這個(gè)form信息的程序所在的URL皱炉。

• autocomplete 用于指示 input 元素是否能夠擁有一個(gè)默認(rèn)值怀估，這個(gè)默認(rèn)值是由瀏覽器自動(dòng)補(bǔ)全的。

• enctype 當(dāng) method 屬性值為 post 時(shí), enctype 是提交form給服務(wù)器的內(nèi)容的 MIME 類型合搅，可能的取值有三個(gè)多搀，application/x-www-form-urlencoded: 如果屬性未指定時(shí)的默認(rèn)值。multipart/form-data: 這個(gè)值用于一個(gè) type 屬性設(shè)置為 "file" 的 <input> 元素灾部。text/plain (HTML5)酗昼。

• method 瀏覽器使用這種 HTTP 方式來(lái)提交 form。 可能的值有g(shù)et和post梳猪。

• target 一個(gè)名字或者說(shuō)關(guān)鍵字麻削，用來(lái)指示在提交表單之后蒸痹，在哪里顯示收到的回復(fù)

常見(jiàn)的Input標(biāo)簽

<input> 元素是最重要的表單元素 ,<input> 標(biāo)簽用于搜集用戶信息。
常見(jiàn)的Input標(biāo)簽主要由type屬性控制呛哟。如果這個(gè)屬性沒(méi)有指定叠荠，默認(rèn)的類型是 text。
根據(jù)不同的 type 屬性值扫责，輸入字段擁有很多種形式榛鼎。輸入字段可以是文本字段、復(fù)選框鳖孤、掩碼后的文本控件者娱、單選按鈕、按鈕等等苏揣。常見(jiàn)的 input 標(biāo)簽如下 ：

關(guān)于input的幾個(gè)重要補(bǔ)充

1. 在input里，name 的作用

由于表單提交的數(shù)據(jù)一般都是以key:value的方式提交肥印，所以input中的name屬性主要用來(lái)標(biāo)識(shí)提交的數(shù)據(jù)的key值识椰，好讓服務(wù)器處理程序分辨。

例如：

<input name=name value=Adam>
<input name=age value=18>

則服務(wù)器在后臺(tái)收到的數(shù)據(jù)格式可能是這樣的：

{
name:adam,
age:18
}

2. 分組

• 單選分組
  radio 對(duì)象代表 HTML 表單中的單選按鈕深碱。在 HTML 表單中 <input type="radio"> 每出現(xiàn)一次腹鹉，一個(gè) radio 對(duì)象就會(huì)被創(chuàng)建。
  使用radio的時(shí)候敷硅，可以用name 屬性來(lái)進(jìn)行分組功咒， "name" 相同的為一組愉阎。比如下面這個(gè)， 其中男女為一組航瞭， 看書(shū)和羽毛球一組：

<input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女">女
<input type="radio" name="hobby" value="看書(shū)">看書(shū)
<input type="radio" name="hobby" value="打羽毛球">打羽毛球
在網(wǎng)頁(yè)上效果是這樣的诫硕，

image.png

• 多選分組
  checkbox 對(duì)象代表一個(gè) HTML 表單中的 一個(gè)選擇框，同樣是用name屬性進(jìn)行分組刊侯。

3. placeholder 屬性

placeholder為HTML5的新屬性章办。
placeholder 屬性提供可描述輸入字段預(yù)期值的提示信息（hint）；該提示會(huì)在輸入字段為空時(shí)顯示滨彻，并會(huì)在字段獲得焦點(diǎn)時(shí)消失（placeholder 屬性適用于以下的 <input> 類型：text, search, url, telephone, email 以及 password）
示例 ：
<input id="password" type ="password" name="password" placeholder="請(qǐng)輸入密碼">
效果如下：

image.png

PS：當(dāng)兩個(gè)標(biāo)簽之間有空格時(shí)藕届， placeholder的內(nèi)容將不能被正確的顯示（通常刪一行才可以看到）。所以當(dāng)你設(shè)置了placeholder屬性亭饵， 而沒(méi)有任何變化時(shí)休偶， 不妨檢查一下空格哦 !

4. type=hidden隱藏域

隱藏域是用來(lái)收集或發(fā)送信息的不可見(jiàn)元素，對(duì)于網(wǎng)頁(yè)的訪問(wèn)者來(lái)說(shuō)辜羊，隱藏域是看不見(jiàn)的踏兜。當(dāng)表單被提交時(shí)，隱藏域就會(huì)將信息用你設(shè)置時(shí)定義的名稱和值發(fā)送到服務(wù)器上八秃。

• 暫存信息
  隱藏域的最常見(jiàn)用途之一是跟蹤當(dāng)提交編輯表單時(shí)需要更新哪些數(shù)據(jù)庫(kù)記錄碱妆。 典型的工作流程如下所示：
  ① 用戶決定編輯他們可以控制的某些內(nèi)容，例如博客文章或產(chǎn)品條目昔驱。 他們通過(guò)按編輯按鈕開(kāi)始疹尾。
  ② 要編輯的內(nèi)容取自數(shù)據(jù)庫(kù)并加載到HTML表單中，以允許用戶進(jìn)行更改骤肛。
  ③ 編輯后纳本，用戶提交表單，更新的數(shù)據(jù)將發(fā)送回服務(wù)器腋颠，以便在數(shù)據(jù)庫(kù)中進(jìn)行更新繁成。

在步驟 ② 中，正在更新的記錄的ID被保存在隱藏域中淑玫。 當(dāng)表單在步驟 ③ 中提交時(shí)巾腕，ID將自動(dòng)發(fā)送回具有記錄內(nèi)容的服務(wù)器。 ID允許站點(diǎn)的服務(wù)器端組件確切地知道需要使用提交的數(shù)據(jù)更新哪些記錄混移。

• 提高網(wǎng)站安全性
  隱藏域也用于存儲(chǔ)和提交安全令牌, 以提高網(wǎng)站安全性祠墅。 基本思想是form表單被提交時(shí)侮穿，服務(wù)器會(huì)收到驗(yàn)證信息歌径，并通過(guò)一定的算法校驗(yàn)該驗(yàn)證信息，可以有效防止非法請(qǐng)求對(duì)數(shù)據(jù)庫(kù)的增刪改查亲茅。
  這將阻止惡意用戶創(chuàng)建假冒險(xiǎn)的表單回铛，并將表單通過(guò)電子郵件發(fā)送給不知情的用戶狗准，以欺騙他們轉(zhuǎn)移到錯(cuò)誤的地方。 這種攻擊稱為跨站請(qǐng)求偽造（CSRF） ; 任何信譽(yù)良好的服務(wù)器端框架都使用隱藏的秘密來(lái)防止這種攻擊茵肃。

舉例：

1. 有些時(shí)候我們要給用戶一信息腔长，讓他在提交表單時(shí)提交上來(lái)以確定用戶身份，如sessionkey等验残。當(dāng)然這些東西也能用cookie實(shí)現(xiàn)捞附，但使用隱藏域就簡(jiǎn)單的多了．而且不會(huì)有瀏覽器不支持，用戶禁用cookie的煩惱您没。

2. 有些時(shí)候一個(gè)form里有多個(gè)提交按鈕鸟召，怎樣使程序能夠分清楚到底用戶是按那一個(gè)按鈕提交上來(lái)的呢？我們就可以寫(xiě)一個(gè)隱藏域氨鹏，然后在每一個(gè)按鈕處加上onclick=”document.form.command.value=”xx””然后我們接到數(shù)據(jù)后先檢查command的值就會(huì)知道用戶是按的那個(gè)按鈕提交上來(lái)的欧募。

3. 有時(shí)候一個(gè)網(wǎng)頁(yè)中有多個(gè)form，我們知道多個(gè)form是不能同時(shí)提交的仆抵，但有時(shí)這些form確實(shí)相互作用跟继，我們就可以在form中添加隱藏域來(lái)使它們聯(lián)系起來(lái)。

4. JavaScript不支持全局變量镣丑，但有時(shí)我們必須用全局變量舔糖，我們就可以把值先存在隱藏域里，它的值就不會(huì)丟失了传轰。

5. 還有個(gè)例子剩盒，比如按一個(gè)按鈕彈出四個(gè)小窗口，當(dāng)點(diǎn)擊其中的一個(gè)小窗口時(shí)其他三個(gè)自動(dòng)關(guān)閉．可是IE不支持小窗口相互調(diào)用慨蛙，所以只有在父窗口寫(xiě)個(gè)隱藏域辽聊，當(dāng)小窗口看到那個(gè)隱藏域的值是close時(shí)就自己關(guān)掉。

form 表單使用

<button>提交</button>期贫、<a class="btn" href="#">提交</a>跟匆、<input type="submit" value="提交">三者有什么區(qū)別？

• <button>提交</button>定義一個(gè)按鈕通砍，玛臂。<button> 與 </button> 標(biāo)簽之間的所有內(nèi)容都是按鈕的內(nèi)容，其中包括任何可接受的正文內(nèi)容封孙，比如文本或多媒體內(nèi)容迹冤。
• <a class="btn" href="#">提交</a>是一個(gè)a標(biāo)簽定義的超鏈接，而其樣式用class="btn"標(biāo)記虎忌。
• <input type="submit" value="提交">定義了提交按鈕泡徙，點(diǎn)擊并向服務(wù)器發(fā)送表單數(shù)據(jù)。數(shù)據(jù)會(huì)發(fā)送到表單的 action 屬性中指定的頁(yè)面膜蠢。

常見(jiàn)問(wèn)題

表單中readonly和disabled屬性的區(qū)別

• 設(shè)置了readonly的input[text]在提交表單的時(shí)候還是會(huì)提交input上聲明的數(shù)據(jù)堪藐。

• 設(shè)置了disabled的則不會(huì)提交input上聲明的數(shù)據(jù)莉兰。

表單提交文件的正確方式

• 添加input[type=file]的input標(biāo)簽

• 設(shè)置表單的method為post

• 設(shè)置表單的enctype為multipart/form-data

如何無(wú)刷新提交表單

• 在頁(yè)面設(shè)置一個(gè)iframe，設(shè)置好它的name屬性值礁竞，用css控制他是'消失'的糖荒。

• 設(shè)置form的target屬性為iframe的name屬性即可。

默認(rèn)情況下模捂，form中的button按鈕不聲明type屬性捶朵，則一律視為submit

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

在客戶機(jī)和服務(wù)器之間進(jìn)行請(qǐng)求-響應(yīng)時(shí)，兩種最常被用到的 HTTP方法 是 GET和 POST狂男。
在form表單中泉孩，可以通過(guò)設(shè)置Method指定提交方式為GET或者POST提交方式，默認(rèn)為GET提交方式并淋。

GET后退按鈕/刷新無(wú)害祭饭，POST數(shù)據(jù)會(huì)被重新提交（瀏覽器應(yīng)該告知用戶數(shù)據(jù)會(huì)被重新提交）

• GET編碼類型application/x-www-form-url，POST編碼類型application/x-www-form-urlencoded 或 multipart/form-data叙量。為二進(jìn)制數(shù)據(jù)使用多重編碼倡蝙。
• GET只允許 ASCII 字符。POST沒(méi)有限制绞佩。也允許二進(jìn)制數(shù)據(jù)寺鸥。

其他資料閱讀：

• CSRF 詳解與攻防實(shí)戰(zhàn)