HTML5表单元素

新的表单元素

新的Input类型

新的表单控件

邮箱 type="email"

url type="url"

search type="search"

数字 type="number"

电话 type="tel"

滑块 type="range"

颜色 type="color"

日期 type="date"

选择一个日期（UTC 时间） type="datetime"

选择一个日期和时间 (无时区) type="datetime-local"

月份 type="month"

周 type="week"

时间 type="time"

修改表单控件中的默认提示信息

<br>
<form action="#" method="get">
  <input type="text" name="uname" pattern="^\d{4,11}" required class="uname">
  <input type="submit" name=""><br><br>
  正确格式为4到11位数字，请输入错误格式以测试
</form>

var input = document.querySelector(".uname");
  input.oninvalid=function(){    
    if(this.validity.patternMismatch===true){
      this.setCustomValidity("请输入4到11位数字");
    }else{
      this.setCustomValidity("");
    }
  }

1. 表单验证触发oninvalid事件
2. 通过setCustomValidity方法设置修改内容

<form action="#" method="get">
  <input type="text" name="uname" pattern="^\d{4,11}" required class="uname">
  <input type="submit" name="">
</form>
<script>
  var input = document.querySelector(".uname");
  input.oninvalid=function(){    
    if(this.validity.patternMismatch===true){
      this.setCustomValidity("请输入4到11位数字");
    }else{
      this.setCustomValidity("");
    }
  }
</script>

datalist元素

input 元素使用 datalist 预定义值

<input list="browsers">
<datalist id="browsers">
  <option value="Internet Explorer"></option>
  <option value="Firefox"></option>
  <option value="Chrome"></option>
  <option value="Opera"></option>
  <option value="Safari"></option>
</datalist>

output元素

0 100 + =

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

keygen元素

<keygen>元素的作用是提供一种验证用户的可靠方法。

<keygen>标签规定用于表单的密钥对生成器字段。

当提交表单时，会生成两个键，一个是私钥，一个公钥。

私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。

表单新属性

form

• autocomplete = on | off 自动完成
• novalidate = true | false 是否关闭校验

input

• autofocus : 自动获取焦点
• multiple : 实现多选效果
• placeholder : 占位符
• required : 必填项
• autocomplete :
• form : 规定输入域所属的一个或多个(用空格分隔)表单
• formaction :
  • 用于描述表单提交的URL地址
  • 与 type="submit" 和 type="image" 配合使用
  • 会覆盖<form>元素中的 action 属性
• formenctype :
  • 属性描述了表单提交到服务器的数据编码
  • 与 type="submit" 和 type="image" 配合使用
  • 会覆盖 form 元素的 enctype 属性
• formmethod :
  • 定义了表单提交的方式
  • 覆盖了 <form> 元素的的 method 属性
  • 与 type="submit" 和 type="image" 配合使用
• formnovalidate :
  • 描述了 <input> 元素在表单提交时无需被验证
  • 会覆盖 <form> 元素的novalidate属性
  • 与type="submit"一起使用
• formtarget :
  • 指定一个名称或一个关键字来指明表单提交数据接收后的展示
  • 覆盖 <form> 元素的 target 属性
  • 与 type="submit" 和 type="image" 配合使用
• pattern (regexp)
  • 描述了一个正则表达式用于验证 <input> 元素的值
  • 适用于以下类型的input标签: text, search, url, tel, email, 和 password
• list : 规定输入域的 datalist
• height and width
• min and max
• step