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"><br>

嘗試一下»

輸入類型：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="img_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="male"> Male<br>
<input type="radio" name="gender" value="女"> 女

嘗試一下»

輸入類型：range

實例

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

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

嘗試一下»

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

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

輸入類型：reset

實例

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

<input type="reset">

嘗試一下»

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

輸入類型：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">

嘗試一下»