HTML <input> type 屬性

HTML input 標簽參考手冊 HTML <input> 標簽

實例

帶有兩種不同輸入類型的 HTML 表單,text 和 submit:

<form action="demo-form.php"> 用戶名: <input type="text" name="usrname"><br> <input type="submit" value="提交">

嚐試一下 »
(查看本頁底部更多實例)

瀏覽器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

所有主流瀏覽器都支持 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。


語法

<input type="value">

屬性值

描述
button 定義可點擊的按鈕(通常與 JavaScript 一起使用來啟動腳本)。
checkbox 定義複選框。
colorNew 定義拾色器。
dateNew 定義 date 控件(包括年、月、日,不包括時間)。
datetimeNew 定義 date 和 time 控件(包括年、月、日、時、分、秒、幾分之一秒,基於 UTC 時區)。
datetime-localNew 定義 date 和 time 控件(包括年、月、日、時、分、秒、幾分之一秒,不帶時區)。
emailNew 定義用於 e-mail 地址的字段。
file 定義文件選擇字段和 "瀏覽..." 按鈕,供文件上傳。
hidden 定義隱藏輸入字段。
image 定義圖像作為提交按鈕。
monthNew 定義 month 和 year 控件(不帶時區)。
numberNew 定義用於輸入數字的字段。
password 定義密碼字段(字段中的字符會被遮蔽)。
radio 定義單選按鈕。
rangeNew 定義用於精確值不重要的輸入數字的控件(比如 slider 控件)。
reset 定義重置按鈕(重置所有的表單值為默認值)。
searchNew 定義用於輸入搜索字符串的文本字段。
submit 定義提交按鈕。
telNew 定義用於輸入電話號碼的字段。
text 默認。定義一個單行的文本字段(默認寬度為 20 個字符)。
timeNew 定義用於輸入時間的控件(不帶時區)。
urlNew 定義用於輸入 URL 的字段。
weekNew 定義 week 和 year 控件(不帶時區)。

input 的 tpye 類型:

<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text">
<input type="time">
<input type="url">
<input type="week">


實例

輸入類型:button

Opera Safari Chrome Firefox Internet Explorer

實例

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

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

嚐試一下 »


輸入類型:checkbox

Opera Safari Chrome Firefox Internet Explorer

實例

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

<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

Opera Safari Chrome Firefox Internet Explorer

實例

從拾色器中選取顏色:

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

嚐試一下 »


輸入類型:date

Opera Safari Chrome Firefox Internet Explorer

實例

定義 date 控件:

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

嚐試一下 »


輸入類型:datetime

Opera Safari Chrome Firefox Internet Explorer

實例

定義 date 和 time 控件(帶有時區):

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

嚐試一下 »


輸入類型:datetime-local

Opera Safari Chrome Firefox Internet Explorer

實例

定義 date 和 time 控件(不帶時區):

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

嚐試一下 »


輸入類型:email

Opera Safari Chrome Firefox Internet Explorer

實例

定義用於 e-mail 地址的字段(當提交表單時會自動對 email 字段的值進行驗證):

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

嚐試一下 »

提示:iPhone 的 Safari 瀏覽器會識別 email 輸入類型,然後改變觸摸屏的鍵盤來適應它(添加 @ 和 .com 選項)。


輸入類型:file

Opera Safari Chrome Firefox Internet Explorer

實例

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

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

嚐試一下 »


輸入類型:hidden

Opera Safari Chrome Firefox Internet Explorer

實例

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

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

嚐試一下 »


輸入類型:image

Opera Safari Chrome Firefox Internet Explorer

實例

定義圖像作為提交按鈕:

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

嚐試一下 »


輸入類型:month

Opera Safari Chrome Firefox Internet Explorer

實例

定義 month 和 year 控件(不帶時區):

生日 ( 月和年 ): <input type="month" name="bdaymonth">

嚐試一下 »


輸入類型:number

Opera Safari Chrome Firefox Internet Explorer

實例

定義用於輸入數字的字段(您可以設置可接受數字的限製):

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

嚐試一下 »

請使用下麵的屬性來規定限製:

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

輸入類型:password

Opera Safari Chrome Firefox Internet Explorer

實例

定義密碼字段(密碼字段中的字符會被遮蔽):

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

嚐試一下 »


輸入類型:radio

Opera Safari Chrome Firefox Internet Explorer

實例

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

<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="女"> 女

嚐試一下 »


輸入類型:range

Opera Safari Chrome Firefox Internet Explorer

實例

定義用於精確值不重要的輸入數字的控件(比如 slider 控件)。您也可以設置可接受數字的限製:

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

嚐試一下 »

請使用下麵的屬性來規定限製:

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

輸入類型:reset

Opera Safari Chrome Firefox Internet Explorer

實例

定義重置按鈕(重置所有表單值為默認值):

<input type="reset">

嚐試一下 »

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


輸入類型:search

Opera Safari Chrome Firefox Internet Explorer

實例

定義搜索字段(比如站內搜索或穀歌搜索等):

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

嚐試一下 »


輸入類型:submit

Opera Safari Chrome Firefox Internet Explorer

實例

定義提交按鈕:

<input type="submit">

嚐試一下 »


輸入類型:tel

Opera Safari Chrome Firefox Internet Explorer

實例

定義用於輸入電話號碼的字段:

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

嚐試一下 »


輸入類型:text

Opera Safari Chrome Firefox Internet Explorer

實例

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

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

嚐試一下 »


輸入類型:time

Opera Safari Chrome Firefox Internet Explorer

實例

定義用於輸入時間的控件(不帶時區):

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

嚐試一下 »


輸入類型:url

Opera Safari Chrome Firefox Internet Explorer

實例

定義用於輸入 URL 的字段:

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

嚐試一下 »

提示:iPhone 的 Safari 瀏覽器會識別 url 輸入類型,然後改變觸摸屏的鍵盤來適應它(添加 .com 選項)。


輸入類型:week

Opera Safari Chrome Firefox Internet Explorer

實例

定義 week 和 year 控件(不帶時區):

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

嚐試一下 »


HTML input 標簽參考手冊 HTML <input> 標簽