html5-表单元素

新增表单元素
兼容性存在问题，并且不同浏览器样式不同

新的表单元素

新增输入类型

Input 类型

• email：电子邮件

• tel：电话号码

• url：网页的 url(需要 http(s)://)

• search：搜索
• range：数值控件。特定范围内的数值选择器
• number：数字
• date：日期，选取年、月、日
• month：选取月、年
• week：选取周和年
• time：选取时间（小时和分钟）
• datetime：选取时间、日、月、年（UTC 时间）
• datetime-local：选取时间、日、月、年（本地时间）

其中 range 和 number 还可以配合下面属性使用

• min：允许最小值
• max：允许最大值
• step：步数
• value：默认值

新增表单元素

• datalist
  选择列表

  <input type="url" list="url_list" name="link" />
  <datalist id="url_list">
      <option label="W3School" value="http://www.W3School.com.cn" />
      <option label="Google" value="http://www.google.com" />
      <option label="Microsoft" value="http://www.microsoft.com" />
  </datalist>

• keygen
  提供一种验证用户的可靠方法。
  密钥对生成器，提价表单时，生成一个私钥和一个公钥。
  私钥（private key）存储于客户端，公钥（public key）被发送到服务器，公钥用于之后验证用户的客户端证书。
  目前浏览器不支持

  <form action="demo_form.asp" method="get">
    Username: <input type="text" name="usr_name" />
    Encryption: <keygen name="security" />
    <input type="submit" />
   </form>

• output
  用于不同类型的输出

<output id='result' onforminput='resCalc()'></output>

表单验证属性

1. pattern
   属性确保值与正则表达式匹配
   用于验证文本、链接、电话，邮件，密码等形式的输入元素。

   <form method="post" action="http://example.com/form">
    <p>
      <label for="name"> Name: <input type="text" id="name"
        name="name" pattern="^.* .*$" />
      </label>
    </p>
   </form>

   确保用户输入两个名称，用空格分隔

2. min,max
   适用范围、数字、日期、月、周、时间、本地时间等类型的输入元素

• 用于验范围或数字是否大于等于或小于等于设定值
• 用于验时间是否早于或晚于设定值

3. required
   是否必填
4. formnovalidate
   禁用原生验证

<form method="post" action="http://example.com/form">
    <p>
      <label for="email"> Email: <input type="email"
        placeholder="user@mydomain.com" required pattern=".*@mydomain.com$"
        id="email" name="email" />
      </label>
    </p>
    <input type="submit" value="Submit" /> <input type="submit"
      value="Save" formnovalidate />
</form>