1、不变的东西
。表单仍然使用<form>元素最为容器(顶层),可以再其中设置基本的提交特性;
。表单仍然用于向服务器端发送表单中控件的值;
。可以使用以前的文本框、单选按钮等方法;
。仍然可以使用脚本操作表单控件
2、功能性表单
form的核心设计理念是功能性动作和语义,而非外观和显示效果。为了达到这样的目的,html5增加了大量新的输入型控件和新的函数及特性。
3、浏览器支持情况
在不支持的浏览器中使用新的表单控件,会平滑降级,直接呈现为简单的文本输入框。多层表单验证是相当有必要的,不能完全依赖控件自身提供的验证器。
4、输入型控件
。tel:电话号码
。email:电子邮件地址文本框
。url:网页的url
。range:特定值范围内的数值选择器(滑动条)
。number:只能包含数值的文本框
。datetime:显示完整的日期和时间,包含时区
。datetime-local:显示本地完整的日期和时间,不包含时区
。time:不含时区的时间选择器
。date:日期选择器
。week:周选择器
。month:月选择器
。color:颜色选择器,基于调色板进行选择
在浏览器中,这些控件一旦不支持的时候,就退化成为基本的文本输入框了。
5、表单新增属性
。placehodler:在文本框中的灰色提示,能用在包括老的控件在内的文本框中
。autocomplete:规定form或input域是否应该拥有“自动完成功能”(它这里并不是真正意义上的自动完成,只是会存储用户输入信息,在下次输入是会提示出来)。
。autofocus:规定在页面加载时,自动完成获取焦点的功能。
。list:list属性规定输入域的datalist,datalist是输入域的选项列表。
<input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3School" value="http://www.w3school.com.cn" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>
。min、max、step:在range和number中会用到
。required:规定在提交之前必须填写
。pattern:正则表达式验证域的输入信息
6、表单验证
在支持html5表单验证的浏览器中,可以通过表单控件来访问ValidityState对象:
var valCheck = document.myForm.myInput.validity;
这样就获得了在myForm下myInput表单元素的ValidityState对象。调用的方式就是valCheck.XXX
。valueMissing:确保表单控件中要求填写的值已填写(为空返回true)
。typeMismatch:保证控件值与预期类型相匹配,如number、url等(不匹配返回true)
。patternMismatch:根据表单控件上设置的格式规则验证输入是否为有效格式(不是有效格式返回true)
。tooLong:判断输入值是否超过最大设置值(超过返回true)
。trangeUnderflow:限制数值型控件的最小值(小于返回true)
。trangeOverflow:限制数值型控件的最大值(大于返回true)
。stepMismatch:确保输入值符合min、max和step设置。满足数值的增长符合step的增长规律(不是就返回true)
。customError:处理应用代码明确设置及计算产生的错误。
这个要调用setCustomValidity(message)将表单控件置于customError状态。当浏览器内置的验证机制不适用时,需要显示自定义验证错误信息。通过调用setCustomValidity("")来清楚错误。
。valid:不具体到哪个错误,而是多8个约束都进行验证,都正确返回true。
。checkValidity():此函数能在任何时候都对表单进行验证,而不是在特定的时候进行。如:document.passwordChange.password1.checkValidity()"
7、验证反馈
在支