HTML5实战与剖析之表单那些事儿
2014-04-20 22:49
253 查看
转自:http://www.2cto.com/kf/201402/279077.html
HTML5针对表单方面也做了一些完善,新添加了一些验证数据的功能,新添加了一些标签属性。有了这些验证功能,就可以不用JavaScript进行验证,哪怕是JavaScript被禁用了也可以毫无压力的验证表单了。开发人员不用JavaScript,浏览器会根据标记中的规则执行验证,然后显示适当的错误信息。这些人性化的功能在支持HTML5的浏览器中才能有效,支持的浏览器有Opera
10+、Safari 5+、Chrome和Firefox 4+。
HTML5新添加的表单功能有:其他输入类型、输入模式、数值范围、必填字段、禁用验证和检测有效性。下面我们将对这几个功能进行详细展开介绍。
email : 电子邮箱文本框,跟普通的没什么区别,当输入不是邮箱的时候,验证通不过。移动端的键盘会有变化
tel : 电话号码
url : 网页的URL
search : 搜索引擎。chrome下输入文字后,会多出一个关闭的X
range : 特定范围内的数值选择器,min、max、step( 步数 )
number : 只能包含数字的输入框
color : 颜色选择器
datetime : 显示完整日期
datetime-local : 显示完整日期,不含时区
time : 显示时间,不含时区
date : 显示日期
week : 显示周
month : 显示月
小例子HTML代码
?
HTML代码
?
Chrome预览效果
HTML代码
?
JavaScript代码
?
对于空着的必填字段,不同浏览器的处理方式不同。Opera 11和Firefox 4会阻止表单提交病在相应字段下面弹出帮助框,Chrome(9之前)和Safari(5之前)则什么都不做也不阻止表单提交。小例子如下
HTML代码
?
JavaScript代码
?
HTML代码
?
valueMissing : 输入值为空时
typeMismatch : 控件值与预期类型不匹配
patternMismatch : 输入值不满足pattern正则
tooLong : 超过maxLength最大限制
rangeUnderflow : 验证的range最小值
rangeOverflow:验证的range最大值
stepMismatch: 验证range 的当前值 是否符合min、max及step的规则
customError: 不符合自定义验证,是否设置setCustomValidity(); 自定义验证
placeholder : 输入框提示信息
autocomplete : 是否保存用户输入值。默认为on,关闭提示选择off
autofocus : 指定表单获取输入焦点
list和datalist : 为输入框构造一个选择列表。list值为datalist标签的id
Formaction : 在submit里定义提交地址
小例子JavaScript代码
?
HTML5实战与剖析之表单那些事儿就为大家介绍到这里,有了表单自行验证,JavaScript的工序又会变得少之又少,对开发人员来说真是件没事儿。更多有关HTML5的相关内容尽在梦龙小站,欢迎大家关注哟。
HTML5针对表单方面也做了一些完善,新添加了一些验证数据的功能,新添加了一些标签属性。有了这些验证功能,就可以不用JavaScript进行验证,哪怕是JavaScript被禁用了也可以毫无压力的验证表单了。开发人员不用JavaScript,浏览器会根据标记中的规则执行验证,然后显示适当的错误信息。这些人性化的功能在支持HTML5的浏览器中才能有效,支持的浏览器有Opera
10+、Safari 5+、Chrome和Firefox 4+。
HTML5新添加的表单功能有:其他输入类型、输入模式、数值范围、必填字段、禁用验证和检测有效性。下面我们将对这几个功能进行详细展开介绍。
1、其他输入类型
说到输入类型,大家很快的就会想到input标签。只有input标签才可以规定不同的类型。HTML5恰恰就是在input中的type属性添加了一些新的属性值。这些新的属性值不仅可以反映数据类型的信息,还可以提供一些默认的验证功能。其中,”email”和”url”是两个得到支持最多的类型,各浏览器也为它们增加了定制的验证机制。新添加的类型如下email : 电子邮箱文本框,跟普通的没什么区别,当输入不是邮箱的时候,验证通不过。移动端的键盘会有变化
tel : 电话号码
url : 网页的URL
search : 搜索引擎。chrome下输入文字后,会多出一个关闭的X
range : 特定范围内的数值选择器,min、max、step( 步数 )
number : 只能包含数字的输入框
color : 颜色选择器
datetime : 显示完整日期
datetime-local : 显示完整日期,不含时区
time : 显示时间,不含时区
date : 显示日期
week : 显示周
month : 显示月
小例子HTML代码
?
2、输入模式
HTML5不仅新添加了一些新的输入类型,还添加了新的属性——patten属性。Patten属性的值是一个正则表达式,是用于匹配文本框中的值。在写正则的时候要注意,开头和结尾不用加^和$符号(假定已经有了)。这两个符号表示输入的值必须是从头到尾与模式匹配。小例子如下HTML代码
?
3、数值范围
除了”email”和”url”,HTML5还定义了另外几个输入元素。这几个元素都要求填写某种基于数字的值。但是浏览器对这些新添加的值兼容性并不是很好。所以对这些数值类型的输入元素,可以指定min属性(最小的可能值)、max属性(最大的可能值)和step属性(从min到max的两个刻度之间的差值)。小例子如下HTML代码
?
?
4、必填字段
在表单字段中指定required属性,即可提示用户这是为必填项不能为空。这个属性适用于input标签,textarea标签,select标签(Opera 12+支持)。在JavaScript中通过对于的required属性,可以检测表单是否为必填项。对于空着的必填字段,不同浏览器的处理方式不同。Opera 11和Firefox 4会阻止表单提交病在相应字段下面弹出帮助框,Chrome(9之前)和Safari(5之前)则什么都不做也不阻止表单提交。小例子如下
HTML代码
?
?
5、禁用验证
通过在form标签中添加novalidate属性,可以让表单不自行验证。JavaScript中可以使用novalidate获取,若存在则是true,反之则是false。如果提交按钮有多个,为了指定点击某一个提交按钮不必验证表单,可以在相应的按钮上添加formnovalidate属性。也可用JavaScript添加禁用验证的属性。小例子如下HTML代码
?
6、检测有效性,及新添属性和方法
在JavaScript中使用checkValidity()方法可以检测表单中的某个字段是否有效。所有表单字段都有这个方法,如果字段的值是有效的,这份方法会返回true,否则则是false。与checkValidity()方法相比,validity属性可以告诉你很多东西。valueMissing : 输入值为空时
typeMismatch : 控件值与预期类型不匹配
patternMismatch : 输入值不满足pattern正则
tooLong : 超过maxLength最大限制
rangeUnderflow : 验证的range最小值
rangeOverflow:验证的range最大值
stepMismatch: 验证range 的当前值 是否符合min、max及step的规则
customError: 不符合自定义验证,是否设置setCustomValidity(); 自定义验证
placeholder : 输入框提示信息
autocomplete : 是否保存用户输入值。默认为on,关闭提示选择off
autofocus : 指定表单获取输入焦点
list和datalist : 为输入框构造一个选择列表。list值为datalist标签的id
Formaction : 在submit里定义提交地址
小例子JavaScript代码
?
相关文章推荐
- HTML5实战与剖析之表单——文本框脚本
- HTML5实战与剖析之HTMLDocument变化(readyreState属性、兼容模式和head属性)
- HTML5实战与剖析之原生拖拽(三dataTransfer对象)
- HTML5实战应用:如何让表单验证更友好
- HTML5实战与剖析之是否从主屏幕图标进入的网站
- HTML5实战与剖析之媒体元素(1、video标签和audio标签简介)
- (转)HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)
- HTML语言剖析8:表单标记
- HTML5实战与剖析之判断移动端横屏竖屏功能
- HTML5实战与剖析之媒体元素(5、音频实例)
- HTML5实战与剖析之媒体元素(1、video标签和audio标签简介)
- HTML5实战与剖析之原生拖拽(二拖拽事件dragstart、drag和dragend)
- HTML5实战与剖析之CSS选择器——querySelector()
- HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)
- HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)
- HTML5实战与剖析之原生拖拽(一拖拽历史概述)
- HTML5实战与剖析之媒体元素
- HTML5实战与剖析之剪贴板事件
- HTML5实战与剖析之判断移动端横屏竖屏功能
- HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)