HTML <input> type 属性

<form action="demo_form.html">
 Username: <input type="text" name="usrname"><br>
 <input type="submit" value="Submit">
 </form>

浏览器支持

所有主流浏览器都支持 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：

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

运行一下 »

输入类型：checkbox

实例

复选框允许用户在一定数量的选择中选取一个或多个选项：

<input type="checkbox" name="vehicle[]" value="Bike"> I have a bike<br>
 <input type="checkbox" name="vehicle[]" value="Car"> I have a car

运行一下 »

输入类型：color

实例

从拾色器中选取颜色：

Select your favorite color: <input type="color" name="favcolor">

运行一下 »

输入类型：date

实例

定义 date 控件：

Birthday: <input type="date" name="bday">

运行一下 »

输入类型：datetime

实例

定义 date 和 time 控件（带有时区）：

Birthday (date and time): <input type="datetime" name="bdaytime">

运行一下 »

输入类型：datetime-local

实例

定义 date 和 time 控件（不带时区）：

Birthday (date and time): <input type="datetime-local" name="bdaytime">

运行一下 »

输入类型：email

实例

定义用于 e-mail 地址的字段（当提交表单时会自动对 email 字段的值进行验证）：

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

运行一下 »

提示：iPhone 的 Safari 浏览器会识别 email 输入类型，然后改变触摸屏的键盘来适应它（添加 @ 和 .com 选项）。

输入类型：file

实例

定义文件选择字段和 "浏览..." 按钮，供文件上传：

Select a 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 控件（不带时区）：

Birthday (month and year): <input type="month" name="bdaymonth">

运行一下 »

输入类型：number

实例

定义用于输入数字的字段（您可以设置可接受数字的限制）：

Quantity (between 1 and 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="female"> Female

运行一下 »

输入类型：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

实例

定义用于输入电话号码的字段：

Telephone: <input type="tel" name="usrtel">

运行一下 »

输入类型：text

实例

定义两个用户可向其中输入文本的单行的文本字段：

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

运行一下 »

输入类型：time

实例

定义用于输入时间的控件（不带时区）：

Select a time: <input type="time" name="usr_time">

运行一下 »

输入类型：url

实例

定义用于输入 URL 的字段：

Add your homepage: <input type="url" name="homepage">

运行一下 »

提示：iPhone 的 Safari 浏览器会识别 url 输入类型，然后改变触摸屏的键盘来适应它（添加 .com 选项）。

输入类型：week

实例

定义 week 和 year 控件（不带时区）：

Select a week: <input type="week" name="week_year">

运行一下 »