认识HTML5表单

课后整理 2020-12-8

HTML5的一个重要特性就是对表单的改进。过去,我们常常需要花费很多额外的时间,编写JavaScript 以增强表单行为。例如,要求访问者提交表单之前必须填写某个字段。HTML5通过引入新的表单元素、输入类型和属性,以及内置的对必填字段、电子邮件地址、URL 以及定制模式的验证,让这一切变得很轻松。这些特性不光帮助了设计人员和开发人员,也让网站访问者的体验有了很大的提升。

更妙的是,不支持这些新特性的旧版浏览器也不会出太大的问题。它们会直接忽略这些无法理解的属性,表单里的输入框也会正常显示。如果希望它们拥有HTML5 行为,可以使用JavaScript 进行兼容,以实现优雅回退。

HTML5新增输入型表单控件如下:

以下控件得到了部分浏览器的支持,更多信息参见www.wufoo.com/html5

<datalist  id="fruit">
    <option>备选列表项目1</option>
    <option>备选列表项目2</option>
    <option>备选列表项目3</option>
</datalist>

下面控件或者元素在最终规范出来之前争议较大,浏览器厂商对其支持也不统一,W3C曾经指出它们在2014年定案之时很可能不会列入HTML5,但是最终还是相互妥协,保留了下来。

HTMl5新增的表单属性如下:

【提示】

对于浏览器支持信息,https://caniuse.com/上的信息通常比www.wufoo.com/html5上的更新一些,不过后者仍然是有关HTML5表单信息的一个重要资源。

那些有可能不会成为HTML5一部分的表单元素,也有可能被收录到HTML5.1的最终版本。Ryan Seddon的H5F(https://github.com/ryanseddon/H5F)可以为旧的浏览器提供模仿HTML5 表单行为的JavaScript方案。