html5 笔记6 新的form表单处理

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、验证反馈
在支