1、關(guān)于form表單的基礎(chǔ)

• form表單：是一個(gè)包含表單元素的區(qū)域；作用，用于包裹表單元素。
• 表單元素：是允許用戶在表單中（比如：文本域、下拉列表、單選框、復(fù)選框等）輸入信息的元素。作用，搜集填寫的用戶信息，提交給后臺(tái)（服務(wù)器）。

1.1 form標(biāo)簽語(yǔ)法

form 將表單元素包裹起來(lái)，受form包裹的表單元素才會(huì)提交給服務(wù)器。
<form action=”地址” method=””>
表單元素
</form>
form標(biāo)簽是表單的外殼，主要有四個(gè)屬性：
action：表單提交的地址（后臺(tái)服務(wù)器地址）
method：提交表單的方法，兩種請(qǐng)求方式，post、get
target：在何處打開action
enctype：（編碼方式）
applocation/x-www-form-erlencoded 在發(fā)送前編碼所有字符（默認(rèn)）
text/plain：空格轉(zhuǎn)換為”+”號(hào)，但不對(duì)特殊字符編碼
multipart/form-data：使用包含文件上傳控件的表單時(shí)，必須使用該值。例如：上傳音頻、視頻。

1.2 post和get兩種方式向服務(wù)器（后臺(tái)）提交數(shù)據(jù)

 - get方式是URL的一個(gè)拼接，信息組裝，URL變成“服務(wù)器地址?元素=元素輸入&元素=元素輸入。（K=value的形式）
 - post方式，URL沒(méi)發(fā)生變化，數(shù)據(jù)和參數(shù)發(fā)給服務(wù)器，URL無(wú)變化。

1、區(qū)別：（體現(xiàn)在方式、安全、數(shù)據(jù)量三個(gè)方面）
- 方式，點(diǎn)擊提交（發(fā)請(qǐng)求時(shí)），get將請(qǐng)求數(shù)據(jù)變成”k=value”的形式，然后組裝到URL上。post方式提交請(qǐng)求時(shí)，數(shù)據(jù)通過(guò)瀏覽器傳輸給后臺(tái)，但是URL沒(méi)發(fā)生變化。
- 安全，get將信息組裝到URL上，信息泄露，不安全；post方式的URL沒(méi)發(fā)生變化更加安全。
- 數(shù)據(jù)量，瀏覽器地址欄能存放的字符有限的（容量有限），get方式的URL過(guò)于冗長(zhǎng)，當(dāng)超出限制時(shí)，瀏覽器自動(dòng)截?cái)郩RL，則傳給后臺(tái)的數(shù)據(jù)不完整，所以對(duì)數(shù)據(jù)大小有限制。而post方式的URL更干凈、輕便，能完整地將數(shù)據(jù)傳遞給后臺(tái)，無(wú)數(shù)據(jù)大小限制。

2、什么時(shí)候用get，什么時(shí)候用post（使用場(chǎng)景）
get：向后臺(tái)查詢東西，如查詢論文；即向后臺(tái)索要數(shù)據(jù)，用關(guān)鍵詞來(lái)獲取大量數(shù)據(jù)。安全性要求低，簡(jiǎn)單。
post：向后臺(tái)傳數(shù)據(jù)，例論文查重（數(shù)據(jù)很大，提交給后臺(tái)）。安全性要求高。

2.2 label標(biāo)簽和input標(biāo)簽

(1) label標(biāo)簽

- 表單元素(input標(biāo)簽)的名稱
- 語(yǔ)法：<label for=”id”>名稱</label>  
- 其中for對(duì)應(yīng)id的值，使點(diǎn)擊文字時(shí)，input選框也變?yōu)閒ocus狀態(tài)(input選框被點(diǎn)擊時(shí)，變?yōu)閒ocus狀態(tài)才能輸入)。

(2) input標(biāo)簽

是表單收集信息的元素，主要有以下屬性：

• type=”123...” : 表單元素的方式，即標(biāo)簽（輸入）類型，
  常用有：text, textarea, password, radio, checkbox, select, file, hidden, button, submit, resect, placeholder等。此外，HTML新增了輸入類型：color, date, datetime, datetime-local, email, month, number, range, search, tel, time, url, week。
• name=”123...” : 表單元素的控件名，用于對(duì)提交到服務(wù)器后的表單數(shù)據(jù)進(jìn)行標(biāo)識(shí)，只有設(shè)置了name屬性的表單元素才能在提交表單時(shí)傳遞數(shù)據(jù)。
  具體用途有：
  1、作為可與服務(wù)器交互數(shù)據(jù)的HTML元素的服務(wù)器端的標(biāo)示。 2、對(duì)于標(biāo)簽類型radio, checkbox的分組，是根據(jù)相同的name屬性來(lái)實(shí)現(xiàn)的。例如checkbox中，name需一致，則選項(xiàng)才為一類、一組。Radio中，name需一致。 3、其它用途有待學(xué)習(xí)。
• value=”123..” : value屬性規(guī)定輸入字段的初始值。value里的值是提交給后臺(tái)，只有將選項(xiàng)確定了value值后，后臺(tái)才可以看到提交的信息。
  注意：瀏覽器把數(shù)據(jù)傳遞給后端時(shí)，把數(shù)據(jù)組裝成k=value的形式；其中，name就是k，而value就是等號(hào)后的值，給后臺(tái)（服務(wù)器）識(shí)別，然后進(jìn)行處理。因此所有的表單元素標(biāo)簽里要有name, 而value屬性有兩種情況：1、當(dāng)數(shù)據(jù)要選擇時(shí)，則必須有對(duì)應(yīng)選擇項(xiàng)的value值，例如radio、checkbox；2、當(dāng)數(shù)據(jù)要輸入時(shí)，則提交輸入的數(shù)據(jù)，如text、password。這里的數(shù)據(jù)可以輸入，也可以在input標(biāo)簽中設(shè)置初始value值。值得注意的是在textarea閉合標(biāo)簽中，初始value放在開后標(biāo)簽和閉合標(biāo)簽之間。
• placeholder屬性，用來(lái)描述輸入字段預(yù)期值的提示，不影響數(shù)據(jù)的value值。
• 其它屬性：readonly屬性（規(guī)定輸入字段為只讀），disabled屬性（規(guī)定輸入字段是禁用的）；size屬性（規(guī)定輸入字段的尺寸）；maxlength屬性（規(guī)定輸入字段允許的最大長(zhǎng)度，以字符計(jì)）。
• HTML5新增屬性，以后補(bǔ)充。

2、常見(jiàn)表單元素標(biāo)簽的用法

2.1 type="text"

<label for="input_username">姓名：</label> <input type="text" name="username" id="input_username" placeholder="用戶名"/>
效果：

2.2 type="password"

<label for="input_password">密碼：</label> <input type="password" name="password" id="input_password" placeholder="密碼"/>
效果：

Paste_Image.png

2.3 type="radio"

      <label>性別：</label>
      <input type="radio" name="sex" value="famle"/>男
      <input type="radio" name="sex" value="male"/>女

效果：

Paste_Image.png

2.4 type="checkbox"

` <label>愛(ài)好：</label>
 <input type="checkbox" name="hobby" value="dota"/>dota
 <input type="checkbox" name="hobby" value="travel"/>旅游
 <input type="checkbox" name="hobby" value="pet"/>寵物 `

效果：

Paste_Image.png

2.5 select 下拉菜單

<label>我的car：</label> <select name="transportation"> <option value="bus">公交</option> <option value="subway" selected>地鐵</option> <option value="taxi">出租車</option> </select>
效果：

Paste_Image.png

2.6 type="textarea"

<label >評(píng)論：</label> <textarea name="recomment" placeholder="ddd" cols="60" rows="10"></textarea>
效果：

Paste_Image.png

2.7 type="file"

<label for="zjz">證件照：</label> <input type="file" name="photo" id="zjz" accept="image/jpg"/>
其中accept規(guī)定了文件格式。
效果：

Paste_Image.png

2.8 type="hidden"

<input type=”hidden” name=”abc” value=”123”>
點(diǎn)擊提交時(shí)，hidden里隱藏的數(shù)據(jù)也提交給了后臺(tái)；abc=’123’
作用：（1）暫存信息，（用戶看不到），便于設(shè)計(jì)者隨時(shí)調(diào)用程序。
（2）用于安全性校驗(yàn)，例如通過(guò)設(shè)置hidden隱藏域，服務(wù)器可以驗(yàn)證用戶權(quán)限，避免偽造的假網(wǎng)站提交數(shù)據(jù)。

2.9 type="button"

<input type="button" value="按鈕"/>
效果：

Paste_Image.png

2.10 type="submit"

<input type="submit" value="提交"/>
效果：

Paste_Image.png

2.11 type="reset"

<input type="reset" value="復(fù)位"/>
效果：

Paste_Image.png