瀏覽器可以通過 form 表單提交的方式向服務器發(fā)送數(shù)據(jù), 之前都沒有特別注意仔細了解下表單的相關屬性，表單控件相關特性，此文為參考別人博客的一個自我總結(jié)，供后續(xù)參考。
form表單常用屬性:
- action: url地址，服務器接受表單數(shù)據(jù)的地址；
- method: 提交到服務器的 http 方法，一般為 post 和 get；
- name: 最好保持 name 屬性唯一；
- enctype: 表單數(shù)據(jù)提交時使用的編碼類型，默認使用"application/x-www-form-urlencoded"，如果使用 post 方法，請求頭中 content-type指定值即為此屬性值。如果表單中有上傳文件的 input 控件，編碼類型需要使用"multipart/form-data", 才能完成傳遞文件數(shù)據(jù)。
表單提交規(guī)則:
- 具有disabled屬性的字段不會被提交
- 不具有name屬性的字段不會被提交
- 同名的name屬性會發(fā)生覆蓋，radio和checkbox除外
- form指向其他表單的字段，不會被本表單提交
| 表單元素 | type | 規(guī)則 |
|---|---|---|
| input | button | 永遠不提交 |
| input | checkbox | 只在勾選后提交 |
| input | file | 永遠提交，即使為空值 |
| input | hidden | 永遠提交，即使為空值 |
| input | image | 永遠提交，即使為空值 |
| input | radio | 只在勾選后提交，如果一組Radio沒有任何勾選，全部不提交。 |
| input | reset | 永遠不提交 |
| input | submit | 點擊哪個按鈕，則提交這個按鈕的值，其他的SUBMIT按鈕值都不提交。如果表單的提交行為是由JavaScript腳本觸發(fā)的，則不提交任何值。 |
| input | text | 永遠提交，即使為空值 |
| button | button | 永遠不提交 |
| button | reset | 永遠不提交 |
| button | submit | 點擊哪個按鈕提交表單，則提交這個按鈕的值。 |
| textarea | 永遠提交，即使為空值 | |
| select | 永遠提交，即使為空值 |
瀏覽器提交表單時，會執(zhí)行如下步驟：
- 識別出表單中表單元素的有效項（即根據(jù)上述表單提交規(guī)則來確定）作為提交項（successfull controls)
- 構建一個表單數(shù)據(jù)集(form data set)
- 根據(jù) form 表單中 enctype 屬性的值作為 content-type對數(shù)據(jù)集進行編碼
- 根據(jù) form 表單中的 action 屬性和 method 屬性向指定的地址發(fā)送數(shù)據(jù)
提交方法一般用"post" 或 "get"：
- get： 表單數(shù)據(jù)會被encodeURIComponent后以參數(shù)形式：name1=value1&name2=value2 附帶在 url？后面發(fā)送給服務器，并在url中顯示出來；
- post： content-type 默認"application/x-www-form-urlencoded" 對表單數(shù)據(jù)進行編碼，數(shù)據(jù)字段以鍵值對在 http請求體中發(fā)送給服務器；如果 enctype 屬性值為"multipart/form-data"，則以消息的形式發(fā)送給服務器。
enctype 指定的 content-type有：
- application/x-www-form-urlencoded: 默認加密方式，name value pair以name=value&name2=value2形式提交，其中的特殊字符被轉(zhuǎn)義，具體見https://www.w3.org/TR/html401/interact/forms.html#h-17.13.4;
- multipart/form-data: 一般用于提交文件，二進制數(shù)據(jù)。
表單序列化
通過JavaScript異步提交(ajax 提交)表單時，如果需要按照上面的規(guī)則去獲取表單數(shù)據(jù)，jquery提供了 <span style="background-color: #FFFF00">serialize()</span>
和<span style="background-color: #FFFF00"> serializeArray()</span>
兩個方法。使用該方法會取得和原生表單一致的提交字段。
代碼示例
<form action="/api/form/submit" method="post" name="myForm">
<input type="checkbox" name="checkbox" checked>
<input type="checkbox" name="checkbox" checked>
<select name="select">
<option>option1</option>
<option selected>option2</option>
<option>option3</option>
</select>
<input type="text" name="text">
<input type="radio" name="radio" checked>
<button type="submit">提交表單</button>
</form>
post 方法提交
get 方法提交
表單中有input type="file" 類型元素
<form action="/api/form/submit" method="get" name="myForm">
<input type="checkbox" name="checkbox" checked>
<input type="checkbox" name="checkbox" checked>
<select name="select">
<option>option1</option>
<option selected>option2</option>
<option>option3</option>
</select>
<input type="text" name="text">
<input type="file" name="file">
<input type="radio" name="radio" checked>
<button type="submit">提交表單</button>
</form>
has file
