增强型表单标签 2.1 增型表单标签 HTML5中，新标准把文本框提示信息、表单校验、日期选择控件、颜色选择控件、范围控件、进度条、标签跨表单等功能直接加入新的表单标签中。但在众多现代浏览器中，最新版本的Opera浏览器对新型表单的支持才最为完美。 2.1.1 Number类型input标签 ![图片描述](https://dn-simplecloud.shiyanlou.com/uid/389283/1522675078388.png-wm) name: 标识表单提交时的key值 min: 标识当前输入框输入的最小值 max: 标识当前输入框输入的最大值 step: 标识点击增大/减小的时候，增加/减小的步长 2.1.2 Email类型input标签 ![图片描述](https://dn-simplecloud.shiyanlou.com/uid/389283/1522675313545.png-wm) 2.1.3 URL类型的input标签 ![图片描述](https://dn-simplecloud.shiyanlou.com/uid/389283/1522675418958.png-wm) 2.1.4 Tel类型的input标签 ![图片描述](https://dn-simplecloud.shiyanlou.com/uid/389283/1522675538002.png-wm) 2.1.5 range类型的input标签此类型标签的加入，输入范围内的数据变得非常简单容易，而且非常标准，用户输入可感知体验非常好。另外此标签可以跟表单新增加的output标签一块使用，达到一个联动的效果。 ![图片描述](https://dn-simplecloud.shiyanlou.com/uid/389283/1522675666274.png-wm) 2.1.6 新的日期、时间、月份、星期input标签 Web项目开发，一定会遇到相关的js日期控件，在HTML5中新加入的表单属性将会使Web开发变得更加简洁。 ![图片描述](https://dn-simplecloud.shiyanlou.com/uid/389283/1522675761839.png-wm) 相关的日期属性还包括：month、time、week、datetime-local、datetime 2.1.7 颜色选择input标签 ![图片描述](https://dn-simplecloud.shiyanlou.com/uid/389283/1522675826821.png-wm) 2.1.8 input标签自动完成功能有的项目会要求实现自动完成或者输入提示功能，在HTML5的支持下将变得简单。 ![图片描述](https://dn-simplecloud.shiyanlou.com/uid/389283/1522676111468.png-wm) 2.2 HTML5表单新属性 2.2.1 input表单新增加的特有属性 autofocus属性，demo:此属性可以设置当前页面中input标签加载完毕后获得焦点。 max、min、step：这些上面介绍过，都是跟数字相关。 placeholder：提示信息属性。 multiple：用于文件上传控件，设置此属性后，允许多个文件。校验属性：设置了required属性后预示着当前文本框在提交前必须有数据输入，而这一切都是由浏览器自动完成。还添加了pattern正则表达式校验： ![图片描述](https://dn-simplecloud.shiyanlou.com/uid/389283/1522676334671.png-wm) 另外一个较大的改进就是增加了form属性，也就是说，任何一个标签都可以指定它所属于一个表单，而不是必须在中进行包裹了。 ![图片描述](https://dn-simplecloud.shiyanlou.com/uid/389283/1522676426566.png-wm) 2.2.2 form表单新增加的属性 novalidate属性规定在提交表单时不应该验证 form或input域 autocomplete属性规定form或input域应该拥有自动完成功能 ![图片描述](https://dn-simplecloud.shiyanlou.com/uid/389283/1522676552834.png-wm) 2.3 综合实例

表单演示：最新Opera浏览器支持效果良好表单外的input标签：

“HTML5基础入门”实验报告