HTML5对表单的加强

表单(数据提交)一直是业务系统的核心功能之一。HTML5为表单增加了一些新的功能和属性。本文以几种重要控件为例,介绍这些新特性。本文使用Firefox52浏览器。

验证功能加强

required

指定此属性的表单字段为必填。注意,该功能不是自己的JavaScript代码实现的,而是浏览器内置实现的。

例子

<form>
  <input type="text" required="true" name="username">
  <input type="submit" value="submit">
</form>

当什么都不写就提交表单时,运行状况如下:

pattern

正则表达式匹配。

例子

<input type="text" required="true" pattern="^[0-9]*$" name="username">

当输入项和正则表达式不匹配时,浏览器上会显示:请匹配要求的格式。

maxLength

使用该属性时,该控件输入不能超过指定值。(超过就不能继续输入了)

例子

<input type="text" maxLength="5" name="username">

控件自带的正则匹配

比如Email控件(type="email"),如果输入不是邮箱格式,则不允许提交,和使用一个正则表达式的text功能相同。

novalidate

此属性可以放到表单上,或者控件元素上,加上novalidate的元素在表达提交时,不会自动验证。

额外属性

placeholder

占位符。十分常用的属性。

autocomplete

浏览器是否缓存以前输入过的值作为自动完成的下拉菜单。不是很实用。

autofocus

加载页面后自动获得焦点。每个页面只能指定一个autofocus。由于和placeholder有点冲突,因此不是很实用。

datalist控件

新的标签<datalist>可以提供输入的备选项,我们可以通过ajax的方式动态加载选项,达到边输入边搜索的目的。

<input type="url" name="url" required list="url_list">
<datalist id="url_list">
  <option label="Google" value="https://www.google.com">
  <option label="Baidu" value="https://www.baidu.com">
  <option label="Github" value="https://www.github.com">
</datalist>

作者:Gacfox
版权声明:本网站为非盈利性质,文章如非特殊说明均为原创,版权遵循知识共享协议CC BY-NC-ND 4.0进行授权,转载必须署名,禁止用于商业目的或演绎修改后转载。
Copyright © 2017-2024 Gacfox All Rights Reserved.
Build with NextJS | Sitemap