HTML5 Web Form 新增属性和表单验证

<form>标签的基本属性

 1 method属性：指定浏览器向服务器传送数据的方式，可选；
 2 action属性：设置服务器接受和处理表单数据的URL；
 3 enctype属性：制定表单数据在发送到服务器之前进行编码的编码方式；
 4 accept属性：指定能够通过文件上传进行提交的文件类型；
 5 accept-charset属性:指定服务器处理表单数据所接收的字符集；
 6 target属性：制定浏览器在提交表单后生成的页面在哪个框加载或在哪个窗口显示；
 7 id属性：用来识别网页中的form标签；
 8 name属性：用来识别网页中的form标签；
 9 autocomplete属性：新增属性，是否启用自动完成设置，on/off,默认on
10 novalidate属性：新增属性，是否启用表单验证功能，novalidate="novalidate".

表单结构的元素标签

 1 label标签：设置输入性控件的说明信息；
 2 input标签：定义表单的输入类型控件；
 3 button标签：定义表单的按钮;
 4 fieldset标签：fieldset和lenged标签用来将相应的表单控件分组；
 5 lenged标签：fieldset和lenged标签用来将相应的表单控件分组；
 6 select标签：创建下拉列表框；
 7 <optgroup>标签：以选项租的形式定义下拉列表框；
 8 textarea标签：用来定义一个文本区域；
 9 datalist标签：datalist和option标签组合用来定义输入域的选项列表；
10 output标签：新增标签，定义不同类型的输出，特别是在用脚本的计算结果的显示中应用广泛；
11 keygen标签：定义表单的密钥对生成器字段。 

保留的输入类型控件

 1 text控件：文本的单行输入字段；
 2 password控件：密码字段；
 3 button控件：点击的按钮；
 4 file控件：文件上传组件；
 5 image控件：一个图像形式的提交按钮；
 6 radio控件：单选按钮；
 7 chekbox控件：复选框；
 8 hidden控件：隐藏字段；
 9 submit控件：提交按钮；
10 reset控件：重置按钮。

新增输入类型控件

 1 email控件：邮件地址的输入域；
 2 url控件：URL地址的输入域；
 3 number控件：数字的输入域；
 4 range控件：包含一定范围内数值的滑动条输入域；
 5 search控件：搜索域，results属性指定显示搜索结果的条数；
 6 color控件：颜色选择域；
 7 date控件：日期选择域；
 8 month控件：月份的输入域；
 9 week控件：星期选择域；
10 time控件：时间选择域；
11 datetime控件：date和time控件的整合，日期和时间的输入域；
12 datetime-local控件：date和time控件的整合，时间和日期的输入域，默认显示本地时间；13 telephone控件：电话号码输入域。

新增表单的标签属性

 1 placeholder属性：定义一个占位符，提示用户该输入域期望输入的值；
 2 required属性：定义一个必填项；
 3 pattern属性：定义一个正则表达式对输入域进行验证；
 4 mutiple属性：定义输入域可以选择多个值；
 5 list属性：list和datalist标签组合，用来定义输入域的选项列表；
 6 min属性：限定输入值得最小值；
 7 max属性：限定输入值的最大值；
 8 step属性：数值的过度间隔；
 9 novalidate属性：是否启用验证功能；
10 autocomplete属性：是否启用自动完成设置；
11 autofocus属性：规定当页面加载时自动获得焦点，autofocus ="autofocus".

表单的验证机制(由接口validityState提供以下属性进行验证)

1 valid属性：有效，当填写的内容符合要求时触发；对应invalid;
2 valueMissing属性：返回一个必填字段是否有内容；
3 typeMismatch属性：用来返回用户输入的内容是否符合类型，主要面对Email，URL，number这三个输入类型的控件；true/false；
4 tooLong属性：用来返回用户输入的内容是否超过规定的长度；
5 stepMismatch属性：用来返回用户输入的内容是否超过规定的长度，是否符合step的过度间隔；
6 rangeUnderflow属性：用来返回用户输入的数字是否小于设置的最小值，关联min属性，相对的是rangeOverflow；
7 patternMisMatch属性：用来返回用户输入的内容是否满足规定的验证要求，关联pattern使用；
8 custonError属性：用于定义一些自定义的错误信息！属性mode：on/off/RemoteOnly,属性defaultRedirect重定向URL。

获取validityState接口:

 1 <script>
 2     var username;
 3     var validityState;
 4     function load(){
 5         username = document.getElementById(‘username‘);
 6         validityState = username.validity;
 7     }
 8     window.addEventListener("load",load,false);
 9 </script>
10  <input type = "text" id="username"/>

用户自定义表单错误的函数和属性（customError用户自定义错误）

1 setCustomValidity()函数：用来设置错误信息；
2 willValidate属性：用来返回某输入类型控件是否将进行表单验证；
3 checkValidity函数：用来进行表单验证；所有的验证有效，返回true，触发valid事件，否则，返回false触发invalid事件；
4 validationMessage函数：用来显示相关的用户提示信息；
5 preventDefault函数：用来关闭浏览器的默认错误提示信息。