HTML5 Input 类型
浏览器支持
Input type | IE | Firefox | Opera | Chrome | Safari |
| No | 4.0 | 9.0 | 10.0 | No |
url | No | 4.0 | 9.0 | 10.0 | No |
number | No | No | 9.0 | 7.0 | No |
range | No | No | 9.0 | 4.0 | 4.0 |
Date pickers | No | No | 9.0 | 10.0 | No |
search | No | 4.0 | 11.0 | 10.0 | No |
color | No | No | 11.0 | No | No |
注释:Opera 对新的输入类型的支持最好。不过您已经可以在所有主流的浏览器中使用它们了。即使不被支持,仍然可以显示为常规的文本域。
Input 类型 - email
email 类型用于应该包含 e-mail 地址的输入域。
在提交表单时,会自动验证 email 域的值。
实例
E-mail: <input type="email" name="user_email" />
Input 类型 - url
url 类型用于应该包含 URL 地址的输入域。
在提交表单时,会自动验证 url 域的值。
实例
Homepage: <input type="url" name="user_url" />
Input 类型 - number
number 类型用于应该包含数值的输入域。
您还能够设定对所接受的数字的限定:
实例
Points: <input type="number" name="points" min="1" max="10" />
使用下面的属性来规定对数字类型的限定:
属性 | 值 | 描述 |
max | number | 规定允许的最大值 |
min | number | 规定允许的最小值 |
step | number | 规定合法的数字间隔(如果 step="3",则合法的数是 -3,0,3,6 等) |
value | number | 规定默认值 |
提示:iPhone 中的 Safari 浏览器支持 number 输入类型,并通过改变触摸屏键盘来配合它(显示数字)。
Input 类型 - range
range 类型用于应该包含一定范围内数字值的输入域。
range 类型显示为滑动条。
您还能够设定对所接受的数字的限定:
实例
<input type="range" name="points" min="1" max="10" />
请使用下面的属性来规定对数字类型的限定:
属性 | 值 | 描述 |
max | number | 规定允许的最大值 |
min | number | 规定允许的最小值 |
step | number | 规定合法的数字间隔(如果 step="3",则合法的数是 -3,0,3,6 等) |
value | number | 规定默认值 |
Input 类型 - Date Pickers(日期选择器)
HTML5 拥有多个可供选取日期和时间的新输入类型:
· date - 选取日、月、年
· month - 选取月、年
· week - 选取周和年
· time - 选取时间(小时和分钟)
· datetime - 选取时间、日、月、年(UTC 时间)
· datetime-local - 选取时间、日、月、年(本地时间)
下面的例子允许您从日历中选取一个日期:
实例
Date: <input type="date" name="user_date" />
输入类型 "month": 亲自试一试
输入类型 "week": 亲自试一试
输入类型 "time": 亲自试一试
输入类型 "datetime": 亲自试一试
输入类型 "datetime-local": 亲自试一试
Input 类型 - search
search 类型用于搜索域,比如站点搜索或 Google 搜索。
search 域显示为常规的文本域。
HTML5 表单元素
浏览器支持
Input type | IE | Firefox | Opera | Chrome | Safari |
datalist | No | No | 9.5 | No | No |
keygen | No | No | 10.5 | 3.0 | No |
output | No | No | 9.5 | No | No |
datalist 元素
datalist 元素规定输入域的选项列表。
列表是通过 datalist 内的 option 元素创建的。
如需把 datalist 绑定到输入域,请用输入域的 list 属性引用 datalist 的 id:
实例
Webpage: <input type="url" list="url_list" name="link" /><datalist id="url_list">
<option label="W3School" value="http://www.W3School.com.cn" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" /></datalist>
提示:option 元素永远都要设置 value 属性。
keygen 元素
keygen 元素的作用是提供一种验证用户的可靠方法。
keygen 元素是密钥对生成器(key-pair generator)。当提交表单时,会生成两个键,一个是私钥,一个公钥。
私钥(private key)存储于客户端,公钥(public key)则被发送到服务器。公钥可用于之后验证用户的客户端证书(client certificate)。
目前,浏览器对此元素的糟糕的支持度不足以使其成为一种有用的安全标准。
实例
<form action="demo_form.asp" method="get">
Username: <input type="text" name="usr_name" />
Encryption: <keygen name="security" />
<input type="submit" />
</form>
output 元素
output 元素用于不同类型的输出,比如计算或脚本输出:
实例
<output id="result" onforminput="resCalc()"></output>
HTML5 表单属性
浏览器支持
Input type | IE | Firefox | Opera | Chrome | Safari |
autocomplete | 8.0 | 3.5 | 9.5 | 3.0 | 4.0 |
autofocus | No | No | 10.0 | 3.0 | 4.0 |
form | No | No | 9.5 | No | No |
form overrides | No | No | 10.5 | No | No |
height and width | 8.0 | 3.5 | 9.5 | 3.0 | 4.0 |
list | No | No | 9.5 | No | No |
min, max and step | No | No | 9.5 | 3.0 | No |
multiple | No | 3.5 | No | 3.0 | 4.0 |
novalidate | No | No | No | No | No |
pattern | No | No | 9.5 | 3.0 | No |
placeholder | No | No | No | 3.0 | 3.0 |
required | No | No | 9.5 | 3.0 | No |
autocomplete 属性
autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。
注释:autocomplete 适用于 <form> 标签,以及以下类型的 <input> 标签:text, search, url, telephone, email, password, datepickers, range 以及 color。
当用户在自动完成域中开始输入时,浏览器应该在该域中显示填写的选项:
实例
<form action="demo_form.asp" method="get" autocomplete="on">
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
E-mail: <input type="email" name="email" autocomplete="off" /><br />
<input type="submit" />
</form>
注释:在某些浏览器中,您可能需要启用自动完成功能,以使该属性生效。
autofocus 属性
autofocus 属性规定在页面加载时,域自动地获得焦点。
注释:autofocus 属性适用于所有 <input> 标签的类型。
实例
User name: <input type="text" name="user_name" autofocus="autofocus" />
form 属性
form 属性规定输入域所属的一个或多个表单。
注释:form 属性适用于所有 <input> 标签的类型。
form 属性必须引用所属表单的 id:
实例
<form action="demo_form.asp" method="get" id="user_form">
First name:<input type="text" name="fname" />
<input type="submit" />
</form>
Last name: <input type="text" name="lname" form="user_form" />
注释:如需引用一个以上的表单,请使用空格分隔的列表。
表单重写属性
表单重写属性(form override attributes)允许您重写 form 元素的某些属性设定。
表单重写属性有:
· formaction - 重写表单的 action 属性
· formenctype - 重写表单的 enctype 属性
· formmethod - 重写表单的 method 属性
· formnovalidate - 重写表单的 novalidate 属性
· formtarget - 重写表单的 target 属性
注释:表单重写属性适用于以下类型的 <input> 标签:submit 和 image。
实例
<form action="demo_form.asp" method="get" id="user_form">
E-mail: <input type="email" name="userid" /><br />
<input type="submit" value="Submit" />
<br />
<input type="submit" formaction="demo_admin.asp" value="Submit as admin" />
<br />
<input type="submit" formnovalidate="true" value="Submit without validation" />
<br />
</form>
注释:这些属性对于创建不同的提交按钮很有帮助。
height 和 width 属性
height 和 width 属性规定用于 image 类型的 input 标签的图像高度和宽度。
注释:height 和 width 属性只适用于 image 类型的 <input> 标签。
实例
<input type="image" src="img_submit.gif" width="99" height="99" />
list 属性
list 属性规定输入域的 datalist。datalist 是输入域的选项列表。
注释:list 属性适用于以下类型的 <input> 标签:text, search, url, telephone, email, date pickers, number, range 以及 color。
实例
Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3Schools" value="http://www.w3school.com.cn" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>
min、max 和 step 属性
min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定(约束)。
max 属性规定输入域所允许的最大值。
min 属性规定输入域所允许的最小值。
step 属性为输入域规定合法的数字间隔(如果 step="3",则合法的数是 -3,0,3,6 等)。
注释:min、max 和 step 属性适用于以下类型的 <input> 标签:date pickers、number 以及 range。
下面的例子显示一个数字域,该域接受介于 0 到 10 之间的值,且步进为 3(即合法的值为 0、3、6 和 9):
实例
Points: <input type="number" name="points" min="0" max="10" step="3" />
multiple 属性
multiple 属性规定输入域中可选择多个值。
注释:multiple 属性适用于以下类型的 <input> 标签:email 和 file。
实例
Select images: <input type="file" name="img" multiple="multiple" />
novalidate 属性
novalidate 属性规定在提交表单时不应该验证 form 或 input 域。
注释:novalidate 属性适用于 <form> 以及以下类型的 <input> 标签:text, search, url, telephone, email, password, date pickers, range 以及 color.
实例
<form action="demo_form.asp" method="get" novalidate="true">
E-mail: <input type="email" name="user_email" />
<input type="submit" />
</form>
pattern 属性
pattern 属性规定用于验证 input 域的模式(pattern)。
模式(pattern) 是正则表达式。您可以在我们的 JavaScript 教程中学习到有关正则表达式的内容。
注释:pattern 属性适用于以下类型的 <input> 标签:text, search, url, telephone, email 以及 password。
下面的例子显示了一个只能包含三个字母的文本域(不含数字及特殊字符):
实例
Country code: <input type="text" name="country_code"pattern="[A-z]{3}" title="Three letter country code" />
placeholder 属性
placeholder 属性提供一种提示(hint),描述输入域所期待的值。
注释:placeholder 属性适用于以下类型的 <input> 标签:text, search, url, telephone, email 以及 password。
提示(hint)会在输入域为空时显示出现,会在输入域获得焦点时消失:
实例
<input type="search" name="user_search" placeholder="Search W3School" />
required 属性
required 属性规定必须在提交之前填写输入域(不能为空)。
注释:required 属性适用于以下类型的 <input> 标签:text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。
实例
Name: <input type="text" name="usr_name" required="required" />
HTML 参考手册
按字母顺序排列
New : HTML5 中的新标签。
标签 | 描述 |
定义注释。 | |
定义文档类型。 | |
定义锚。 | |
定义缩写。 | |
定义只取首字母的缩写。 | |
定义文档作者或拥有者的联系信息。 | |
不赞成使用。定义嵌入的 applet。 | |
定义图像映射内部的区域。 | |
定义文章。 | |
定义页面内容之外的内容。 | |
定义声音内容。 | |
定义粗体字。 | |
定义页面中所有链接的默认地址或默认目标。 | |
不赞成使用。定义页面中文本的默认字体、颜色或尺寸。 | |
定义文本的文本方向,使其脱离其周围文本的方向设置。 | |
定义文字方向。 | |
定义大号文本。 | |
定义长的引用。 | |
定义文档的主体。 | |
定义简单的折行。 | |
定义按钮 (push button)。 | |
定义图形。 | |
定义表格标题。 | |
不赞成使用。定义居中文本。 | |
定义引用(citation)。 | |
定义计算机代码文本。 | |
定义表格中一个或多个列的属性值。 | |
定义表格中供格式化的列组。 | |
定义命令按钮。 | |
定义下拉列表。 | |
定义定义列表中项目的描述。 | |
定义被删除文本。 | |
定义元素的细节。 | |
不赞成使用。定义目录列表。 | |
定义文档中的节。 | |
定义定义项目。 | |
定义对话框或窗口。 | |
定义定义列表。 | |
定义定义列表中的项目。 | |
定义强调文本。 | |
定义外部交互内容或插件。 | |
定义围绕表单中元素的边框。 | |
定义 figure 元素的标题。 | |
定义媒介内容的分组,以及它们的标题。 | |
不赞成使用。定义文字的字体、尺寸和颜色。 | |
定义 section 或 page 的页脚。 | |
定义供用户输入的 HTML 表单。 | |
定义框架集的窗口或框架。 | |
定义框架集。 | |
定义 HTML 标题。 | |
定义关于文档的信息。 | |
定义 section 或 page 的页眉。 | |
定义水平线。 | |
定义 HTML 文档。 | |
定义斜体字。 | |
定义内联框架。 | |
定义图像。 | |
定义输入控件。 | |
定义被插入文本。 | |
<isindex> | 不赞成使用。定义与文档相关的可搜索索引。 |
定义键盘文本。 | |
定义生成密钥。 | |
定义 input 元素的标注。 | |
定义 fieldset 元素的标题。 | |
定义列表的项目。 | |
定义文档与外部资源的关系。 | |
定义图像映射。 | |
定义有记号的文本。 | |
定义命令的列表或菜单。 | |
定义用户可以从弹出菜单调用的命令/菜单项目。 | |
定义关于 HTML 文档的元信息。 | |
定义预定义范围内的度量。 | |
定义导航链接。 | |
定义针对不支持框架的用户的替代内容。 | |
定义针对不支持客户端脚本的用户的替代内容。 | |
定义内嵌对象。 | |
定义有序列表。 | |
定义选择列表中相关选项的组合。 | |
定义选择列表中的选项。 | |
定义输出的一些类型。 | |
定义段落。 | |
定义对象的参数。 | |
定义预格式文本。 | |
定义任何类型的任务的进度。 | |
定义短的引用。 | |
定义若浏览器不支持 ruby 元素显示的内容。 | |
定义 ruby 注释的解释。 | |
定义 ruby 注释。 | |
不赞成使用。定义加删除线的文本。 | |
定义计算机代码样本。 | |
定义客户端脚本。 | |
定义 section。 | |
定义选择列表(下拉列表)。 | |
定义小号文本。 | |
定义媒介源。 | |
定义文档中的节。 | |
不赞成使用。定义加删除线文本。 | |
定义强调文本。 | |
定义文档的样式信息。 | |
定义下标文本。 | |
为 <details> 元素定义可见的标题。 | |
定义上标文本。 | |
定义表格。 | |
定义表格中的主体内容。 | |
定义表格中的单元。 | |
定义多行的文本输入控件。 | |
定义表格中的表注内容(脚注)。 | |
定义表格中的表头单元格。 | |
定义表格中的表头内容。 | |
定义日期/时间。 | |
定义文档的标题。 | |
定义表格中的行。 | |
定义用在媒体播放器中的文本轨道。 | |
定义打字机文本。 | |
不赞成使用。定义下划线文本。 | |
定义无序列表。 | |
定义文本的变量部分。 | |
定义视频。 | |
定义可能的换行符。 | |
<xmp> | 不赞成使用。定义预格式文本。 |
按功能类别排列
New : HTML5 中的新标签。
基础
标签 | 描述 |
定义文档类型。 | |
定义 HTML 文档。 | |
定义文档的标题。 | |
定义文档的主体。 | |
定义 HTML 标题。 | |
定义段落。 | |
定义简单的折行。 | |
定义水平线。 | |
定义注释。 |
格式
标签 | 描述 |
定义只取首字母的缩写。 | |
定义缩写。 | |
定义文档作者或拥有者的联系信息。 | |
定义粗体文本。 | |
定义文本的文本方向,使其脱离其周围文本的方向设置。 | |
定义文字方向。 | |
定义大号文本。 | |
定义长的引用。 | |
不赞成使用。定义居中文本。 | |
定义引用(citation)。 | |
定义计算机代码文本。 | |
定义被删除文本。 | |
定义定义项目。 | |
定义强调文本。 | |
不赞成使用。定义文本的字体、尺寸和颜色 | |
定义斜体文本。 | |
定义被插入文本。 | |
定义键盘文本。 | |
定义有记号的文本。 | |
定义预定义范围内的度量。 | |
定义预格式文本。 | |
定义任何类型的任务的进度。 | |
定义短的引用。 | |
定义若浏览器不支持 ruby 元素显示的内容。 | |
定义 ruby 注释的解释。 | |
定义 ruby 注释。 | |
不赞成使用。定义加删除线的文本。 | |
定义计算机代码样本。 | |
定义小号文本。 | |
不赞成使用。定义加删除线文本。 | |
定义语气更为强烈的强调文本。 | |
定义上标文本。 | |
定义下标文本。 | |
定义日期/时间。 | |
定义打字机文本。 | |
不赞成使用。定义下划线文本。 | |
定义文本的变量部分。 | |
定义可能的换行符。 |
表单
标签 | 描述 |
定义供用户输入的 HTML 表单。 | |
定义输入控件。 | |
定义多行的文本输入控件。 | |
定义按钮。 | |
定义选择列表(下拉列表)。 | |
定义选择列表中相关选项的组合。 | |
定义选择列表中的选项。 | |
定义 input 元素的标注。 | |
定义围绕表单中元素的边框。 | |
定义 fieldset 元素的标题。 | |
<isindex> | 不赞成使用。定义与文档相关的可搜索索引。 |
定义下拉列表。 | |
定义生成密钥。 | |
定义输出的一些类型。 |
框架
标签 | 描述 |
定义框架集的窗口或框架。 | |
定义框架集。 | |
定义针对不支持框架的用户的替代内容。 | |
定义内联框架。 |
图像
标签 | 描述 |
定义图像。 | |
定义图像映射。 | |
定义图像地图内部的区域。 | |
定义图形。 | |
定义 figure 元素的标题。 | |
定义媒介内容的分组,以及它们的标题。 |
音频/视频
标签 | 描述 |
定义声音内容。 | |
定义媒介源。 | |
定义用在媒体播放器中的文本轨道。 | |
定义视频。 |
链接
标签 | 描述 |
定义锚。 | |
定义文档与外部资源的关系。 | |
定义导航链接。 |
列表
标签 | 描述 |
定义无序列表。 | |
定义有序列表。 | |
定义列表的项目。 | |
不赞成使用。定义目录列表。 | |
定义定义列表。 | |
定义定义列表中的项目。 | |
定义定义列表中项目的描述。 | |
定义命令的菜单/列表。 | |
定义用户可以从弹出菜单调用的命令/菜单项目。 | |
定义命令按钮。 |
表格
标签 | 描述 |
定义表格 | |
定义表格标题。 | |
定义表格中的表头单元格。 | |
定义表格中的行。 | |
定义表格中的单元。 | |
定义表格中的表头内容。 | |
定义表格中的主体内容。 | |
定义表格中的表注内容(脚注)。 | |
定义表格中一个或多个列的属性值。 | |
定义表格中供格式化的列组。 |
样式/节
标签 | 描述 |
定义文档的样式信息。 | |
定义文档中的节。 | |
定义文档中的节。 | |
定义 section 或 page 的页眉。 | |
定义 section 或 page 的页脚。 | |
定义 section。 | |
定义文章。 | |
定义页面内容之外的内容。 | |
定义元素的细节。 | |
定义对话框或窗口。 | |
为 <details> 元素定义可见的标题。 |
元信息
标签 | 描述 |
定义关于文档的信息。 | |
定义关于 HTML 文档的元信息。 | |
定义页面中所有链接的默认地址或默认目标。 | |
不赞成使用。定义页面中文本的默认字体、颜色或尺寸。 |
编程
标签 | 描述 |
定义客户端脚本。 | |
定义针对不支持客户端脚本的用户的替代内容。 | |
不赞成使用。定义嵌入的 applet。 | |
为外部应用程序(非 HTML)定义容器。 | |
定义嵌入的对象。 | |
定义对象的参数。 |
HTML 全局属性
= HTML5 中添加的属性。
属性 | 描述 |
规定激活元素的快捷键。 | |
规定元素的一个或多个类名(引用样式表中的类)。 | |
规定元素内容是否可编辑。 | |
规定元素的上下文菜单。上下文菜单在用户点击元素时显示。 | |
用于存储页面或应用程序的私有定制数据。 | |
规定元素中内容的文本方向。 | |
规定元素是否可拖动。 | |
规定在拖动被拖动数据时是否进行复制、移动或链接。 | |
规定元素仍未或不再相关。 | |
规定元素的唯一 id。 | |
规定元素内容的语言。 | |
规定是否对元素进行拼写和语法检查。 | |
规定元素的行内 CSS 样式。 | |
规定元素的 tab 键次序。 | |
规定有关元素的额外信息。 | |
规定是否应该翻译元素内容 |
HTML 5 视频/音频参考手册
HTML5 Audio/Video 方法
方法 | 描述 |
向音频/视频添加新的文本轨道 | |
检测浏览器是否能播放指定的音频/视频类型 | |
重新加载音频/视频元素 | |
开始播放音频/视频 | |
暂停当前播放的音频/视频 |
HTML5 Audio/Video 属性
属性 | 描述 |
返回表示可用音轨的 AudioTrackList 对象 | |
设置或返回是否在加载完成后随即播放音频/视频 | |
返回表示音频/视频已缓冲部分的 TimeRanges 对象 | |
返回表示音频/视频当前媒体控制器的 MediaController 对象 | |
设置或返回音频/视频是否显示控件(比如播放/暂停等) | |
crossOrigin | 设置或返回音频/视频的 CORS 设置 |
返回当前音频/视频的 URL | |
设置或返回音频/视频中的当前播放位置(以秒计) | |
设置或返回音频/视频默认是否静音 | |
设置或返回音频/视频的默认播放速度 | |
返回当前音频/视频的长度(以秒计) | |
返回音频/视频的播放是否已结束 | |
返回表示音频/视频错误状态的 MediaError 对象 | |
设置或返回音频/视频是否应在结束时重新播放 | |
设置或返回音频/视频所属的组合(用于连接多个音频/视频元素) | |
设置或返回音频/视频是否静音 | |
返回音频/视频的当前网络状态 | |
设置或返回音频/视频是否暂停 | |
设置或返回音频/视频播放的速度 | |
返回表示音频/视频已播放部分的 TimeRanges 对象 | |
设置或返回音频/视频是否应该在页面加载后进行加载 | |
返回音频/视频当前的就绪状态 | |
返回表示音频/视频可寻址部分的 TimeRanges 对象 | |
返回用户是否正在音频/视频中进行查找 | |
设置或返回音频/视频元素的当前来源 | |
返回表示当前时间偏移的 Date 对象 | |
返回表示可用文本轨道的 TextTrackList 对象 | |
返回表示可用视频轨道的 VideoTrackList 对象 | |
设置或返回音频/视频的音量 |
HTML5 Audio/Video 事件
事件 | 描述 |
abort | 当音频/视频的加载已放弃时 |
当浏览器可以播放音频/视频时 | |
当浏览器可在不因缓冲而停顿的情况下进行播放时 | |
当音频/视频的时长已更改时 | |
emptied | 当目前的播放列表为空时 |
ended | 当目前的播放列表已结束时 |
error | 当在音频/视频加载期间发生错误时 |
当浏览器已加载音频/视频的当前帧时 | |
当浏览器已加载音频/视频的元数据时 | |
当浏览器开始查找音频/视频时 | |
pause | 当音频/视频已暂停时 |
play | 当音频/视频已开始或不再暂停时 |
playing | 当音频/视频在已因缓冲而暂停或停止后已就绪时 |
当浏览器正在下载音频/视频时 | |
ratechange | 当音频/视频的播放速度已更改时 |
seeked | 当用户已移动/跳跃到音频/视频中的新位置时 |
seeking | 当用户开始移动/跳跃到音频/视频中的新位置时 |
stalled | 当浏览器尝试获取媒体数据,但数据不可用时 |
suspend | 当浏览器刻意不获取媒体数据时 |
timeupdate | 当目前的播放位置已更改时 |
volumechange | 当音量已更改时 |
waiting | 当视频由于需要缓冲下一帧而停止 |