HTML input type 属性
实例
带有两种不同输入类型的 HTML 表单,text 和 submit:
<form action="demo-form.php">
用户名: <input type="text" name="usrname"><br>
<input type="submit" value="提交">
用户名: <input type="text" name="usrname"><br>
<input type="submit" value="提交">
运行代码 »
(查看本页底部更多实例)
浏览器支持
所有主流浏览器都支持 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 控件(不带时区)。 |
实例
输入类型:button
输入类型: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>
<input type="checkbox" name="vehicle[]" value="Car"> 我有一辆小轿车<br>
<input type="checkbox" name="vehicle[]" value="Boat"> 我有一艘船<br>
运行代码 »
输入类型:color
输入类型:date
输入类型:datetime
输入类型:datetime-local
输入类型:email
实例
定义用于 e-mail 地址的字段(当提交表单时会自动对 email 字段的值进行验证):
E-mail: <input type="email" name="usremail">
运行代码 »
提示:iPhone 的 Safari 浏览器会识别 email 输入类型,然后改变触摸屏的键盘来适应它(添加 @ 和 .com 选项)。
输入类型:file
输入类型:hidden
实例
定义隐藏字段,隐藏字段对于用户是不可见的。隐藏字段常常存储默认值,或者由 JavaScript 改变它们的值:
<input type="hidden" name="country" value="Norway">
运行代码 »
输入类型:image
输入类型:month
输入类型:number
实例
定义用于输入数字的字段(您可以设置可接受数字的限制):
数量 ( 1 到 5 之间): <input type="number" name="quantity" min="1"
max="5">
运行代码 »
请使用下面的属性来规定限制:
输入类型:password
输入类型:radio
实例
允许用户在一定数量的选择中选取一个选项:
<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="女"> 女
<input type="radio" name="gender" value="女"> 女
运行代码 »
输入类型:range
实例
定义用于精确值不重要的输入数字的控件(比如 slider 控件)。您也可以设置可接受数字的限制:
<input type="range" name="points" min="1" max="10">
运行代码 »
请使用下面的属性来规定限制:
输入类型:reset
提示:请谨慎使用重置按钮!对于用户来说,不慎点击了重置按钮是件很恼火的事情。
输入类型:search
输入类型:submit
输入类型:tel
输入类型:text
实例
定义两个用户可向其中输入文本的单行的文本字段:
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
Last name: <input type="text" name="lname"><br>
运行代码 »
输入类型:time
输入类型:url
提示:iPhone 的 Safari 浏览器会识别 url 输入类型,然后改变触摸屏的键盘来适应它(添加 .com 选项)。
输入类型:week
HTML <input> 标签其他扩展