一、增型表单标签
HTML5中,新标准把文本框提示信息、表单校验、日期选择控件、颜色选择控件、范围控件、进度条、标签跨表单等功能直接加入新的表单标签中。 但在众多现代浏览器中,最新版本的Opera浏览器对新型表单的支持才最为完美。
Number类型input标签
name:标识表单提交时的key值min:标识当前输入框输入的最小值max:标识当前输入框输入的最大值step:标识点击增大/减小的时候,增加/减小的步长
Email类型input标签
当表单在提交前,此文本框会自动校验是否符合邮箱的正则表达式。
URL类型的input标签
Tel类型的input标签
range类型的input标签
此类型标签的加入,输入范围内的数据变得非常简单容易,而且非常标准,用户输入可感知体验非常好。另外此标签可以跟表单新增加的output标签一块使用,达到一个联动的效果。
0
新的日期、时间、月份、星期input标签
Web项目开发,一定会遇到相关的js日期控件,在HTML5中新加入的表单属性将会使Web开发变得更加简洁。
相关的日期属性还包括:month、time、week、datetime-local、datetime。
颜色选择input标签
input标签自动完成功能
有的项目会要求实现自动完成或者输入提示功能,在HTML5的支持下将变得简单。
二、HTML5表单新属性
1、 input表单新增加的特有属性
autofocus:属性,demo:此属性可以设置当前页面中input标签加载完毕后获得焦点。
max、min、step:这些上面介绍过,都是跟数字相关。
placeholder:提示信息属性。
multiple:用于文件上传控件,设置此属性后,允许多个文件。
required:校验属性。设置了required属性后预示着当前文本框在提交前必须有数据输入,而这一切都是由浏览器自动完成。还添加了pattern正则表达式校验:
form:另外一个较大的改进就是增加了form属性,也就是说,任何一个标签都可以指定它所属于一个表单,而不是必须在其中进行包裹了。
2、 form表单新增加的属性
novalidate:属性规定在提交表单时不应该验证form或input域。
autocomplete:属性规定form或input域应该拥有自动完成功能。
三、综合实例
表单演示:最新Opera浏览器支持效果良好
日期:
颜色:
0
表单外的input标签: