1、關于form表單的基礎

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

1.1 form標簽語法

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

1.2 post和get兩種方式向服務器（后臺）提交數據

 - get方式是URL的一個拼接，信息組裝，URL變成“服務器地址?元素=元素輸入&元素=元素輸入。（K=value的形式）
 - post方式，URL沒發生變化，數據和參數發給服務器，URL無變化。

1、區別：（體現在方式、安全、數據量三個方面）
- 方式，點擊提交（發請求時），get將請求數據變成”k=value”的形式，然后組裝到URL上。post方式提交請求時，數據通過瀏覽器傳輸給后臺，但是URL沒發生變化。
- 安全，get將信息組裝到URL上，信息泄露，不安全；post方式的URL沒發生變化更加安全。
- 數據量，瀏覽器地址欄能存放的字符有限的（容量有限），get方式的URL過于冗長，當超出限制時，瀏覽器自動截斷URL，則傳給后臺的數據不完整，所以對數據大小有限制。而post方式的URL更干凈、輕便，能完整地將數據傳遞給后臺，無數據大小限制。

2、什么時候用get，什么時候用post（使用場景）
get：向后臺查詢東西，如查詢論文；即向后臺索要數據，用關鍵詞來獲取大量數據。安全性要求低，簡單。
post：向后臺傳數據，例論文查重（數據很大，提交給后臺）。安全性要求高。

2.2 label標簽和input標簽

(1) label標簽

- 表單元素(input標簽)的名稱
- 語法：<label for=”id”>名稱</label>  
- 其中for對應id的值，使點擊文字時，input選框也變為focus狀態(input選框被點擊時，變為focus狀態才能輸入)。

(2) input標簽

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

• type=”123...” : 表單元素的方式，即標簽（輸入）類型，
  常用有：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...” : 表單元素的控件名，用于對提交到服務器后的表單數據進行標識，只有設置了name屬性的表單元素才能在提交表單時傳遞數據。
  具體用途有：
  1、作為可與服務器交互數據的HTML元素的服務器端的標示。 2、對于標簽類型radio, checkbox的分組，是根據相同的name屬性來實現的。例如checkbox中，name需一致，則選項才為一類、一組。Radio中，name需一致。 3、其它用途有待學習。
• value=”123..” : value屬性規定輸入字段的初始值。value里的值是提交給后臺，只有將選項確定了value值后，后臺才可以看到提交的信息。
  注意：瀏覽器把數據傳遞給后端時，把數據組裝成k=value的形式；其中，name就是k，而value就是等號后的值，給后臺（服務器）識別，然后進行處理。因此所有的表單元素標簽里要有name, 而value屬性有兩種情況：1、當數據要選擇時，則必須有對應選擇項的value值，例如radio、checkbox；2、當數據要輸入時，則提交輸入的數據，如text、password。這里的數據可以輸入，也可以在input標簽中設置初始value值。值得注意的是在textarea閉合標簽中，初始value放在開后標簽和閉合標簽之間。
• placeholder屬性，用來描述輸入字段預期值的提示，不影響數據的value值。
• 其它屬性：readonly屬性（規定輸入字段為只讀），disabled屬性（規定輸入字段是禁用的）；size屬性（規定輸入字段的尺寸）；maxlength屬性（規定輸入字段允許的最大長度，以字符計）。
• HTML5新增屬性，以后補充。

2、常見表單元素標簽的用法

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>愛好：</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 >評論：</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規定了文件格式。
效果：

Paste_Image.png

2.8 type="hidden"

<input type=”hidden” name=”abc” value=”123”>
點擊提交時，hidden里隱藏的數據也提交給了后臺；abc=’123’
作用：（1）暫存信息，（用戶看不到），便于設計者隨時調用程序。
（2）用于安全性校驗，例如通過設置hidden隱藏域，服務器可以驗證用戶權限，避免偽造的假網站提交數據。

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="復位"/>
效果：

Paste_Image.png