form表單的作用：

網(wǎng)站怎樣與用戶(hù)進(jìn)行交互？答案是使用HTML表單(form)。表單是可以把瀏覽者輸入的數(shù)據(jù)傳送到服務(wù)器端，這樣服務(wù)器端程序就可以處理表單傳過(guò)來(lái)的數(shù)據(jù)。
語(yǔ)法：<form method="傳送方式" action="服務(wù)器文件">
注意事項(xiàng)：

1. <form> ：<form>標(biāo)簽是成對(duì)出現(xiàn)的，以<form>開(kāi)始，以</form>結(jié)束。
2. action ：瀏覽者輸入的數(shù)據(jù)被傳送到的地方,比如一個(gè)PHP頁(yè)面(save.php)。
3. method ： 數(shù)據(jù)傳送的方式（get/post）。

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

• submit 用于數(shù)據(jù)提交
• text 可輸入文本
• password 用于輸入密碼，輸入內(nèi)容會(huì)呈現(xiàn)為小圓點(diǎn)，進(jìn)行隱藏
• checkbox 多選框
• radio 多選框
• select 下拉選擇 并和 option標(biāo)簽一起使用
• file 上傳文件
• hidden 隱藏組件
• bottom 按鈕
• reset 重置表單

get與post的差別：

本質(zhì)上的區(qū)別是語(yǔ)義的區(qū)別，根據(jù)HTTP規(guī)范，GET的語(yǔ)義是請(qǐng)求獲取指定的資源。GET方法是安全、冪等、可緩存的。POST的語(yǔ)義是根據(jù)請(qǐng)求負(fù)荷（報(bào)文主體）對(duì)指定的資源做出處理，具體的處理方式視資源類(lèi)型而不同。POST不安全，不冪等，（大部分實(shí)現(xiàn)）不可緩存。具體差別如下：

• get在后退刷新時(shí)是無(wú)害的，post會(huì)重新提交請(qǐng)求；
• get參數(shù)通過(guò)URL傳遞，post放在Request body中；
• get請(qǐng)求參數(shù)保留在瀏覽器歷史記錄中，post參數(shù)不會(huì)保留；
• get產(chǎn)生的URL地址可以被存為書(shū)簽，而post不可以；
• 對(duì)參數(shù)的數(shù)據(jù)類(lèi)型，get只接受ASCII字符，而post沒(méi)有限制；
• get比post更不安全，因?yàn)榘l(fā)送的數(shù)據(jù)顯示在URL上，在發(fā)送密碼或其他敏感信息時(shí)絕不要使用get;
• get請(qǐng)求只能進(jìn)行url編碼，而post支持多種編碼方式。

input中name的作用：

• 將name屬性相同的分為一組，對(duì)提交的表單數(shù)據(jù)進(jìn)行標(biāo)識(shí)。通過(guò)不同的name區(qū)別提交的value值是什么
• 在單選按鈕中，name值相同的單選按鈕被歸為一組，在該組中只有一個(gè)按鈕的checked屬性為true。
• 總的來(lái)說(shuō)，input的name屬性用于提交一個(gè)form表單數(shù)據(jù)時(shí)，對(duì)數(shù)據(jù)的引用：
  如<input type="text" name="text"/>用GET方式發(fā)送數(shù)據(jù)時(shí)，你能在URL地址中看到xxx.html?text=123
• 可以用于CSS中設(shè)置該類(lèi)name值的元素的樣式。
• 通過(guò)js的document.getElementsByTagName("atext")和jQ的$(".atext")等可以獲取name屬性值為atext的元素對(duì)象。

radio 如何分組?

通過(guò)name屬性來(lái)分組，name值相同的單選按鈕被歸為一組。例如：

            <input type="radio" name="sex" >男
            <input type="radio" name="sex" >女
            <input type="radio" name="sex1" >男
            <input type="radio" name="sex1" >女

前兩個(gè)為一組，name為sex；后兩個(gè)為一組，name為sex1。

placeholder 屬性的作用：

placeholder 屬性提供可描述輸入字段預(yù)期值的提示信息（hint），設(shè)置之后在輸入框顯示灰色提示文字。該提示會(huì)在輸入字段為空時(shí)顯示，并會(huì)在字段獲得焦點(diǎn)時(shí)消失。

type=hidden隱藏域的作用：

表單隱藏域在頁(yè)面上對(duì)于用戶(hù)是不可見(jiàn)的，在表單中插入隱藏域的目的在于收集或發(fā)送信息，以利于被處理表單的程序所使用。通過(guò)隱藏域設(shè)置驗(yàn)證信息，用戶(hù)提交信息后，隱藏域的數(shù)據(jù)也被提交到后臺(tái)，后臺(tái)進(jìn)行校驗(yàn)，提高安全性。

例如可以用來(lái)防止CSRF攻擊。如果是非法用戶(hù)惡意提交表單的話(huà)，value里的值對(duì)不上，服務(wù)器會(huì)拒絕該請(qǐng)求。

用法實(shí)例：

文本輸入框、密碼輸入框

<form  method="post" action="save.php">
    賬戶(hù): 
    <input type="text" name="myName" />
    <br>
    密碼: 
    <input type="password" name="pass" />
</form> 

文本域，支持多行文本輸入

<form  method="post" action="save.php">
        <label>聯(lián)系我們</label>
        <textarea cols="50" rows="10" >在這里輸入內(nèi)容...</textarea>
</form>

使用單選框、復(fù)選框，讓用戶(hù)選擇

<form action="save.php" method="post" >
    <label>性別:</label>
    <label>男</label>
    <input type="radio" value="1"  name="gender" checked"/>
    <label>女</label>
    <input type="radio" value="2"  name="gender" />
</form>

使用下拉列表框，節(jié)省空間

<form action="save.php" method="post" >
    <label>愛(ài)好:</label>
    <select>
      <option value="看書(shū)">看書(shū)</option>
      <option value="旅游">旅游</option>
      <option value="運(yùn)動(dòng)">運(yùn)動(dòng)</option>
      <option value="購(gòu)物" selected="selected">購(gòu)物</option>
    </select>
</form>

<form action="save.php" method="post" >
    <label>愛(ài)好:</label>
    <select multiple="multiple">
      <option value="看書(shū)">看書(shū)</option>
      <option value="旅游">旅游</option>
      <option value="運(yùn)動(dòng)">運(yùn)動(dòng)</option>
      <option value="購(gòu)物" selected="selected">購(gòu)物</option>
    </select>
</form>

使用提交按鈕，提交數(shù)據(jù)

<form  method="post" action="save.php">
    <label for="myName">姓名：</label>
    <input type="text" value=" " name="myName " />
    <input type="submit" value="提交" />
</form>

使用重置按鈕，重置表單信息

<form action="save.php" method="post" >
    <label>愛(ài)好:</label>
    <select>
      <option value="看書(shū)">看書(shū)</option>
      <option value="旅游" selected="selected">旅游</option>
      <option value="運(yùn)動(dòng)">運(yùn)動(dòng)</option>
      <option value="購(gòu)物">購(gòu)物</option>
    </select>
    <input type="submit" value="確定"  />
    <input type="reset" value="重置"  />
</form>

form表單中的label標(biāo)簽

label標(biāo)簽不會(huì)向用戶(hù)呈現(xiàn)任何特殊效果，它的作用是為鼠標(biāo)用戶(hù)改進(jìn)了可用性。如果你在 label 標(biāo)簽內(nèi)點(diǎn)擊文本，就會(huì)觸發(fā)此控件。就是說(shuō)，當(dāng)用戶(hù)單擊選中該label標(biāo)簽時(shí)，瀏覽器就會(huì)自動(dòng)將焦點(diǎn)轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上（就自動(dòng)選中和該label標(biāo)簽相關(guān)連的表單控件上）。

語(yǔ)法：
<label for="控件id名稱(chēng)">
注意：標(biāo)簽的 for 屬性中的值應(yīng)當(dāng)與相關(guān)控件的 id 屬性值一定要相同。

<form>
   <label for="male">男</label>
  <input type="radio" name="gender" id="male" />
  <br />
  <label for="female">女</label>
  <input type="radio" name="gender" id="female" />
  <br />
  <label for="email">輸入你的郵箱地址</label>
  <input type="email" id="email" placeholder="Enter email">
</form>