【面向HTML5--表单2.0】

1、新的input type

H4已经学过的input type：

text、password、radio、checkbox、button、submit、reset、image、hidden、file

H5中新增的input type：

(1)email：
    作用：邮件输入框，在表单提交时会验证邮箱格式(*@*)，浏览器默认提供了错误消息，内容可以定制但样式不能定制
    语法：'<input type="email">'

(2)url：
    作用：网址输入框，在表单提交时会验证网址格式(\w:)，浏览器默认提供了错误消息，内容可以定制但样式不能定制
    语法：'<input type="url">'

(3)number：
    作用：数字输入框，限定用户的输入只能是整数，还可以指定数字的范围和步长
    语法：'<input type="number" min="" max="" step="">'

(4)tel：
    作用：电话号码输入框，仅在手机中显示数字输入键盘，PC浏览器中无特殊效果
    语法：'<input type="tel">'

(5)search：
    作用：搜索输入框，仅在手机中显示输入键盘右下角显示一个“搜索”按钮，PC浏览器中无特殊效果
    语法：'<input type="search">'

(6)range：
    作用：范围选择滑块，可以在指定的范围内以指定的步长进行数字选择
    语法：'<input type="range" min="1" max="100" step="1" value="50">'

(7)color：
    作用：颜色选择器，弹出当前操作系统提供的颜色选择窗口进行颜色选择
    语法：'<input type="color">'

(8)date：
    作用：日期选择器，弹出一个浏览器自定义的日期选择窗口——FF不支持
    语法：'<input type="date">'

(9)month：
    作用：月份选择器，弹出一个浏览器自定义的月份选择窗口——FF不支持
    语法：'<input type="month">'

(10)week：
    作用：星期/周选择器，弹出一个浏览器自定义的星期选择窗口——FF不支持
    语法：'<input type="week">'

2、新的表单元素

H4已经学过的表单元素：

input、select/option、textarea、button

H5新增了四个表单元素：

(1)datalist：数据列表，本身属于不可见元素，用于为某个文本输入框提供输入建议列表

<datalist id="list2">
    <option>XXX</option>
</datalist>
<input type="text"  list="list2">

注意：option不能加上value值

(2)progress：进度条，显示为一个不断前进的进度条
    '<progress value="0~1"></progress>' 
(3)meter：度量衡/刻度尺，以“红/黄/绿”三个颜色表示当前值处于哪个范围——“不可接受/可以接受/优秀”之一。
    属性：min：最小值
         max：最大值
         low：可接受的下限
         high：可接受的上限
         optimum：最优值
         value：当前实际值

    low < optimum < high    :   黄-绿-黄
    optimum < low           :   绿-黄-红
    high < optimum          :   红-黄-绿
(4)output：输出值，本身只是一个语义标签，功能/样式与SPAN一样的。
    '<output>xxx</output>'

注意：上述四个新标签都是用于提示信息的，不能用于提交客户端的数据，故没有name属性！

3、表单元素的新属性

H4已经学过的表单元素的属性：

type、name、value、readonly、disabled、checked、selected

H5新增的表单元素属性：

(1)autocomplete：自动完成，是否记录之前曾经提交过的用户输入
    '<input autocomplete="on/off">'
(2)autofocus：自动获得输入焦点
    '<input autofocus>'
(3)placeholder：占位字符，在输入框中没有任何输入时显示的提示性文字
    '<input placeholder="提示性文字">'
(4)multiple：是否允许存在多个值，是个boolean型属性，若声明了此属性，email和file输入框中就运行输入以逗号分隔的多个值
    '<input  type="email"  multiple>'
(5)form：为INPUT指定form属性，指向某个FORM元素的ID，就可以把该输入框放到FORM元素外部
    '<input form="formID">'

=====上述五个通用属性目前的浏览器兼容性非常好=======

以下为与输入验证相关的表单元素新属性，在提交时可能弹出错误消息：

(6)required：必填项     
    '<input required>'  
(7)minlength：限定最少的字符个数，不是H5标准属性，仅Chrome支持，WS中也没有代码提示
    '<input minlength="3">'
(8)maxlength：限定最长的字符个数
    '<input maxlength="6">'
(9)min：限定最小的数值
    '<input min="18">'
(10)max：限定最大的数值
    '<input max="60">'
(11)pattern：输入必须符合指定的正则表达式
    '<input pattern="1[3578]\d{9}">'

如何自定义表单元素弹出的错误提示（JS相关）？

HTML5为每个表单元素对应的JS对象提供了一个属性：

input.validity {
    badInput：false，无效输入，如无效的数字
    typeMismatch：false，类型不匹配，如非法的邮箱
    valueMissing：false，值缺失，违反了required验证
    tooShort：false，字符串太短，违反了minlength验证
    tooLong：false，字符串太长，违反了maxlength验证
    rangeOverflow：false，数字值上溢出，违反了max验证
    rangeUnderflow：false，数字值下溢出，违反了min验证
    patternMismatch：false，样式不匹配，违反了pattern验证
    customError：false，是否存在用户自定义的错误消息

    valid：当不存在上述任一错误时，此属性值为true
}

上述的每个错误，浏览器都有预定义的错误消息；若用户为输入框自定义一个错误消息，浏览器只会自定义错误消息，而不显示预定义错误消息。

指定自定义错误消息：

input.setCustomValidity('自定义错误消息');

取消自定义错误消息：

input.setCustomValidity('');