實(shí)例

帶有不同輸入類型的表單：

<form action="demo_form.asp" method="get">
  First name: <input type="text" name="fname" /><br />
  Last name: <input type="text" name="lname" /><br />
  <input type="submit" value="Submit" />
</form>

親自試一試

（下面有更多實(shí)例）

定義和用法

type 屬性規(guī)定 input 元素的類型。

注釋：該屬性不是必需的，但是我們認(rèn)為您應(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">

屬性值

輸入類型 - text

定義單行輸入字段的文本輸入類型，用戶可在其中輸入文本。

實(shí)例

Email: <input type="text" name="email" /><br />
Pin: <input type="text" name="pin" />

親自試一試

輸入類型 - button

button 輸入類型定義可點(diǎn)擊的按鈕，這個(gè)按鈕本身不會(huì)做任何事情。button 類型常用于在用戶單擊按鈕時(shí)啟動(dòng)一段 JavaScript。

實(shí)例

<input type="button" value="Click me" onclick="msg()" />

親自試一試

輸入類型 - checkbox

checkbox 輸入類型定義復(fù)選框。復(fù)選框允許用戶在一定數(shù)量的選擇中選取一個(gè)或多個(gè)選項(xiàng)。

實(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ī)定顏色。

該輸入類型允許您從拾色器中選取顏色：

實(shí)例

Color: <input type="color" name="user_color" />

親自試一試

日期和時(shí)間選擇器

HTML5 擁有多個(gè)供選擇日期和時(shí)間的新的輸入類型：

• date - 選擇日、月、年
• month - 選擇月、年
• week - 選擇周、年
• time - 選擇時(shí)間（時(shí)、分）
• datetime - 選擇時(shí)間、日期、月、年（UTC 時(shí)間）
• datetime-local - 選擇時(shí)間、日期、月、年（本地時(shí)間）

下面的例子允許您從日歷選取一個(gè)日期：

實(shí)例

Date: <input type="date" name="user_date" />

親自試一試

輸入類型 "month": 親自試一試

輸入類型 "week": 親自試一試

輸入類型 "time": 親自試一試

輸入類型 "datetime": 親自試一試

輸入類型 "datetime-local": 親自試一試

輸入類型 - email

email 輸入類型用于應(yīng)該包含電郵地址的輸入字段。

當(dāng)提交表單時(shí)，會(huì)自動(dòng)地對 email 字段的值進(jìn)行驗(yàn)證。

實(shí)例

E-mail: <input type="email" name="user_email" />

親自試一試

提示：iPhone 的 Safari 瀏覽器會(huì)識別 email 輸入類型，然后改變觸摸屏的鍵盤來適應(yīng)它（添加 @ 和 .com 選項(xiàng)）。

輸入類型 - file

file 輸入類型用于文件上傳。

實(shí)例

Select images: <input type="file" name="img" />

親自試一試

輸入類型 - hidden

hidden 輸入類型定義隱藏字段。隱藏字段對于用戶是不可見的。隱藏字段常常存儲(chǔ)默認(rèn)值，或者由 JavaScript 改變它們的值。

實(shí)例

<input type="hidden" name="country" value="Norway" />

親自試一試

輸入類型 - image

image 輸入類型將圖像定義為提交按鈕。

對于 <input type="image">，src 和 alt 屬性是必需的。

實(shí)例

<input type="image" src="img_submit.gif" alt="Submit" />

親自試一試

輸入類型 - number

number 輸入類型用于包含數(shù)字值的輸入字段。

您可以設(shè)置可接受數(shù)字的限制。

實(shí)例

Points: <input type="number" name="points" min="1" max="10" />

親自試一試

請使用下面的屬性來為 number 類型規(guī)定限制：

提示：iPhone 的 Safari 瀏覽器會(huì)識別 number 輸入類型，然后改變觸摸屏的鍵盤來適應(yīng)它（顯示數(shù)字）。

輸入類型 - password

password 輸入類型定義密碼字段。密碼字段中的字符會(huì)被遮蔽（顯示為星號或?qū)嵭膱A）。

實(shí)例

<input type="password" name="pwd" />

親自試一試

輸入類型 - radio

radio 輸入類型定義單選按鈕。單選按鈕允許用戶選擇有限數(shù)目的選項(xiàng)。

實(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ù)字的限制：

實(shí)例

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

親自試一試

請使用下面的屬性來規(guī)定 range 類型的限定：

輸入類型 - reset

Reset 輸入類型定義重置按鈕。重置按鈕會(huì)把所有表單字段重置為初始值。

提示：請謹(jǐn)慎使用重置按鈕！對于用戶來說，不慎點(diǎn)擊了重置按鈕是件很惱火的事情。

實(shí)例

<input type="reset" />

親自試一試

輸入類型 - search

search 輸入類型用于搜索字段，比如站內(nèi)搜索或谷歌搜索等。

搜索字段的外觀與常規(guī)的文本字段無異。

輸入類型 - submit

submit 輸入類型定義提交按鈕。

提交按鈕用于向服務(wù)器發(fā)送表單數(shù)據(jù)。數(shù)據(jù)會(huì)被發(fā)送到在表單的 action 屬性中規(guī)定的頁面。

實(shí)例

<form action="form_action.asp" method="get">
Email: <input type="text" name="email" /><br />
<input type="submit" />
</form>

親自試一試

輸入類型 - tel

tel 輸入類型用于應(yīng)該包含電話號碼的輸入字段。

實(shí)例

Mobile: <input type="tel" name="user_mobile" />

親自試一試

輸入類型 - url

url 輸入類型用于應(yīng)該包含 URL 地址的輸入字段。

會(huì)在提交表單時(shí)對 url 字段的值自動(dòng)進(jìn)行驗(yàn)證。

實(shí)例

Homepage: <input type="url" name="user_url" />

親自試一試

提示：iPhone 的 Safari 瀏覽器會(huì)識別 url 輸入類型，然后改變觸摸屏的鍵盤來適應(yīng)它（添加 .com 選項(xiàng)）。