HTML5的一个重要特性就是对表单的改进。过去,我们常常需要花费很多额外的时间,编写JavaScript 以增强表单行为。例如,要求访问者提交表单之前必须填写某个字段。HTML5通过引入新的表单元素、输入类型和属性,以及内置的对必填字段、电子邮件地址、URL 以及定制模式的验证,让这一切变得很轻松。这些特性不光帮助了设计人员和开发人员,也让网站访问者的体验有了很大的提升。
更妙的是,不支持这些新特性的旧版浏览器也不会出太大的问题。它们会直接忽略这些无法理解的属性,表单里的输入框也会正常显示。如果希望它们拥有HTML5 行为,可以使用JavaScript 进行兼容,以实现优雅回退。
HTML5新增输入型表单控件如下:
- 电子邮件框:<input type="email">。
- 搜索框:<input type="search">。
- 电话框:<input type="tel">。
- URL框:<input type="url">。
以下控件得到了部分浏览器的支持,更多信息参见www.wufoo.com/html5。
- 日期:<input type="date">,浏览器支持:https://caniuse.com/#feat=input-datetime。
- 数字:<input type="number">,浏览器支持:https://caniuse.com/#feat=input-number。
- 范围:<input type="range">,浏览器支持:https://caniuse.com/#feat=input-range。
- 数据列表:<input type="text" name="favfruit" list="fruit" />
<datalist id="fruit"> <option>备选列表项目1</option> <option>备选列表项目2</option> <option>备选列表项目3</option> </datalist>
下面控件或者元素在最终规范出来之前争议较大,浏览器厂商对其支持也不统一,W3C曾经指出它们在2014年定案之时很可能不会列入HTML5,但是最终还是相互妥协,保留了下来。
- 颜色:<input type="color" />。
- 全局日期和时间:<input type="datetime" />。
- 局部日期和时间:<input type="datetime-local" />。
- 月:<input type="month" />。
- 时间:<input type="time" />。
- 周:<input type="week" />。
- 输出:<output></output>。
HTMl5新增的表单属性如下:
- accept:限制用户可上传文件的类型。
- autocomplete:如果对form 元素或特定的字段添加autocomplete="off",就会关闭浏览器的对该表单或该字段的自动填写功能。默认值为on。
- autofocus:页面加载后将焦点放到该字段。
- multiple:允许输入多个电子邮件地址,或者上传多个文件。
- list:将datalist与input联系起来。
- maxlength:指定textarea的最大字符数,在HTML5之前的文本框就支持该特性。
- pattern:定义一个用户所输入的文本在提交之前必须遵循的模式。
- placeholder:指定一个出现在文本框中的提示文本,用户开始输入后该文本消失。
- required:需要访问者在提交表单之前必须完成该字段。
- formnovalidate:关闭HTML5 的自动验证功能。应用于提交按钮。
- novalidate:关闭HTML5 的自动验证功能。应用于表单元素。
【提示】
对于浏览器支持信息,https://caniuse.com/上的信息通常比www.wufoo.com/html5上的更新一些,不过后者仍然是有关HTML5表单信息的一个重要资源。
那些有可能不会成为HTML5一部分的表单元素,也有可能被收录到HTML5.1的最终版本。Ryan Seddon的H5F(https://github.com/ryanseddon/H5F)可以为旧的浏览器提供模仿HTML5 表单行为的JavaScript方案。