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