一、type屬性總彙
input元素可以用來生成一個供使用者輸入資料的簡單文本框。在預設的情況下，什麼樣的資料都可以輸入。而通過不同的屬性值，可以限制輸入的内容。
屬性名稱
說明
text
一個單行文本框，預設行為
password
隐藏字元的密碼框
search
搜尋框，在某些浏覽器鍵入内容會出現叉标記取消
submit、reset、button
生成一個送出按鈕、重置按鈕、普通按鈕
number、range
隻能輸入數值的框；隻能輸入在一個數值範圍的框
checkbox、radio
複選框、使用者勾選框，單選框、隻能在幾個中選一個
image、color
生成一個圖檔按鈕，顔色代碼按鈕
email、tel、url
生成一個檢測電子郵件、号碼、網址的文本框
date、month、time、
week、datetime、
datetime-local
擷取日期和時間
hidden
生成一個隐藏控件
file
生成一個上傳控件
二、input元素解析
1、type為text值時
1
<code><</code><code>input</code> <code>type</code><code>=</code><code>"text"</code><code>></code>
解釋：當type值為text時，呈現的就是一個可以輸入任意字元的文本框，這也是預設行為，并且，還提供了額外的屬性
屬性名稱
說明
list
注定為文本框提供建議值的datalist元素。其值為datalist元素的id值
maxlength
設定文本框最大字元長度，如maxlength="5",則文本框隻能有5個字元
parttern
用于輸入驗證的正規表達式
placeholder
輸入字元的提示
readonly
文本框處于隻讀狀态
disable
文本框處于禁用狀态
size
設定文本框寬度
value
設定文本框的初始值或者預設值
required
表示使用者必須輸入一個值，否則無法用過輸入驗證
//設定文本框長度
<code><</code><code>input</code> <code>type</code><code>=</code><code>"text"</code> <code>size</code><code>=</code><code>"50"</code><code>></code>
//設定文本框輸入字元長度
<code><</code><code>input</code> <code>type</code><code>=</code><code>"text"</code> <code>maxlength</code><code>=</code><code>"10"</code><code>></code>
//設定文本框的初始值
<input type="text" value="初始值">
2
3
4
5
6
7
8
9
10
11
<code><</code><code>form</code><code>></code>
<code> </code><code>size=50<</code><code>input</code> <code>type</code><code>=</code><code>"text"</code> <code>name</code><code>=</code><code>"user"</code> <code>size</code><code>=</code><code>"50"</code><code>><</code><code>br</code><code>><</code><code>br</code><code>></code>
<code> </code><code>size=25<</code><code>input</code> <code>type</code><code>=</code><code>"text"</code> <code>name</code><code>=</code><code>"user"</code> <code>size</code><code>=</code><code>"25"</code><code>><</code><code>br</code><code>><</code><code>br</code><code>></code>
<code> </code><code>maxlength=10<</code><code>input</code> <code>type</code><code>=</code><code>"text"</code> <code>name</code><code>=</code><code>"user"</code> <code>maxlength</code><code>=</code><code>"10"</code><code>><</code><code>br</code><code>><</code><code>br</code><code>></code>
<code> </code><code>value=“初始值”<</code><code>input</code> <code>type</code><code>=</code><code>"text"</code> <code>name</code><code>=</code><code>"user"</code> <code>value</code><code>=</code><code>"初始值"</code><code>><</code><code>br</code><code>><</code><code>br</code><code>></code>
<code> </code><code>disable<</code><code>input</code> <code>type</code><code>=</code><code>"text"</code> <code>name</code><code>=</code><code>"user"</code> <code>disabled><</code><code>br</code><code>><</code><code>br</code><code>></code>
<code> </code><code>readonly<</code><code>input</code> <code>type</code><code>=</code><code>"text"</code> <code>name</code><code>=</code><code>"user"</code> <code>value</code><code>=</code><code>"初始值"</code> <code>readonly</code><code>=</code><code>""</code><code>><</code><code>br</code><code>><</code><code>br</code><code>></code>
<code><</code><code>form</code> <code>action</code><code>=</code><code>"http://www.baidu.com"</code><code>></code>
<code> </code><code>required<</code><code>input</code> <code>type</code><code>=</code><code>"text"</code> <code>name</code><code>=</code><code>"user"</code> <code>required</code><code>=</code><code>""</code><code>><</code><code>button</code><code>>送出</</code><code>button</code><code>></code>
<code></</code><code>form</code><code>></code>
2、type為password值時
<code><</code><code>input</code> <code>type</code><code>=</code><code>"password"</code><code>></code>
屬性名稱
說明
設定密碼框最大字元長度
輸入密碼的提示
密碼框處于隻讀狀态
設定密碼框寬度
設定密碼框初始值
表明使用者必須輸入同一個值
這裡除了正則和驗證需要放在下一節，其餘和文本框一緻
3、type為search時
<input type="search">
解釋：和文本框一緻，在處Firefox浏覽器的其他現代浏覽器，會顯示一個叉來取消搜尋内容。額外屬性也和text一緻
<code>placeholder：<</code><code>input</code> <code>type</code><code>=</code><code>"password"</code> <code>placeholder</code><code>=</code><code>"請輸入密碼"</code><code>><</code><code>button</code><code>>送出</</code><code>button</code><code>><</code><code>br</code><code>><</code><code>br</code><code>></code>
<code>search:<</code><code>input</code> <code>type</code><code>=</code><code>"search"</code> <code>><</code><code>button</code><code>>送出</</code><code>button</code><code>></code>
<a href="https://s5.51cto.com/wyfs02/M02/8D/B6/wKiom1imur3wCPG9AAAnIBM7o4Y267.png" target="_blank"></a>
4、type為number、range時
<code><</code><code>input</code> <code>type</code><code>=</code><code>"number"</code><code>></code>
<code><</code><code>input</code> <code>type</code><code>=</code><code>"range"</code><code>></code>
解釋：隻限輸入數字的文本框，不同浏覽器可能顯示方式不同，生成一個數值範圍文本框，隻是樣式是拖動式，額外屬性如下：
屬性名稱
說 明
指定為文本框提供建議值的datalist元素，其值為datalist元素的id值
min
設定可接受的最小值
max
設定可接受的最大值
設定文本框内容隻讀
表明使用者必須輸入一個值，否則無法通過驗證輸入
step
指定上下調節值的步長
指定初始值
<code> </code><code>number屬性：<</code><code>input</code> <code>type</code><code>=</code><code>"number"</code> <code>step</code><code>=</code><code>"2"</code><code>><</code><code>button</code><code>>送出</</code><code>button</code><code>><</code><code>br</code><code>><</code><code>br</code><code>></code>
<code> </code><code>number屬性：<</code><code>input</code> <code>type</code><code>=</code><code>"number"</code> <code>min</code><code>=</code><code>"50"</code> <code>max</code><code>=</code><code>"100"</code><code>><</code><code>button</code><code>>送出</</code><code>button</code><code>><</code><code>br</code><code>><</code><code>br</code><code>></code>
5、type為date系列時
<code><</code><code>input</code> <code>type</code><code>=</code><code>"date"</code><code>></code>
<code><</code><code>input</code> <code>type</code><code>=</code><code>"month"</code><code>></code>
<code><</code><code>input</code> <code>type</code><code>=</code><code>"time"</code><code>></code>
<code><</code><code>input</code> <code>type</code><code>=</code><code>"week"</code><code>></code>
<code><</code><code>input</code> <code>type</code><code>=</code><code>"datetime"</code><code>></code>
<code><</code><code>input</code> <code>type</code><code>=</code><code>"datetime-local"</code><code>></code>
解釋：實作文本框可以擷取日期和時間的值，但支援的浏覽器不完整。我們測試chrome和Opera支援。其他浏覽器尚未支援。是以，在擷取日期和時間，目前還是推薦使用jQuery等前端庫來實作月曆功能，額外屬性和number一緻。
<a href="https://s2.51cto.com/wyfs02/M02/8D/B4/wKioL1imxMHhcQC3AABwt31koyI007.png" target="_blank"></a>
6、type為color時
<input type="coler">
解釋：實作文本框擷取顔色的功能，最新的現代浏覽器IE不支援，其餘的都能顯示一個顔色對話框提供選擇
<code> </code><code>date屬性<</code><code>input</code> <code>type</code><code>=</code><code>"date"</code> <code>name</code><code>=</code><code>""</code><code>><</code><code>button</code><code>>送出</</code><code>button</code><code>><</code><code>br</code><code>><</code><code>br</code><code>></code>
<a href="https://s4.51cto.com/wyfs02/M00/8D/B6/wKiom1imwNizDa94AABhIkFddg0958.png" target="_blank"></a>
7、type為checkbox、radio時
<code> </code><code>音樂<</code><code>input</code> <code>type</code><code>=</code><code>"checkbox"</code> <code>name</code><code>=</code><code>""</code><code>></code>
<code> </code><code>體育<</code><code>input</code> <code>type</code><code>=</code><code>"checkbox"</code> <code>name</code><code>=</code><code>""</code><code>></code>
<code> </code><code><</code><code>input</code> <code>type</code><code>=</code><code>"radio"</code> <code>name</code><code>=</code><code>"sex"</code> <code>value</code><code>=</code><code>"男"</code><code>>男</code>
<code> </code><code><</code><code>input</code> <code>type</code><code>=</code><code>"radio"</code> <code>name</code><code>=</code><code>"sex"</code> <code>value</code><code>=</code><code>"女"</code><code>>女</code>
解釋：生成一個擷取布爾值的複選框或固定選項的單選框。額外屬性如下：
屬性名稱
說明
checked
設定複選框、單選框是否為勾選狀态
表示使用者必須勾選
設定複選框、單選框勾選狀态時送出的資料，預設為on
//預設勾選，預設值為1
<code><</code><code>input</code> <code>type</code><code>=</code><code>"checkbox"</code> <code>name</code><code>=</code><code>"music"</code> <code>checked </code><code>value</code><code>=</code><code>"1"</code><code>></code>
<code> </code><code><</code><code>input</code> <code>type</code><code>=</code><code>"radio"</code> <code>name</code><code>=</code><code>"sex"</code> <code>value</code><code>=</code><code>"1"</code> <code>checked>男</code>
<code> </code><code><</code><code>input</code> <code>type</code><code>=</code><code>"radio"</code> <code>name</code><code>=</code><code>"sex"</code> <code>value</code><code>=</code><code>"2"</code><code>>女<</code><code>button</code><code>>送出</</code><code>button</code><code>></code>
<a href="https://s4.51cto.com/wyfs02/M02/8D/B6/wKiom1imyCLhBFhyAAAY_K72p_w661.png" target="_blank"></a>
8、type為submit、reset和button時
<code><</code><code>input</code> <code>type</code><code>=</code><code>"submit"</code><code>></code>
解釋：生成一個按鈕，三種模式：送出、重置和一般按鈕，和<button>元素相同
9、type為image時
<input type="image" src="img.png">
解釋：生成一個圖檔按鈕，點選圖檔就實作送出功能，并且傳送了分區響應資料，圖檔按鈕也提供了一些額外屬性
說明
src
指定要顯示圖像的URL
alt
提供圖檔的文學說明
width
圖像的長度
height
圖像的高度
送出額外屬性
formaction、formenctype、formmethod、formtarget和formnovalidate
10、type為email、tel、url時
<code><</code><code>from</code><code>></code>
<code> </code><code>郵箱：<</code><code>input</code> <code>type</code><code>=</code><code>"email"</code> <code>name</code><code>=</code><code>""</code><code>></code>
<code> </code><code>電話：<</code><code>input</code> <code>type</code><code>=</code><code>"tel"</code> <code>name</code><code>=</code><code>""</code><code>></code>
<code> </code><code>首頁：<</code><code>input</code> <code>type</code><code>=</code><code>"url"</code> <code>name</code><code>=</code><code>""</code><code>><</code><code>button</code><code>>送出</</code><code>button</code><code>></code>
解釋：email為電子郵件格式，tel為電話格式、url為網址格式。額外屬性和text一緻。但對于這幾種類型，浏覽器支援是不同的。email支援比較好，現在浏覽器都支援格式驗證，tel基本不支援：url支援一般，部分浏覽器隻要檢測到http://就能通過
11、type為hidden時
<code><</code><code>input</code> <code>type</code><code>=</code><code>"hidden"</code><code>></code>
解釋：生成一個隐藏控件，一般用于表單送出時關聯主鍵ID送出，而這個資料作為隐藏存在
12、type為file時
<code><</code><code>input</code> <code>type</code><code>=</code><code>"file"</code><code>></code>
解釋：生成一個檔案上傳控件，用于檔案的上傳，額外提供一些屬性
屬性名稱
說明
accept
指定接受的MIME類型
表明使用者必須提供一個值，否則無法通過驗證
accept="image/jpg,image/jpeg,image/png"
本文轉自 曾哥最愛 51CTO部落格，原文連結：http://blog.51cto.com/zengestudy/1898936，如需轉載請自行聯系原作者
![前端加載shapefile資料 | WebGIS[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)