1.回顾
1.1 form :表单 (提交数据)
属性:
- method:提交方式,常用get,post
- action:提交地址
- enctype:编码方式
1.2 表单元素
(1)input
- text:文本
- password:密码
- radio:单选框
- checkbox:复选框
- file:上传文件
- submit:提交按钮
- button:普通按钮
- reset:重置按钮
- image:图像按钮
- hidden:隐藏域
(2)select:下拉列表
<option>:定义选项
(3)textarea:多选文本域
2. HTML5新表单元素
- 电子邮件类型:
<input type="email">
- 搜索类型:
<input type="search">
- URL类型:
<input type="url">
- 电话号码类型:
<input type="tel">
(针对移动端) - 数字类型:
<input type="number">
(属性:min最小值,max最大值,step步长) - 范围类型:
<input type="range" min="10" max="1000" value="50">
(属性:min最小值,max最大值,step步长,value初始值) - 日期类型:
<input type="date">
- 周类型:
<input type="week">
- 月份类型:
<input type="month">
- 日期与时间:
<input type="datetime">
- 本地日期与时间:
<input type="datetime-local">
- 颜色类型:
<input type="color">
3. HTML5新表单属性
- placeholder属性:
<input type="text" placeholder="请输入用户名称"/>
- Required属性:
<input type="text" required/>
防止域为空时提交表单,如果为空,则提示填写。 - Multiple属性:
<input type="email" multiple/>
使输入框能够输入多个值,如多个邮箱,用逗号分隔 - Autofocus属性:
<input type="text" autofocus/>
网页加载时自动让域获得焦点 - Pattern属性:
<input type="text" pattern="13[0-9]\d{8}"/>
定制正则表达式 - form属性:
<form name="myform></form>
<input type="text" form="myform" name="uname"/>
用于在form标签之外声明表单元素
4.新元素
Datalist元素:可以使用list属性预创建一组列表项,后面可以为输入框输入提示
<datalist id="mylist">
<option value="010" label="北京"/>
<option value="011" label="广州"/>
<option value="012" label="天津"/>
</datalist>
<input type="tel" name="address" list="mylist">
Progress元素:进度条
- value:任务执行进度
- max:声明任务完成后达到的值
<progress max="100" value="20"></progress>
Meter元素:与progress类似,如达到危险值会有不同形式
属性:min,max,value,low,high,optimum将范围划分不同的部位和设置最佳位置
<meter min="0" max="100" low="20" high="80" optimum="70" value="55"/>
Output元素:显示表单元素处理的结果值
属性:for将output元素与计算的源元素相关联
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
<input type="range" id="a" value="50">
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>
5. 新API
setCustomValidity():可以定制验证消息。如果是空消息,错误消息就会被清除。
语法:setCustomValidity(messgae)
注意:有错误时,可以设置setCustomValidity用于改错误提示消息。如果错误更改后,一定要将setCustomValidity设置为空,setCustomValidity(“”)显示清除错误消息,否则表单永远无法提交。
checkValidity():在不提交表单的前提下激活验证过程,返回true或false
6. 新事件
invalid:每当用户提交表单时,如果检测到无效域时,就触发,它主要关注发生错误的元素。
document.information.addEventListener("invalid",validation,true);
function validation(e){
var elem=e.target;
elem.style.......
}
注意表单,如果不是则无效。
7. 新属性
获取ValidityState对象:var valCheck=elem.validity;
状态:表单API提供的一组状态检测属性,可用于实现自定义验证过程
Validity的属性:
- valid状态:表单控件是否已通过了所有的验证约束条件
- valueMissing状态:非空验证属性,检查是否非空
- typeMismatch状态:检查类型是否合适
- patternMismatch状态:检查输入内容与所设置格式
- tooLong状态:检查输入内容长度与maxlength指定的值
- rangeUnderflow状态:输入内容小于min属性声明的值,则为true
- stepMismatch状态:检查step属性的值与min,max,step一不一致
- customError状态:如果元素设置了自定义错误,则为true