form表單那點事兒(上) 基礎篇
做為html中最為常見，應用最廣泛的標簽之一，form常伴隨前端左右。了解更深，用的更順。
目錄：
表單屬性
表單元素
常識
模擬外觀
表單屬性
這個表單展示了form表單常用的屬性
| 屬性名 | 屬性值 | 描述 |
|---|---|---|
| action | 一個url地址 | 指定表單提交到的地址 |
| method | `GET` , `POST` | 表單將以此種方法提交到服務器 |
| target | `_self` 當前頁面 `_blank` 每次在新窗口打開 `blank` 每次在同一個新窗口打開 `_parent` 父級frame `_top` 頂級frame iframename 指定的iframe |
表單提交后，收到回復的頁面 |
| name | - | 一個html文檔中，每個form的name應該是唯一的 |
| enctype | `application/x-www-form-urlencoded` 默認值 `multipart/form-data` 上傳file用 `text/plain` html5默認 |
以 `POST` 方式提交form時的MIME類型。文件上傳必須使用 `multipart/form-data` |
| autocomplete | `on` , `off` | 是否自動完成表單字段 |
| autocapitalize | `none` 完全禁用自動首字母大寫 `sentences` 自動對每句話首字母大寫 `words` 自動對每個單詞首字母大寫 `characters` 自動大寫所有的字母 |
iOS 專用屬性，表單中文本域英文大小寫 |
| accept-charset | 字符編碼格式( `utf-8` , `gb-2312` 等) | 將會以此種編碼格式提交表單到服務器，默認值是UNKONWN，即html文檔所采用的編碼格式。 |
| novalidate | `true` , `false` | 是否啟用表單校驗 |
下面舉例的表單將會以 post 方式將input的值以 utf-8 編碼格式提交到 /login 接口，並會打開一個新頁面顯示返回結果，由於 target="blank" ，所以就算提交多次該表單，都只會繼續刷新之前打開的窗口。
<!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>
表單元素
常見的表單元素包括 input , select , textarea , button , progress 等，這些元素都有一些自己的屬性
| 屬性名 | 屬性值 | 描述 |
|---|---|---|
| 必須 | ||
| type | `text` 單行文本框 `raido` 單選框 `checkbox` 多選框 `tel` 電話號碼輸入框 `range` 滑塊取值框 ... ... 更多 |
指定input標簽展示的樣式，忽略type屬性將默認使用 `text` |
| name | 字符串 | form提交時，該字段的key，忽略value屬性的元素將不會被提交 |
| 狀態 | ||
| checked | 任意值 或 忽略該屬性 | 有此屬性的radio和checkbox元素將被選中，同一name多個元素具有此屬性的，提交時取最后一個值 |
| selected | 任意值 或 忽略該屬性 | 有此屬性的option元素將被選中，同一name多個元素具有此屬性的，提交時取最后一個值 |
| readonly | 任意值 或 忽略該屬性 | 具有該屬性的表單元素將不可輸入或改變狀態，除非用JavaScript操作 |
| disabled | 任意值 或 忽略該屬性 | 除擁有readonly的特征外，表單提交時，將忽略此字段 |
| 限制 | ||
| form | 表單id | 該元素將作為指定id表單字段被提交。用於 `button` 或 `input type='submit'` 元素時，將提交指定id的表單 示例代碼 |
| accept | `image/*` 只能上傳圖片 `video/*` 只能上傳視頻 |
`input type='file'` 使用的屬性，是一個MIME類型的值，或文件后綴名。 示例代碼 |
| multiple | 任意值 或 忽略該屬性 | `input type='file'` 或 `select` 或 應用了 `datalist` 的表單元素才能應用該屬性示例代碼 |
| maxlength | 正整數或0 | 文本域可輸入字符的長度，浮點數將會向下取整，負數將被忽略，JavaScript可以繞過這一限制 |
| required | 任意值 或 忽略該屬性 | 該表單字段是否需要被驗證 |
| pattern | 一個正則表達式 | `\d{4,6}` 形式的正則表達式，作為required校驗規則 |
| autocomplete | `on` , `off` | 同form的autocomplete屬性，在表單元素上應用，優先級將高於form上指定的 |
| autofocus | 任意值 或 忽略該屬性 | 頁面加載時，該元素自動聚焦，應用於多個表單元素時，聚焦到第一個 |
| 展示 | ||
| placeholder | 字符串 | 在元素沒有value時，用於占位顯示 |
| value | 字符串 或 數值 | input 或 progress 展示的值,其中： checkbox和radio的默認值是 'on' range和progress的默認值是 0 progress的是0的時候會播放循環動畫 示例代碼 |
注意：以下示例部分來自 w3.org
form示例
點擊預覽按鈕，將會把 username1 的值提交到 /preview，
點擊發布按鈕，將會把 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'>預覽</button>
<button>發布</button>
</form>
accept示例
<input type="file" accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document">
需要鍵入 ',' 方可多選(需瀏覽器支持)