1.HTML5表单新特性
(1)新的input type
(2)新的表单标签
(3)表单标签的新属性
2.html5表单新特性之---新的input type
<input type="">
HTML5之前已有的input type:
text,password,radio,checkbox,file,submit,reset,button,image,hidden
HTML5新增加的input type:
(1)email:邮件输入域,在表单提交时提供简单的邮箱格式验证,并弹出一个提示窗口(可定制内容不能定制样式)
<input type="email">
(2)url:URL地址输入域,在表单提交时提供简单的URL地址格式验证,并弹出一个提示窗口(可定制内容不能定制样式)
<input type="url">
(3)number:数字输入域,在表单提交时提供简单的数字格式验证,并弹出一个提示窗口(可定制内容不能定制样式)
<input type="number" min="" max="" step="">
(4)tel:电话号码输入域,在手机浏览器中弹出数字输入键盘
<input type="tel">
(5)search:搜索输入域,在手机浏览器中右下角呈现搜索按键
<input type="search">
(6)range:范围选择控件,帮助用户在一定范围内选择一个数字
<input type="range" min="" max="" step="">
(7)color:颜色选择控件,浏览器并未自己实现颜色选择框,而是使用操作系统自带的颜色选择控件
<input type="color">
(8)date:日期选择控件,火狐浏览器没有实现,推荐使用第三方插件代替,如jqueryUI-datepicker,laydate等
<input type="date">
(9)month:月份选择控件,火狐浏览器没有实现
<input type="month">
(10)week:星期选择控件,火狐浏览器没有实现
<input type="week">
3.HTML5新特性之表单新特性---新的表单元素
HTML5之前form可以有的标签---用于数据提交;
input,textarea,select/option.button
HTML5新增表单元素---用于提示,不能用于数据提交:
(1)datalist:数据列表,配合option使用,本身为不可见元素,为普通的input提供输入建议
<datalist id="l"><option >xxx</option></datalist>
<input list="l">
(2)progress:进度条,未指定value属性则显示为"进行中"样式;若指定了value(默认在0和1之间)就可以控制其显示的进度
<progress value="0.5"></progress>
(3)meter:刻度尺/度量衡,用红黄绿三色表示出一个值所处的最优范围:不可接受/可以接受/最有范围
<meter min="最小可能值" max="最大的可能值" low="合理的下限" high="合理的上限" optimum="最优值" value="实际值"></meter>
(4)output:输出,用于描述表单中的计算结果,语义标签,样式与span无异
<output>xxx</output>
4.HTML5新特性表单新特性---表单元素新的属性---重点
HTML5之前表单元素可用的属性:
id,class,title,style,name,value,checked,selected,disabled,readonly
HTML5之后表单元素新增的属性:
(1)autocomplete:on/off,自动补全,是否自动记录之前提交的数据,以用于下一次输入建议
<input autocomplete="off">
(2)placeholder:占位符,用于在输入框中显示提示性文字,与value不同,不能被提交
<input placeholder="提示性文字">
(3)autofocus:false/true,自动获得焦点
<input autofocus>
(4)multiple:false/true,是否允许多个输入值,若声明了该属性,输入框中(如email)就允许输入用逗号分隔的多个值
<input type="email" multiple>
(5)form:为一个元素指定form属性,值为某个表单的id,则此输入域可以放到表单的外部
<form id="f"></form>
<input form="f">
---------------------上述五个是新的通用属性------------------------------
---------------------下面六个属性是输入验证的相关属性------------------
(6)required:false/true,必须的/必填项,在表单提交时会验证是否有输入,没有输入则弹出提示消息
<input required>
(7)maxlength:最大长度,在有输入的情况下,限定输入域中字符的个数
<input maxlength="9">
(8)minlength:最小长度,在有输入的情况下,限定输入域中字符的个数,不是HTML5标准属性,仅部分浏览器支持(如Chrome)
<input minlength="3">
(9)min:限定输入的数字的最小值
<input max="">
(10)max:限定输入的数字的最大值
<input min="">
(11)step:限定输入的数字的步长,与min属性连用
<input step="">
(12)pattern:指定一个正则表达式,对输入进行验证,正则表达式可以省略^和$
<input pattern="">
5.如何定制表单2.0中的错误提示消息内容---难点
HTML5位每个标签对应的js对象添加了新属性,:
input.validity{
badInput:false,无效的输入,如email输入无效
typeMismatch:false,类型不匹配,如number中出现字符
valueMissing:false,值缺失,如required验证失败
tooLong:false,输入的内容超过maxlength限制
tooShort:false,输入的内容不满足minlength
rangeOverflow:false,输入的数字超过max
rangeUnderflow:false,输入的数字不满足min
stepMismatch:false,步长不匹配
patternMismatch:false,正则表达式不匹配
customError:false,是否存在自定义错误
valid:true,输入值是否有效
}
注意:
(1)最后的validity.valid属性,只有其他属性都为false(没有任何错误),valid值为true;否则只要任何一个其他属性为true(说明有某方面的错误),valid值为false
(2)上述属性的值会随着输入域中值的改变而立即改变,无需等到表单提交
(3)使用input.setCustomValidity('xxx')可以生成一个自定义错误消息,使得validity.customError属性变为true;若执行input.setCustomValidity('')可以删除自定义错误信息,使得validity.customError属性变为false
(4)自定义错误消息的优先级高于任何系统自带的错误消息优先级