input H5新特性

---

属性

1.autofocus 页面加载完后获得焦点

//当页面加载时获得焦点
<input type="text" name="name" autofocus="autofocus" />

---

2. autocomplete 是否显示与现在输入内容相匹配得历史输入记录

//可设置得值：no-显示匹配的历史输入记录  off 不显示历史输入记录
<input type="text" autocomplete="off" />
<input type="email" autocomplete="on" />

---

3. form 设置元素归属表单的ID

//用于声明元素属于哪个表单，而不关心元素在页面哪个位置，表单之外都行
<input type="text" form="register-form" />

---

4. formaction 设置表单action属性的值

<form action="/example/html5/demo_form.asp" method="get">
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
<input type="submit" value="提交" /><br />
<input type="submit" formaction="/example/html5/demo_admin.asp" value="以管理员身份提交" />
</form>

---

5. formenctype 覆盖表单enctype属性的值

<form action="/example/html5/demo_post_enctype.asp" method="post">
  First name: <input type="text" name="fname" /><br />
<input type="submit" value="提交" />
<input type="submit" formenctype="multipart/form-data" value="以 Multipart/form-data 编码提交" />
</form>

---

6. formmethod 覆盖表单method属性的值

<form action="/example/html5/demo_form.asp" method="get">
  First name: <input type="text" name="fname" /><br />
  Last name: <input type="text" name="lname" /><br />
<input type="submit" value="提交" />
<input type="submit" formmethod="post" formaction="/example/html5/demo_post.asp" value="使用 POST 提交" />
</form>

---

7. formnovalidate 关闭表单的验证

<form action="/example/html5/demo_form.asp" method="get">
E-mail: <input type="email" name="userid" /><br />
<input type="submit" value="提交" /><br />
<input type="submit" formnovalidate="formnovalidate" value="进行没有验证的提交" />
</form>

---

8. formtarget 设置表单target属性的值

<form action="/example/html5/demo_form.asp" method="get">
  First name: <input type="text" name="fname" /><br />
  Last name: <input type="text" name="lname" /><br />
<input type="submit" value="提交" />
<input type="submit" formtarget="_blank" value="提交到新窗口/选项卡" />
</form>

---

9. max min 设置最大/最小值

---

10. minlength 设置输入最小程度

---

11. pattern 设置元素文本内容需匹配的正则表达式

//浏览器不会验证空值，若想必填可加上 required 属性
//若含有 title 属性的值，当匹配失败会显示 title 的信息
<form action="#"  >
    <p>手机号码：<input type="text" name="phoneNumber" pattern="[1]([3]|[5])[0-9]{9}" title="13或15开头的手机号码" required /></p>
    <input type="submit" />
</form>

---

12. placeholder 设置预先显示内容

---

13. readonly 设置元素是否只读

---

14. required 设置是否为必填项

---

方法

1. boolean checkValidity() 判断控件的内容是否校验通过

console.log(document.getElementById('webURL').checkValidity()); // => false ：验证不通过    true : 验证通过

---

2. void setCustomValidity(string msg) 设置校验不通过时的自定义信息

<form>
  <p>新的密码：<input type="password" id="newPwd" oninput="validityPwd()" required /></p>
  <p>确认密码：<input type="password" id="newPwdConfirm" oninput="validityPwd()"  /></p>
  <input type="submit" />
</form>

// 校验2个密码是否一致
  var validityPwd = function(){
    var newPwd = document.getElementById('newPwd');
    var newPwdConfirm = document.getElementById('newPwdConfirm');
    if(newPwd.value != newPwdConfirm.value){
      newPwdConfirm.setCustomValidity('两次密码输入不一致');
    }else{
      newPwdConfirm.setCustomValidity('');
    }
  }

---

新控件

1. color 颜色

2. date 日期

3.month 年月日历

4.time 时间

5.week 周数

6.email 电子邮件

7.number 数值

8.search 搜索框

9.range 滑动条

10.tel 电话号码

11.url 网址

点击查看浏览器支持