目標：詳解表單input標簽type屬性常用的屬性值
一、input標簽和它的type屬性
PS：input 元素可以用來生成一個供用戶輸入數據的簡單文本框。 在默認的情況下， 什么樣的數據均可以輸入。而通過不同的type屬性值，可以限制輸入的內容。
二、總結
1、text 一個單行文本框，默認屬性值
2、password 隱藏字符的密碼框
3、search 搜索框，在某些瀏覽器中輸入內容會出現叉形標記
4、submit、reset、button 依次是：提交按鈕、重置按鈕、普通按鈕
5、number、range 依次是：只能輸入數值的框、只能輸入在一個指定范圍的數值框
6、checkbox、radio 依次是：復選框，一組復選框(name屬性值相同)用戶可以勾選多個、單選按鈕，一組單選按鈕(name屬性值相同)用戶只可以選中一個
7、image、color 依次是：圖片按鈕、顏色代碼按鈕
8、email、tel、url 依次是：檢測電子郵件、號碼、網址的文本框
9、hidden 生成一個隱藏控件
10、file 生成一個上傳控件
11、獲取各種日期、時間 data、month、time、week、datetime、datatime-local
三、詳解
1、type=”text”
1.1)、list 指定為文本框提供建議值的 datalist 元素，其值為datalist 元素的 id 值
1.2)、maxlength 設置文本最大字符長度
1.3)、pattern 用於輸入驗證的正則表達式
1.4)、placeholder 輸入提示的文本，當用戶輸入內容時會自動消失
1.5)、readonly 文本框處於只讀狀態
1.6)、disabled 文本框處於禁用狀態
1.7)、size 設置文本框寬度
1.8)、value 設置文本框初始值，會顯示在文本框中，顯示時優先級比placeholder高，表單提交時優先提交用戶輸入的內容，如果用戶沒有輸入則提交默認的值
1.9)、required 表示用戶必須輸入一個值，否則無法通過輸入驗證
2、type=”password”，和type=”text”時所擁的額外屬性基本一致，少了一個list屬性
3、type=”search” ， 和type=”text”所有用的額外屬性值一致
4、當type為submit、reset、button，提交表單、重置表單、普通按鈕
4.1)、如果是 submit 時，還提供了和元素一樣的額外屬性：formaction、formenctype、formmethod、formtarget 和 formnovalidate。
5、當type為number、range時
5.1)、type=”number” 只能輸入數字的文本框
5.2)、type=”range” 生成一個通過拖拽調節大小的調節器
額外屬性：
5.3)、min 設置可接受的最小值
5.4)、max 設定可接受的最大值
5.5)、value 指定初始值
5.6)、step 指定上下調節值的步長
5.7)、required 表明用戶必須輸入一個值，否則無法通過輸入驗證
5.8)、readonly 設置文本框內容只讀
6、當type為checkbox、radio
6.1)、不管type等於checkbox還是radio，都必須有屬性name和value
6.2)、他們還有可選屬性checked、required
PS：復選框和單選按鈕都是以一組一組的形式存在，name值相同的即為一組，一組復選框可以同時選中幾個，而一組單選按鈕同時只能選中一個
<section>
<label for="c">C</label> <input type="checkbox" id="c" name="hobby" value="c"/> <label for="python">python</label> <input type="checkbox" id="python" name="hobby" value="python"/> <label for="java">java</label> <input type="checkbox" id="java" name="hobby" value="java"/> </section> <section> <label for="apple">apple</label> <input type="checkbox" id="apple" name="eat" value="apple"/> <label for="orange">orange</label> <input type="checkbox" id="orange" name="eat" value="orange"/> <label for="pear">pear</label> <input type="checkbox" id="pear" name="eat" value="pear"/> </section>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
提交時數據格式：hobby=c&hobby=python&eat=orange&eat=pear
- 1
- 2
<section> <label for="man">男</label> <input type="radio" id="man" name="sex" value="man"/> <label for="men">女</label> <input type="radio" id="men" name="sex" value="men"/> </section>- 1
- 2
- 3
- 4
提交時數據格式：sex=man
- 1
- 2
7、當type為image、color
7.1)、當type=”image”時，功能上和type=”submit”一樣，前者是用圖片作為按鈕，當然后者也可以達到同樣的效果
額外屬性：
7.2)、src 指定要顯示圖像的 URL
7.3)、alt 提供圖片的文字說明，當圖片找不到時顯示該文字
7.4)、width 圖像的長度，注意這是標簽屬性，而不是樣式屬性
7.5)、height 圖片的高度，注意事項如上
7.6)、提交時的額外屬性 formaction、formenctype、formmethod、formtarget和 formnovalidate。
8、當type為email、tel、url
8.1)、email 為電子郵件格式
8.2)、tel 為電話格式
8.3)、url 為網址格式
8.4)、額外屬性和 text一致。但對於這幾種類型，瀏覽器支持是不同的。email 支持比較好，現在瀏覽器都支持格式驗證；tel 基本不支持；url 支持一般，部分瀏覽器只要檢測到 http://就能通過。
9、type=”hidden”
9.1)、生成一個隱藏控件，一般用於表單提交時關聯主鍵 ID 提交，而這個數據作為隱藏存在
10、type=”file”
10.1)、生成一個文件上傳控件，用於文件的上傳。
額外屬性：
10.2)、required 表明用戶必須提供一個值，否則無法通過驗證
10.3)、accept 指定接收的MIME類型 例如：accept=”image/gif, image/jpeg, image/png”
《1》上傳.csv格式的
<input text="file" accept=".csv" />
《2》上傳.xls格式
<input text="file" accept="application/vnd.ms-excel"/>
《3》上傳.xslx格式
<input text="fiel" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"/>
《4》上傳.png/.jpg/etc格式
<input type="file" accept="text/plain" />
《5》上傳圖片格式
<input type="file" accept="image/*" />
《6》上傳.htm,.html格式
<input type="file" accept="text/html" />
《7》上傳video(.avi, .mpg, .mpeg, .mp4)格式
<input type="file" accept="video/*" />
《8》上傳audio(.mp3, .wav, etc)格式
<input type="file" accept="audio/*" />
《9》上傳.pdf格式
<input type="file" accept=".pdf" />
《10》如果限制兩種文件格式，同時限制
<input type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel">
ＰＳ：當需要上傳文件時，form標簽的enctype屬性必須設置為multipart/form-data
11、當type為data、month、time、week、datetime、datatime-local，因為各種原因還是用jquery等前端庫寫吧！！！