input表單的type屬性詳解，不一樣type不一樣屬性之間區別

目標：詳解表單input標籤type屬性經常使用的屬性值

1、input標籤和它的type屬性 
PS：input 元素能夠用來生成一個供用戶輸入數據的簡單文本框。 在默認的狀況下， 什麼樣的數據都可以輸入。而經過不一樣的type屬性值，能夠限制輸入的內容。

2、總結 
一、text 一個單行文本框，默認屬性值 
二、password 隱藏字符的密碼框 
三、search 搜索框，在某些瀏覽器中輸入內容會出現叉形標記 
四、submit、reset、button 依次是：提交按鈕、重置按鈕、普通按鈕 
五、number、range 依次是：只能輸入數值的框、只能輸入在一個指定範圍的數值框 
六、checkbox、radio 依次是：複選框，一組複選框(name屬性值相同)用戶能夠勾選多個、單選按鈕，一組單選按鈕(name屬性值相同)用戶只能夠選中一個 
七、image、color 依次是：圖片按鈕、顏色代碼按鈕 
八、email、tel、url 依次是：檢測電子郵件、號碼、網址的文本框 
九、hidden 生成一個隱藏控件 
十、file 生成一個上傳控件 
十一、獲取各類日期、時間 data、month、time、week、datetime、datatime-local

3、詳解 
一、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 表示用戶必須輸入一個值，不然沒法經過輸入驗證

二、type=」password」，和type=」text」時所擁的額外屬性基本一致，少了一個list屬性

三、type=」search」 ， 和type=」text」全部用的額外屬性值一致

四、當type爲submit、reset、button，提交表單、重置表單、普通按鈕 
4.1)、若是是 submit 時，還提供了和元素同樣的額外屬性：formaction、formenctype、formmethod、formtarget 和 formnovalidate。

五、當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 設置文本框內容只讀

六、當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

七、當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。

八、當type爲email、tel、url 
8.1)、email 爲電子郵件格式 
8.2)、tel 爲電話格式 
8.3)、url 爲網址格式 
8.4)、額外屬性和 text一致。但對於這幾種類型，瀏覽器支持是不一樣的。email 支持比較好，如今瀏覽器都支持格式驗證；tel 基本不支持；url 支持通常，部分瀏覽器只要檢測到 http://就能經過。

九、type=」hidden」 
9.1)、生成一個隱藏控件，通常用於表單提交時關聯主鍵 ID 提交，而這個數據做爲隱藏存在

十、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

十一、當type爲data、month、time、week、datetime、datatime-local，由於各類緣由仍是用jquery等前端庫寫吧！！！