一、表單的作用
表單的作用是搜集用戶的輸入，用戶提交表單時向服務(wù)器傳輸數(shù)據(jù)，從而實現(xiàn)用戶與web服務(wù)器的交互。
二、表單屬性
這個表單展示了form表單常用的屬性
| 屬性名 | 屬性值 | 描述 |
|---|---|---|
| action | 一個url地址 | 指定表單提交到的地址 |
| method | GET , POST | 表單將以此種方法提交到服務(wù)器 |
| target | * _self 當(dāng)前頁面 * _blank 每次在新窗口打開 * blank 每次在同一個新窗口打開 * _parent 父級frame * _top 頂級frame * iframename 指定的iframe | 表單提交后，收到回復(fù)的頁面 |
| name | - | 一個html文檔中，每個form的name應(yīng)該是唯一的 |
| enctype | * application/x-www-form-urlencoded 默認(rèn)值 * multipart/form-data 上傳file用 * text/plain html5默認(rèn) | 以 POST 方式提交form時的MIME類型。文件上傳必須使用 multipart/form-data |
| autocomplete | on , off | 是否自動完成表單字段 |
| autocapitalize | * none 完全禁用自動首字母大寫 * sentences 自動對每句話首字母大寫 * words 自動對每個單詞首字母大寫 * characters 自動大寫所有的字母 | iOS 專用屬性，表單中文本域英文大小寫 |
| accept-charset | 字符編碼格式( utf-8 , gb-2312 等) | 將會以此種編碼格式提交表單到服務(wù)器，默認(rèn)值是UNKONWN，即html文檔所采用的編碼格式。 |
| novalidate | true , false | 是否啟用表單校驗 |
下面舉例的表單將會以 post 方式將input的值以 utf-8 編碼格式提交到 /login 接口，并會打開一個新頁面顯示返回結(jié)果，由于 target="blank" ，所以就算提交多次該表單，都只會繼續(xù)刷新之前打開的窗口。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<form action="/login" method="post" target="blank" >
<input type="text" name='username'>
<button>提交</button>
</form>
</body>
</html>
三、表單元素
1. 常見表單元素
常見的表單元素包括 input , select , textarea , button , progress 等，這些元素都有一些自己的屬性
2. 表單元素的屬性
| 屬性 | 屬性值 | 描述 |
|---|---|---|
| type（必須） | * text 單行文本框 * raido 單選框 * checkbox 多選框 * tel 電話號碼輸入框 * range 滑塊取值框 ... ... 更多 | 指定input標(biāo)簽展示的樣式，忽略type屬性將默認(rèn)使用 text |
| name（必須） | 字符串 | form提交時，該字段的key，忽略value屬性的元素將不會被提交 |
| checked（狀態(tài)） | 任意值 或 忽略該屬性 | 有此屬性的radio和checkbox元素將被選中，同一name多個元素具有此屬性的，提交時取最后一個值 |
| selected（狀態(tài)） | 任意值 或 忽略該屬性 | 有此屬性的option元素將被選中，同一name多個元素具有此屬性的，提交時取最后一 |
| readonly（狀態(tài)） | 任意值 或 忽略該屬性 | 具有該屬性的表單元素將不可輸入或改變狀態(tài)，除非用JavaScript操作 |
| disabled（狀態(tài)） | 任意值 或 忽略該屬性 | 除擁有readonly的特征外，表單提交時，將忽略此字段 |
| form（限制） | 表單id | 該元素將作為指定id表單字段被提交。用于 button 或 input type='submit' 元素時，將提交指定id的表單 |
| accept（限制） | * image/* 只能上傳圖片 * video/* 只能上傳視頻 | input type='file' 使用的屬性，是一個MIME類型的值，或文件后綴名 |
| multiple（限制） | 任意值 或 忽略該屬性 | input type='file' 或 select 或 應(yīng)用了 datalist 的表單元素才能應(yīng)用該屬性 |
| maxlength（限制） | 正整數(shù)或0 | 文本域可輸入字符的長度，浮點數(shù)將會向下取整，負(fù)數(shù)將被忽略，JavaScript可以繞過這一限制 |
| required（限制） | 任意值 或 忽略該屬性 | 該表單字段是否需要被驗證 |
| pattern | 一個正則表達(dá)式 | \d{4,6} 形式的正則表達(dá)式，作為required校驗規(guī)則 |
| autocomplete（限制） | on , off | 同form的autocomplete屬性，在表單元素上應(yīng)用，優(yōu)先級將高于form上指定的 |
| autofocus（限制） | 任意值 或 忽略該屬性 | 頁面加載時，該元素自動聚焦，應(yīng)用于多個表單元素時，聚焦到第一個 |
| placeholder（展示） | 字符串 | 在元素沒有value時，用于占位顯示 |
| value（展示） | 字符串 或 數(shù)值 | input 或 progress 展示的值,其中： * checkbox和radio的默認(rèn)值是 'on' * range和progress的默認(rèn)值是 0 * progress的是0的時候會播放循環(huán)動畫 |
3.表單元素用法
- form示例
點擊預(yù)覽按鈕，將會把 username1 的值提交到 /preview，
點擊發(fā)布按鈕，將會把 username 的值提交給 /publish
<form action="/preview" name='preview' id='preview'></form>
<form action="/publish" name='publish' id='publish'>
<input type="text" name='username' value='1'>
<input type="text" form='preview' name='username1' value='2'>
<button form='preview'>預(yù)覽</button>
<button>發(fā)布</button>
</form>
- accept示例
<input type="file" accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document">
- multiple示例
datalist 需要鍵入 ',' 方可多選(需瀏覽器支持)
<label>Cc: <input type=email multiple name=cc list=contacts></label>
<datalist id="contacts">
<option value="hedral@damowmow.com">
<option value="pillar@example.com">
<option value="astrophy@cute.example">
<option value="astronomy@science.example.org">
</datalist>
select 需要一直按下ctrl鍵才可多選
<select name='number' multiple>
<option value="CN">中國</option>
<option value="US">美國</option>
<option value="UK">英國</option>
</select>
input 直接框選多文件即可
<input type="file" multiple>
- value示例
<progress value='70' max='100'></progress>
<input type="range" value='40' max='100'>
<input type="text" value='hello world'>
- type示例
文本框
<input type = “text” name=“名稱”/>//單行文本
<textarea cols="30" rows="10"></textarea>//多行文本
密碼框
<input type=“password” name=“名稱”/>
單選框
<input type=“radio” name=“gender” value=“male”/>
<input type=“radio” name=“gender” value=“female”/>
復(fù)選框
<input type =“checkbox” name=“l(fā)anguage” value=“Java”/>
<input type =“checkbox” name=“l(fā)anguage” value=“C”/>
<input type =“checkbox” name=“l(fā)anguage” value=“C#”/>
隱藏域
隱藏域通常用于向服務(wù)器提交不需要顯示給用戶的信息
<input type=“hidden” name=“隱藏域”/>
文件上傳
使用file，則form的enctype必須設(shè)置為multipart/form-data，method屬性為POST。
<input name="uploadedFile" id="uploadedFile" type="file" size="60" accept="text/*"/>
下拉列表
selected默認(rèn)為選擇項
<select name="country" size="10">
<option value="gam">Gambia</option>
<option value="mad" selected>Madagascar</option>
<option value="nam">Namibia</option>
</select>
<label></label>標(biāo)簽
在<input type=“text”>前可以寫普通的文本來修飾，但是單擊修飾文本的時候input并不會得到焦點，而用label則可以，for屬性指定要修飾的控件的id，<label for=“txt1” >內(nèi)容</label>；
提交按鈕
<input type="submit" value="提交"/>
重置按鈕
<input type=“reset” value=“重置按鈕"/>
普通按鈕
<input type="button" value="普通按鈕"/>
圖像按鈕
圖像按鈕的src屬性指定圖像源文件，它沒有value屬性。圖像按鈕可代替<input type="submit"/>，而現(xiàn)在也可以通過css直接將<input type="submit"/>按鈕的外觀設(shè)置為一幅圖片。
<input type="image" src="bg.jpg" />
- 常識
沒有 name 和有 disable 的字段不會被提交
同一個表單中，相同name的字段值會發(fā)生覆蓋，radio 和 checkbox 除外
在低版本瀏覽器中，name可以作為id使用
忽略或使用瀏覽器不支持的 type 會轉(zhuǎn)為 type=text
低版本瀏覽器不支持動態(tài)改變 type
點擊 button 會默認(rèn)提交表單
低版本瀏覽器需要指定 button 的 type=submit 才會提交表單
文本域的光標(biāo)顏色由字體顏色決定
form表單不能互相嵌套
表單元素可以不在表單的html結(jié)構(gòu)內(nèi)
