HTML5 表单 新属性简介
对于HTML5新增的标签元素,我们已经做了了解;那么对于HTML5表单中所有标签元素来说,他们都有各自的属性来实现某些功能和行为,比如:input标签的type属性,用来标识input输入框是什么类型的输入框,不同的输入类型(type)表现的方式不同,text类型 为纯文本输入,file类型 为文件选择输入等等;对于HTML5来说,HTML5 的 <form> 和 <input>标签都添加了几个新属性:
- 新的 form 属性:
- 新的 input 属性:
- autocomplete
- autofocus
- form
- form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)
- height 和 width
- list
- min, max 和 step
- multiple
- pattern (regexp)
- placeholder
- required
HTML5 表单 新属性浏览器支持及兼容
标签属性 |
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 |
HTML5 表单 autocomplete 属性
概念及理解:autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。这里的自动完成表示 浏览器会搜索之前在此输入框中输入的内容进行匹配,也就是对输入框中的历史输入内容进行筛选和匹配来实现自动完成。
特性及注意事项:
- autocomplete 适用于 <form> 标签,以及以下类型的 <input> 标签:text, search, url, telephone, email, password, datepickers, range 以及 color。
- 在某些浏览器中,您可能需要启用自动完成功能,以使该属性生效。
- autocomplete 属性有可能在 form元素中是开启的,而在input元素中是关闭的。
如下实例,当用户在自动完成域中开始输入时,浏览器应该在该域中显示填写的选项:
<form action="/static/example/html5/form.php" method="get" autocomplete="on">
姓:<input type="text" name="fname" autocomplete="on" /><br />
名: <input type="text" name="lname" autocomplete="on" /><br />
电子邮件: <input type="email" name="email" autocomplete="off" /><br />
<input type="submit" />
</form>
执行一下
HTML5 表单 autofocus 属性
概念及理解:autofocus 属性规定了HTML标签在页面加载时,标签区域(输入控件、按钮等)会自动地获得焦点(光标停留在输入框中 或 光标移到某个按钮上)。
特性及注意事项:
- autofocus 属性适用于所有 <input> 标签的类型。
- autofocus 属性存在浏览器兼容,需要根据实际浏览器进行测试使用
<form action="/static/example/html5/form.php" method="get">
用户名称: <input type="text" name="user_name" autofocus="autofocus" />
<input type="submit" />
</form>
执行一下
HTML5 表单 form 属性
概念及理解:form 属性规定输入组件(输入域,表单组件:input、select等)所属的一个或多个表单(form表单)。也就是说我们可以把输入组件放到form标签的外面(之前我们都是将输入组件放到form标签中,不能放到form标签的外面),然后可以随意将这个输入组件关联到一个form标签中。
特性及注意事项:
- form 属性适用于所有 <input> 标签的类型。
- form 属性必须引用所属表单的 id。
- 如需引用一个以上的表单,请使用空格分隔的列表。
<form action="/static/example/html5/form.php" method="get" id="user_form">
姓:<input type="text" name="fname" />
<input type="submit" />
</form>
<p>下面的输入域在 form 元素之外,但仍然是表单的一部分。</p>
名: <input type="text" name="lname" form="user_form" />
执行一下
HTML5 表单重写属性 formaction、formmethod、formtarget等
概念及理解:
表单重写属性(form override attributes)允许您重写 form 标签元素的某些属性设定值,比如form标签的action属性、method属性、target属性等。在某些业务场景中想要改变提交的地址而又不想把原来的action属性值覆盖,则使用表单重写属性就可以很好的解决。表单重写属性有:
- formaction - 重写表单的 action 属性
- formenctype - 重写表单的 enctype 属性
- formmethod - 重写表单的 method 属性
- formnovalidate - 重写表单的 novalidate 属性
- formtarget - 重写表单的 target 属性
特性及注意事项:
- 表单重写属性适用于以下类型的 <input> 标签:submit 和 image。
- 这些属性对于创建不同的提交按钮很有帮助。
- 这些属性存在浏览器兼容问题,使用前请注意测试。
<form action="/static/example/html5/form.php" method="get" id="user_form">
电子邮件:<input type="email" name="user_email" /><br />
<input type="submit" value="提交" /><br />
<input type="submit" formaction="/static/example/form.php" value="使用formaction重写接口提交" /><br />
<input type="submit" formnovalidate="true" value="使用formnovalidate重写验证提交" /><br />
<input type="submit" formmethod="post" value="使用formmethod重写提交方式提交" /><br />
</form>
执行一下
HTML5 表单 height 和 width 属性
- height 和 width 属性规定用于 image 类型的 input 标签的图像高度和宽度。这里的 height 和 width 属性针对的是 输入组件 input,正常情况下大部分的HTML标签都有这两个属性,但是它们不适用于 input组件;也就是在HTML5之前这两个属性对 input无效。
- height 和 width 属性只适用于 image 类型的 <input> 标签。
- 我们通常会同时指定图像的高度和宽度属性,有利于浏览器的存储优化和好的浏览器页面布局兼容。如果图像设置了高度和宽度,图像所需的空间在浏览器加载页面时会被保留。如果没有宽高属性, 浏览器不知道图像的大小,并不能预留适当的空间。尽管图片已加载,图片在加载过程中也会使页面布局效果改变 。
<form action="/static/example/html5/form.php" method="get">
用户名:<input type="text" name="user_name" /><br />
<input type="image" src="/static/example/img/btn.png" width="99" height="99" />
</form>
执行一下
HTML5 表单 list 属性
- list 属性规定输入域的 datalist。datalist 是输入域的选项列表。
- list 属性适用于以下类型的 <input> 标签:text, search, url, telephone, email, date pickers, number, range 以及 color。
- Internet Explorer 9(更早 IE 版本),Safari 不支持 datalist 标签。
<form action="/static/example/html5/form.php" method="get">
网站URL地址: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3capi" value="http://www.w3capi.com" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>
<input type="submit" />
</form>
执行一下
HTML5 表单 min、max 和 step 属性
- min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定(约束)。
- max 属性规定输入域所允许的最大值。
- min 属性规定输入域所允许的最小值。
- step 属性为输入域规定合法的数字间隔(如果 step="3",则合法的数是 -3,0,3,6 等)。
- min、max 和 step 属性适用于以下类型的 <input> 标签:date pickers、number 以及 range。
- Internet Explorer 9及更早 IE 版本,Firefox 不支持 input 标签的 max 和 min 属性。
- 在 Internet Explorer 10中 max 和 min 属性不支持输入日期和时间,IE 10 不支持这些输入类型。
下面的例子包含:
- 显示一个数字域,该输入域接受介于 0 到 10 之间的值,且步进为 3(即合法的值为 0、3、6 和 9)
- 控制用户只能 输入 1980-01-01 之前的日期
- 控制用户只能 输入 2000-01-01 之后的日期
- 控制用户只能输入在1和5之间的数字
<form action="/static/example/html5/form.php" method="get">
输入0-10之间3的倍数:<input type="number" name="num" min="0" max="10" step="3"/><br/>
输入 1980-01-01 之前的日期:<input type="date" name="date1" max="1979-12-31"><br>
输入 2000-01-01 之后的日期:<input type="date" name="date2" min="2000-01-02"><br>
数量 (在1和5之间):<input type="number" name="quantity" min="1" max="5"><br>
<input type="submit" />
</form>
执行一下
HTML5 表单 multiple 属性
- multiple 属性规定输入域中可选择多个值。
- multiple 属性适用于以下类型的 <input> 标签:email 和 file。
- Internet Explorer 9及更早 IE 版本不支持 input 标签的 multiple 属性。
<form action="/static/example/html5/form.php" method="get">
请选择文件:<input type="file" name="imgs" multiple="multiple" />
请输入电子邮件:<input type="email" name="emails" multiple="multiple" />
<input type="submit" />
</form>
<p>当您浏览文件时,请试着选择多个文件。</p>
执行一下
HTML5 表单 novalidate 属性
- novalidate 属性规定在提交表单时不应该验证 form 或 input 域。
- novalidate 属性适用于 <form> 以及以下类型的 <input> 标签:text, search, url, telephone, email, password, date pickers, range 以及 color。
- 在 Safari 和 Internet Explorer 9 及之前的版本中不支持 novalidate 属性。
<form action="/static/example/html5/form.php" method="get" novalidate="novalidate">
电子邮件:<input type="email" name="user_email" />
<input type="submit" />
</form>
<p>当我们使用novalidate属性后,浏览器在提交数据时不会对电子邮件地址进行合法验证</p>
执行一下
HTML5 表单 pattern 属性
- pattern 属性规定用于验证 input 域的模式(pattern)。
- 模式(pattern) 是正则表达式。您可以在我们的 JavaScript 教程中学习到有关正则表达式的内容。
- pattern 属性适用于以下类型的 <input> 标签:text, search, url, telephone, email 以及 password。
- Internet Explorer 9及更早 IE 版本,或 Safari 不支持 input 标签的 pattern 属性。
下面的例子显示了一个只能包含三个字母的文本域(不含数字及特殊字符):
<form action="/static/example/html5/form.php" method="get">
国家代码:<input type="text" name="country_code" pattern="[A-z]{3}" title="三个字母的国家代码" />
<input type="submit" />
</form>
执行一下
HTML5 表单 placeholder 属性
- placeholder 属性提供一种提示(hint),描述输入域所期待的值。
- placeholder 属性适用于以下类型的 <input> 标签:text, search, url, telephone, email 以及 password。
- 提示(hint)会在输入域为空时显示出现,会在输入域获得焦点时消失。
- Internet Explorer 9及更早 IE 版本不支持 input 标签的 placeholder 属性。
<form action="/static/example/html5/form.php" method="get">
<input type="search" name="user_search" placeholder="输入内容在W3CAPI中搜索" />
<input type="submit" />
</form>
执行一下
HTML5 表单 required 属性
- required 属性规定必须在提交之前填写输入域(不能为空)。
- required 属性适用于以下类型的 <input> 标签:text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。
- Internet Explorer 9及更早 IE 版本,或 Safari 不支持 input 标签的 required 属性。
<form action="/static/example/html5/form.php" method="get">
用户名称:<input type="text" name="user_name" required="required" />
<input type="submit" />
</form>
<p>点击提交按钮,浏览器会提示用户名称必须填写。</p>
执行一下