HTML5

1.回顾

1.1 form ：表单 （提交数据）
属性：
- method：提交方式，常用get，post
- action：提交地址
- enctype：编码方式

1.2 表单元素
（1）input

• text：文本
• password：密码
• radio：单选框
• checkbox：复选框
• file：上传文件
• submit：提交按钮
• button：普通按钮
• reset：重置按钮
• image：图像按钮
• hidden：隐藏域

（2）select：下拉列表

<option>：定义选项

（3）textarea：多选文本域

2. HTML5新表单元素

• 电子邮件类型：<input type="email">
• 搜索类型：<input type="search">
• URL类型：<input type="url">
• 电话号码类型：<input type="tel">(针对移动端)
• 数字类型：<input type="number">
  （属性：min最小值，max最大值，step步长）
• 范围类型：<input type="range" min="10" max="1000" value="50">
  (属性：min最小值，max最大值，step步长，value初始值)
• 日期类型：<input type="date">
• 周类型：<input type="week">
• 月份类型：<input type="month">
• 日期与时间：<input type="datetime">
• 本地日期与时间：<input type="datetime-local">
• 颜色类型：<input type="color">

3. HTML5新表单属性

• placeholder属性：
  <input type="text" placeholder="请输入用户名称"/>
• Required属性：<input type="text" required/>
  防止域为空时提交表单，如果为空，则提示填写。
• Multiple属性：<input type="email" multiple/>
  使输入框能够输入多个值，如多个邮箱，用逗号分隔
• Autofocus属性：<input type="text" autofocus/>
  网页加载时自动让域获得焦点
• Pattern属性：<input type="text" pattern="13[0-9]\d{8}"/>
  定制正则表达式
• form属性：<form name="myform></form>
<input type="text" form="myform" name="uname"/>
  用于在form标签之外声明表单元素

4.新元素

Datalist元素：可以使用list属性预创建一组列表项，后面可以为输入框输入提示

<datalist id="mylist">    <option value="010" label="北京"/>    <option value="011" label="广州"/>    <option value="012" label="天津"/></datalist><input type="tel" name="address" list="mylist">

Progress元素：进度条

• value：任务执行进度
• max：声明任务完成后达到的值

<progress max="100" value="20"></progress>

Meter元素：与progress类似，如达到危险值会有不同形式
属性：min，max，value，low，high，optimum将范围划分不同的部位和设置最佳位置

<meter min="0" max="100" low="20" high="80" optimum="70" value="55"/>

Output元素：显示表单元素处理的结果值
属性：for将output元素与计算的源元素相关联

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">    <input type="range" id="a" value="50">    +<input type="number" id="b" value="50">    =<output name="x" for="a b"></output></form>

5. 新API

setCustomValidity()：可以定制验证消息。如果是空消息，错误消息就会被清除。
语法：setCustomValidity(messgae)
注意：有错误时，可以设置setCustomValidity用于改错误提示消息。如果错误更改后，一定要将setCustomValidity设置为空，setCustomValidity(“”)显示清除错误消息，否则表单永远无法提交。

checkValidity()：在不提交表单的前提下激活验证过程，返回true或false

6. 新事件

invalid：每当用户提交表单时，如果检测到无效域时，就触发，它主要关注发生错误的元素。

document.information.addEventListener("invalid",validation,true);function validation(e){    var elem=e.target;    elem.style.......}

注意表单，如果不是则无效。

7. 新属性

获取ValidityState对象：var valCheck=elem.validity;
状态：表单API提供的一组状态检测属性，可用于实现自定义验证过程

Validity的属性：

• valid状态：表单控件是否已通过了所有的验证约束条件
• valueMissing状态：非空验证属性，检查是否非空
• typeMismatch状态：检查类型是否合适
• patternMismatch状态：检查输入内容与所设置格式
• tooLong状态：检查输入内容长度与maxlength指定的值
• rangeUnderflow状态：输入内容小于min属性声明的值，则为true
• stepMismatch状态：检查step属性的值与min，max，step一不一致
• customError状态：如果元素设置了自定义错误，则为true