HTML <input>type屬性

HTML <input> 標(biāo)簽

瀏覽器支持

所有主流瀏覽器都支持 type 屬性。但是，并非所有主流瀏覽器都支持所有不同的 input 類型都能在所有主流瀏覽器中工作。

請(qǐng)看下面關(guān)于每種輸入類型的瀏覽器支持。

定義和用法

type 屬性規(guī)定要顯示的 <input> 元素的類型。

默認(rèn)類型是：text。

提示：該屬性不是必需的，但是我們認(rèn)為您應(yīng)該始終使用它。

HTML 4.01 與 HTML5之間的差異

以下 input 類型是 HTML5 中的新類型：color、date、datetime、datetime-local、month、week、time、email、number、range、search、tel 和 url。

語法

屬性值

實(shí)例

輸入類型：button

實(shí)例

定義可點(diǎn)擊的按鈕，在用戶單擊按鈕時(shí)啟動(dòng)一段 JavaScript：

<input type="button" value="點(diǎn)我" onclick="msg()">

輸入類型：checkbox

實(shí)例

復(fù)選框允許用戶在一定數(shù)量的選擇中選取一個(gè)或多個(gè)選項(xiàng)：

<input type="checkbox" name="vehicle[]" value="Bike">我有一輛自行車<br>
<input type="checkbox" name="vehicle[]" value="Car">我有一輛小轎車<br>
<input type="checkbox" name="vehicle[]" value="Boat">我有一艘船<br>

輸入類型：color

實(shí)例

從拾色器中選取顏色：

選擇你喜歡的顏色: <input type="color" name="favcolor">

輸入類型：date

實(shí)例

定義 date 控件：

生日: <input type="date" name="bday">

輸入類型：datetime

實(shí)例

定義 date 和 time 控件（帶有時(shí)區(qū)）：

生日（日期和時(shí)間）: <input type="datetime" name="bdaytime">

輸入類型：datetime-local

實(shí)例

定義 date 和 time 控件（不帶時(shí)區(qū)）：

生日（日期和時(shí)間）: <input type="datetime-local" name="bdaytime">

輸入類型：email

實(shí)例

定義用于 e-mail 地址的字段（當(dāng)提交表單時(shí)會(huì)自動(dòng)對(duì) email 字段的值進(jìn)行驗(yàn)證）：

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

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

輸入類型：file

實(shí)例

定義文件選擇字段和 "瀏覽..." 按鈕，供文件上傳：

選擇一個(gè)文件: <input type="file" name="img">

輸入類型：hidden

實(shí)例

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

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

輸入類型：image

實(shí)例

定義圖像作為提交按鈕：

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

輸入類型：month

實(shí)例

定義 month 和 year 控件（不帶時(shí)區(qū)）：

生日（月和年）: <input type="month" name="bdaymonth">

輸入類型：number

實(shí)例

定義用于輸入數(shù)字的字段（您可以設(shè)置可接受數(shù)字的限制）：

數(shù)量（1到5之間）: <input type="number" name="quantity" min="1" max="5">

請(qǐng)使用下面的屬性來規(guī)定限制：

• max - 規(guī)定允許的最大值。
• min - 規(guī)定允許的最小值。
• step - 規(guī)定合法數(shù)字間隔。
• value - 規(guī)定默認(rèn)值。

輸入類型：password

實(shí)例

定義密碼字段（密碼字段中的字符會(huì)被遮蔽）：

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

輸入類型：radio

實(shí)例

允許用戶在一定數(shù)量的選擇中選取一個(gè)選項(xiàng)：

<input type="radio" name="gender" value="女">女<br>
<input type="submit" value="提交">

輸入類型：range

實(shí)例

定義用于精確值不重要的輸入數(shù)字的控件（比如 slider 控件）。您也可以設(shè)置可接受數(shù)字的限制：

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

請(qǐng)使用下面的屬性來規(guī)定限制：

• max - 規(guī)定允許的最大值。
• min - 規(guī)定允許的最小值。
• step - 規(guī)定合法數(shù)字間隔。
• value - 規(guī)定默認(rèn)值。

輸入類型：reset

實(shí)例

定義重置按鈕（重置所有表單值為默認(rèn)值）：

<input type="reset" value=“重置”>

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

輸入類型：search

實(shí)例

定義搜索字段（比如站內(nèi)搜索或谷歌搜索等）：

Search Google: <input type="search" name="googlesearch">

輸入類型：submit

實(shí)例

定義提交按鈕：

<input type="submit">

輸入類型：tel

實(shí)例

定義用于輸入電話號(hào)碼的字段：

電話號(hào)碼: <input type="tel" name="usrtel">

輸入類型：text

實(shí)例

定義兩個(gè)用戶可向其中輸入文本的單行的文本字段：

First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>

輸入類型：time

實(shí)例

定義用于輸入時(shí)間的控件（不帶時(shí)區(qū)）：

選擇時(shí)間: <input type="time" name="usr_time">

輸入類型：url

實(shí)例

定義用于輸入 URL 的字段：

添加你的主頁: <input type="url" name="homepage">

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

輸入類型：week

實(shí)例

定義 week 和 year 控件（不帶時(shí)區(qū)）：

選擇周: <input type="week" name="week_year">