Forms API

HTML5 Forms核心概念：规范的核心是功能性动作和语义，而非外观和显示效果。

（一）HTML5表单包含了大量新的API和元素类型，分为两类：

1、新的输入型控件：

    tel                电话号码                           

    email           电子邮箱地址文本框

    url                网页URL

    Search         用于搜索引擎

    range           特定值范围内的数值选择器，典型用法是滚动条

    number        只包含数值的字段

output标签，专门针对显示range控件的值；

progress标签，显示进度条。

eg:    <input type="email">

         <input type="range" min="18" max="120" οnchange="display.value=value">   <output id="display">

        <progress value="30" max="100"><progress>

其他列入规范但尚未广泛支持的元素：

    color                    颜色选择器

    datetime             显示完整日期时间，包括时区选择

    datetime-local    显示日期和时间，不包括时区

    time                   不包含时区时间选择器和指示器

    date                   日期选择器

    week                  周选择器

    month                月选择器

2、新的函数和特性：

（1）placeholder：输入型控件在用户还没输入值时候，向用户显示描述性说明或者提示信息。

    <input name="name" placeholder="Your Name">

（2）autocomplete：浏览器通过autocomplete知晓是否应该保存输入值以备后用（on：可保存，off：不可保存）。

    <input type="text" autocomplete="off">

（3）autofocus：通过该特性让某个表单元素获取焦点，如果设置多个，相当于未指定。

    <input type="search" autofocus>

（4）spellcheck：对带有文本内容的输入控件进行拼音检查。

    <textarea id="myYextarea" spellcheck="true">

（5）list和datalist：为某输入型控件构造选值表

    <datalist id="contactList">

        <option value="xxx@xx.com">

        <option value="conghua@163.com">

    </datalist>

    <input type="text" id="contact" list="contactList">

（6）min和max：将range数值输入范围限度最低和最高之间。

    <input id="congidence" name="level" type="range" min="0" max="100" value="0">

（7）step：指定输入值递增和递减的粒度，值只可以为粒度的倍数。

   <input id="congidence" name="level" type="range" min="0" max="100" value="0" step="5">

（8）ValueAsNumber：完成控件值类型在文本和数值间的相互转换。

    document.getElementById("confidence").ValueAsNumber(65) ;

（9）required：添加特性为表单必填项。

    <input type="text" id="name" required>

（二）表单验证

表单验证，就是一套系统，为终端用户检测无效的控件并标志这些错误，就是在提交服务器之前对其进行一系列的检查并通知用户纠正错误。

通过反馈验证状态的ValidityState对象的valid状态获取验证结果。    $("id").validity.valid

八种用于表单验证约束条件：

1、valueMessing：确保表单控件值已填写；

2、typeMismatch：保证控件值与预期类型匹配；

3、patterMismatch：根据表单设置格式规则输入是否为有效格式；

4、tooLong：避免输入过多字符；

5、rangeUnderflow：限制数值控件最小值；

6、rangeOverflow：限制数值最大值；

7、stepMismatch：确定输入符合min、max和step设置；

8、customError：处理应用代码明确设置几计算产生的错误。