HTML 5 <input> type 屬性
實例
帶有不同輸入類型的表單：
<form action="demo_form.asp" method="get"> First name: <inputtype="text"name="fname" /><br /> Last name: <inputtype="text"name="lname" /><br /> <inputtype="submit"value="Submit" /> </form>
（下面有更多實例）
定義和用法
type 屬性規(guī)定 input 元素的類型。
注釋：該屬性不是必需的，但是我們認為您應(yīng)該始終使用它。
HTML 4.01 與 HTML 5 之間的差異
以下類型是 HTML5 中的新類型：color, date, datetime, datetime-local, month, week, time, email, number, range, search, tel 以及 url。
語法
<input type="value">
屬性值
| 值 | 描述 |
|---|---|
| button | 定義可點擊的按鈕（大多與 JavaScript 使用來啟動腳本） |
| checkbox | 定義復(fù)選框。 |
| color | 定義拾色器。 |
| date | 定義日期字段（帶有 calendar 控件） |
| datetime | 定義日期字段（帶有 calendar 和 time 控件） |
| datetime-local | 定義日期字段（帶有 calendar 和 time 控件） |
| month | 定義日期字段的月（帶有 calendar 控件） |
| week | 定義日期字段的周（帶有 calendar 控件） |
| time | 定義日期字段的時、分、秒（帶有 time 控件） |
| 定義用于 e-mail 地址的文本字段 | |
| file | 定義輸入字段和 "瀏覽..." 按鈕，供文件上傳 |
| hidden | 定義隱藏輸入字段 |
| image | 定義圖像作為提交按鈕 |
| number | 定義帶有 spinner 控件的數(shù)字字段 |
| password | 定義密碼字段。字段中的字符會被遮蔽。 |
| radio | 定義單選按鈕。 |
| range | 定義帶有 slider 控件的數(shù)字字段。 |
| reset | 定義重置按鈕。重置按鈕會將所有表單字段重置為初始值。 |
| search | 定義用于搜索的文本字段。 |
| submit | 定義提交按鈕。提交按鈕向服務(wù)器發(fā)送數(shù)據(jù)。 |
| tel | 定義用于電話號碼的文本字段。 |
| text | 默認。定義單行輸入字段，用戶可在其中輸入文本。默認是 20 個字符。 |
| url | 定義用于 URL 的文本字段。 |
輸入類型 - text
定義單行輸入字段的文本輸入類型，用戶可在其中輸入文本。
實例
Email: <input type="text" name="email" /><br /> Pin: <input type="text" name="pin" />
輸入類型 - button
button 輸入類型定義可點擊的按鈕，這個按鈕本身不會做任何事情。button 類型常用于在用戶單擊按鈕時啟動一段 JavaScript。
實例
<input type="button" value="Click me" onclick="msg()" />
輸入類型 - checkbox
checkbox 輸入類型定義復(fù)選框。復(fù)選框允許用戶在一定數(shù)量的選擇中選取一個或多個選項。
實例
<input type="checkbox" name="vehicle" value="Bike" /> I have a bike<br /> <input type="checkbox" name="vehicle" value="Car" /> I have a car
輸入類型 - color
color 輸入類型用于規(guī)定顏色。
該輸入類型允許您從拾色器中選取顏色：
實例
Color: <input type="color" name="user_color" />
日期和時間選擇器
HTML5 擁有多個供選擇日期和時間的新的輸入類型：
- date - 選擇日、月、年
- month - 選擇月、年
- week - 選擇周、年
- time - 選擇時間（時、分）
- datetime - 選擇時間、日期、月、年（UTC 時間）
- datetime-local - 選擇時間、日期、月、年（本地時間）
下面的例子允許您從日歷選取一個日期：
實例
Date: <input type="date" name="user_date" />
輸入類型 "month": 親自試一試
輸入類型 "week": 親自試一試
輸入類型 "time": 親自試一試
輸入類型 "datetime": 親自試一試
輸入類型 "datetime-local": 親自試一試
輸入類型 - email
email 輸入類型用于應(yīng)該包含電郵地址的輸入字段。
當(dāng)提交表單時，會自動地對 email 字段的值進行驗證。
實例
E-mail: <input type="email" name="user_email" />
提示：iPhone 的 Safari 瀏覽器會識別 email 輸入類型，然后改變觸摸屏的鍵盤來適應(yīng)它（添加 @ 和 .com 選項）。
輸入類型 - hidden
hidden 輸入類型定義隱藏字段。隱藏字段對于用戶是不可見的。隱藏字段常常存儲默認值，或者由 JavaScript 改變它們的值。
實例
<input type="hidden" name="country" value="Norway" />
輸入類型 - image
image 輸入類型將圖像定義為提交按鈕。
對于 <input type="image">，src 和 alt 屬性是必需的。
實例
<input type="image" src="img_submit.gif" alt="Submit" />
輸入類型 - number
number 輸入類型用于包含數(shù)字值的輸入字段。
您可以設(shè)置可接受數(shù)字的限制。
實例
Points: <input type="number" name="points" min="1" max="10" />
請使用下面的屬性來為 number 類型規(guī)定限制：
| 屬性 | 值 | 描述 |
|---|---|---|
| max | number | 規(guī)定允許的最大值。 |
| min | number | 規(guī)定允許的最小值。 |
| step | number | 規(guī)定合法數(shù)字間隔（如果 step="3"，則合法的數(shù)字是 -3,0,3,6, 以此類推） |
| value | number | 規(guī)定默認值。 |
提示：iPhone 的 Safari 瀏覽器會識別 number 輸入類型，然后改變觸摸屏的鍵盤來適應(yīng)它（顯示數(shù)字）。
輸入類型 - password
password 輸入類型定義密碼字段。密碼字段中的字符會被遮蔽（顯示為星號或?qū)嵭膱A）。
實例
<input type="password" name="pwd" />
輸入類型 - radio
radio 輸入類型定義單選按鈕。單選按鈕允許用戶選擇有限數(shù)目的選項。
實例
<input type="radio" name="sex" value="male" /> Male<br /> <input type="radio" name="sex" value="female" /> Female
輸入類型 - range
range 輸入類型用于應(yīng)該包含指定范圍值的輸入字段。
range 類型顯示為滑塊。
您也可以設(shè)置可接受數(shù)字的限制：
實例
<input type="range" name="points" min="1" max="10" />
請使用下面的屬性來規(guī)定 range 類型的限定：
| 屬性 | 值 | 描述 |
|---|---|---|
| max | number | 規(guī)定允許的最大值。 |
| min | number | 規(guī)定允許的最小值。 |
| step | number | 規(guī)定合法數(shù)字間隔（如果 step="3"，則合法數(shù)字是 -3,0,3,6，以此類推） |
| value | number | 規(guī)定默認值。 |
輸入類型 - reset
Reset 輸入類型定義重置按鈕。重置按鈕會把所有表單字段重置為初始值。
提示：請謹慎使用重置按鈕！對于用戶來說，不慎點擊了重置按鈕是件很惱火的事情。
實例
<input type="reset" />
輸入類型 - search
search 輸入類型用于搜索字段，比如站內(nèi)搜索或谷歌搜索等。
搜索字段的外觀與常規(guī)的文本字段無異。
輸入類型 - submit
submit 輸入類型定義提交按鈕。
提交按鈕用于向服務(wù)器發(fā)送表單數(shù)據(jù)。數(shù)據(jù)會被發(fā)送到在表單的 action 屬性中規(guī)定的頁面。
實例
<form action="form_action.asp" method="get"> Email: <input type="text" name="email" /><br /> <input type="submit" /> </form>
輸入類型 - url
url 輸入類型用于應(yīng)該包含 URL 地址的輸入字段。
會在提交表單時對 url 字段的值自動進行驗證。
實例
Homepage: <input type="url" name="user_url" />
提示：iPhone 的 Safari 瀏覽器會識別 url 輸入類型，然后改變觸摸屏的鍵盤來適應(yīng)它（添加 .com 選項）。