HTML 5 <input> type 属性

HTML 5 <input> 标签

实例

带有不同输入类型的表单：

<form action="demo_form.asp" method="get">
  First name: <input type="text" name="fname" /><br />
  Last name: <input type="text" name="lname" /><br />
  <input type="submit" value="Submit" />
</form>

亲自试一试

（下面有更多实例）

定义和用法

type 属性规定 input 元素的类型。

注释：该属性不是必需的，但是我们认为您应该始终使用它。

HTML 4.01 与 HTML 5 之间的差异

以下类型是 HTML5 中的新类型：color, date, datetime, datetime-local, month, week, time, email, number, range, search, tel 以及 url。

语法

<input type="value">

属性值

值 描述
button 定义可点击的按钮（大多与 JavaScript 使用来启动脚本）
checkbox 定义复选框。
color 定义拾色器。
date 定义日期字段（带有 calendar 控件）
datetime 定义日期字段（带有 calendar 和 time 控件）
datetime-local 定义日期字段（带有 calendar 和 time 控件）
month 定义日期字段的月（带有 calendar 控件）
week 定义日期字段的周（带有 calendar 控件）
time 定义日期字段的时、分、秒（带有 time 控件）
email 定义用于 e-mail 地址的文本字段
file 定义输入字段和 "浏览..." 按钮，供文件上传
hidden 定义隐藏输入字段
image 定义图像作为提交按钮
number 定义带有 spinner 控件的数字字段
password 定义密码字段。字段中的字符会被遮蔽。
radio 定义单选按钮。
range 定义带有 slider 控件的数字字段。
reset 定义重置按钮。重置按钮会将所有表单字段重置为初始值。
search 定义用于搜索的文本字段。
submit 定义提交按钮。提交按钮向服务器发送数据。
tel 定义用于电话号码的文本字段。
text 默认。定义单行输入字段，用户可在其中输入文本。默认是 20 个字符。
url 定义用于 URL 的文本字段。

输入类型 - text

定义单行输入字段的文本输入类型，用户可在其中输入文本。

实例

Email: <input type="text" name="email" /><br />
Pin: <input type="text" name="pin" />

亲自试一试

输入类型 - button

button 输入类型定义可点击的按钮，这个按钮本身不会做任何事情。button 类型常用于在用户单击按钮时启动一段 JavaScript。

实例

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

亲自试一试

输入类型 - checkbox

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

color 输入类型用于规定颜色。

该输入类型允许您从拾色器中选取颜色：

实例

Color: <input type="color" name="user_color" />

亲自试一试

日期和时间选择器

HTML5 拥有多个供选择日期和时间的新的输入类型：

  • date - 选择日、月、年
  • month - 选择月、年
  • week - 选择周、年
  • time - 选择时间（时、分）
  • datetime - 选择时间、日期、月、年（UTC 时间）
  • datetime-local - 选择时间、日期、月、年（本地时间）

下面的例子允许您从日历选取一个日期：

实例

Date: <input type="date" name="user_date" />

亲自试一试

输入类型 "month": 亲自试一试

输入类型 "week": 亲自试一试

输入类型 "time": 亲自试一试

输入类型 "datetime": 亲自试一试

输入类型 "datetime-local": 亲自试一试

输入类型 - email

email 输入类型用于应该包含电邮地址的输入字段。

当提交表单时，会自动地对 email 字段的值进行验证。

实例

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

亲自试一试

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

输入类型 - file

file 输入类型用于文件上传。

实例

Select images: <input type="file" name="img" />

亲自试一试

输入类型 - hidden

hidden 输入类型定义隐藏字段。隐藏字段对于用户是不可见的。隐藏字段常常存储默认值，或者由 JavaScript 改变它们的值。

实例

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

亲自试一试

输入类型 - image

image 输入类型将图像定义为提交按钮。

对于 <input type="image">，src 和 alt 属性是必需的。

实例

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

亲自试一试

输入类型 - number

number 输入类型用于包含数字值的输入字段。

您可以设置可接受数字的限制。

实例

Points: <input type="number" name="points" min="1" max="10" />

亲自试一试

请使用下面的属性来为 number 类型规定限制：

属性 值 描述
max number 规定允许的最大值。
min number 规定允许的最小值。
step number 规定合法数字间隔（如果 step="3"，则合法的数字是 -3,0,3,6, 以此类推）
value number 规定默认值。

提示：iPhone 的 Safari 浏览器会识别 number 输入类型，然后改变触摸屏的键盘来适应它（显示数字）。

输入类型 - password

password 输入类型定义密码字段。密码字段中的字符会被遮蔽（显示为星号或实心圆）。

实例

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

亲自试一试

输入类型 - radio

radio 输入类型定义单选按钮。单选按钮允许用户选择有限数目的选项。

实例

<input type="radio" name="sex" value="male" /> Male<br />
<input type="radio" name="sex" value="female" /> Female

亲自试一试

输入类型 - range

range 输入类型用于应该包含指定范围值的输入字段。

range 类型显示为滑块。

您也可以设置可接受数字的限制：

实例

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

亲自试一试

请使用下面的属性来规定 range 类型的限定：

属性 值 描述
max number 规定允许的最大值。
min number 规定允许的最小值。
step number 规定合法数字间隔（如果 step="3"，则合法数字是 -3,0,3,6，以此类推）
value number 规定默认值。

输入类型 - reset

Reset 输入类型定义重置按钮。重置按钮会把所有表单字段重置为初始值。

提示：请谨慎使用重置按钮！对于用户来说，不慎点击了重置按钮是件很恼火的事情。

实例

<input type="reset" />

亲自试一试

输入类型 - search

search 输入类型用于搜索字段，比如站内搜索或谷歌搜索等。

搜索字段的外观与常规的文本字段无异。

输入类型 - submit

submit 输入类型定义提交按钮。

提交按钮用于向服务器发送表单数据。数据会被发送到在表单的 action 属性中规定的页面。

实例

<form action="form_action.asp" method="get">
Email: <input type="text" name="email" /><br />
<input type="submit" />
</form>

亲自试一试

输入类型 - tel

tel 输入类型用于应该包含电话号码的输入字段。

实例

Mobile: <input type="tel" name="user_mobile" />

亲自试一试

输入类型 - url

url 输入类型用于应该包含 URL 地址的输入字段。

会在提交表单时对 url 字段的值自动进行验证。

实例

Homepage: <input type="url" name="user_url" />

亲自试一试

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

HTML 5 <input> 标签