HTML <input>type屬性

HTML <input> 標簽

瀏覽器支持

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

請看下面關于每種輸入類型的瀏覽器支持。

定義和用法

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

默認類型是：text。

提示：該屬性不是必需的，但是我們認為您應該始終使用它。

HTML 4.01 與 HTML5之間的差異

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

語法

屬性值

實例

輸入類型：button

實例

定義可點擊的按鈕，在用戶單擊按鈕時啟動一段 JavaScript：

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

輸入類型：checkbox

實例

復選框允許用戶在一定數量的選擇中選取一個或多個選項：

<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

實例

從拾色器中選取顏色：

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

輸入類型：date

實例

定義 date 控件：

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

輸入類型：datetime

實例

定義 date 和 time 控件（帶有時區）：

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

輸入類型：datetime-local

實例

定義 date 和 time 控件（不帶時區）：

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

輸入類型：email

實例

定義用于 e-mail 地址的字段（當提交表單時會自動對 email 字段的值進行驗證）：

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

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

輸入類型：file

實例

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

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

輸入類型：hidden

實例

定義隱藏字段，隱藏字段對于用戶是不可見的。隱藏字段常常存儲默認值，或者由 JavaScript 改變它們的值：

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

輸入類型：image

實例

定義圖像作為提交按鈕：

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

輸入類型：month

實例

定義 month 和 year 控件（不帶時區）：

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

輸入類型：number

實例

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

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

請使用下面的屬性來規定限制：

• max - 規定允許的最大值。
• min - 規定允許的最小值。
• step - 規定合法數字間隔。
• value - 規定默認值。

輸入類型：password

實例

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

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

輸入類型：radio

實例

允許用戶在一定數量的選擇中選取一個選項：

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

輸入類型：range

實例

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

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

請使用下面的屬性來規定限制：

• max - 規定允許的最大值。
• min - 規定允許的最小值。
• step - 規定合法數字間隔。
• value - 規定默認值。

輸入類型：reset

實例

定義重置按鈕（重置所有表單值為默認值）：

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

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

輸入類型：search

實例

定義搜索字段（比如站內搜索或谷歌搜索等）：

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

輸入類型：submit

實例

定義提交按鈕：

<input type="submit">

輸入類型：tel

實例

定義用于輸入電話號碼的字段：

電話號碼: <input type="tel" name="usrtel">

輸入類型：text

實例

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

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

輸入類型：time

實例

定義用于輸入時間的控件（不帶時區）：

選擇時間: <input type="time" name="usr_time">

輸入類型：url

實例

定義用于輸入 URL 的字段：

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

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

輸入類型：week

實例

定義 week 和 year 控件（不帶時區）：

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