input標籤總結

1. input標籤全部type

1.1 經常使用

類型	說明
text	文本
password	密碼
radio	單選
checkbox	多選
file	文件選擇器
button	普通按鈕
submit	提交
reset	重置
hidden	傳隱藏值
image	圖片

1.2 日期時間(html5)

類型	說明
date	定義日期字段（帶有 calendar 控件）
datetime	定義日期字段（帶有 calendar 和 time 控件）
datetime-local	定義日期字段（帶有 calendar 和 time 控件）
month	定義日期字段的月（帶有 calendar 控件）
week	定義日期字段的周（帶有 calendar 控件）
time	定義日期字段的時、分、秒（帶有 time 控件）

1.3 color(html5)

類型	說明
color	定義拾色器

1.4 number(html5)

類型	說明
number	定義帶有 spinner 控件的數字字段

<input type="number" name="points" min="1" max="100" step="2" />

1.5 range(html5)

類型	說明
range	定義帶有 slider 控件的數字字段

<input type="range" name="points" min="1" max="10" />

1.6 search(html5)

類型	說明
search	定義用於搜索的文本字段，會有清空按鈕

1.7 其餘

類型	說明
email	會有email格式校驗
tel	會有tel格式校驗
url	會有url格式校驗

2. input的pattern和required

類型	說明
pattern	正則校驗校驗
required	不能爲空

代碼以下：

<input type="text" pattern="^[0-9]{4}$" required="true">

3. readonly和disabled

類型	說明
readonly	只讀
disabled	禁用

兩者的區別：

1. 樣式上不同，disabled會改樣式。

2. 提交時，disable的name，value不會提交；readonly會繼續提交。

4. list

指定爲文本框提供建議值的datalist元素，其值爲datalist元素的id值。代碼以下：

<input type="text" list="dl">
<datalist id="dl">
    <option value="1">香蕉</option>
    <option value="2">蘋果</option>
    <option value="3">橘子</option>
    <option value="4">西瓜</option>
    <option value="5">草莓</option>
    <option value="6">柚子</option>
</datalist>

和select的區別是，select選擇的value是option的value，顯示的文本是option的文本。而datalist通常顯示option的文本，若是option有value，則顯示value。因爲datalist只是提供給input建議值，通常不須要value。

5. 其餘

類型	說明
maxlength	文本長度
size	文本框寬度
placeholder	提示