H5 表单

H5新的Input类型

H5新增了多个新的表单输入类型。这些类型提供了更好的输入控制和验证

这些类型包括：

• email
• url
• number
• range
• Date picker(date, month, week, time, datetime, datetime-local)
• search
• color

---

浏览器支持(w3c上图片，不太准确)

image.png

注释： Opera对新的输入类型的支持最好。不过也已经可以在所有主流的浏览器中使用。即使不被支持，仍然可以显示为常规的文本域。

---

实际使用

1. email
   提交时会校验内容是否是正确的邮箱格式

2. url
   在提交表单时，会自动验证 url 域的值。

3. number
   number 类型用于应该包含数值的输入域。还能设置输入数字的范围

     Points: <input type="number" name="points" min="1" max="10" />
   

   只可输入数字，输入其他字符被清空。 若超出范围，在提交表单时会给出相应提升

   属性	值	描述
   max	number	规定允许的最大值
   min	number	规定允许的最小值
   step	number	规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等）
   value	number	规定默认值

     <input type="number" name="points" min="0" max="10" step="3" value="6" />
   

   value="6" 控制着 input的初始值，此次直接提交，不会有限制，若改动了input的值，提交时会限制数值
   内容为 ： [0, 3, 6, 9] 中的一项

4. range
   range 类型用于应该包含一定范围内数字值的输入域。
   range 类型显示为滑动条。
   还能够设定数字的限定：

       <input type="range" name="points" min="1" max="10" />
   

   效果：

   效果

5. Date Pickers（日期选择器）
   HTML5 拥有多个可供选取日期和时间的新输入类型：

   • date - 选取日、月、年
   • month - 选取月、年
   • week - 选取周和年
   • time - 选取时间（小时和分钟）
   • datetime - 选取时间、日、月、年（UTC 时间）
   • datetime-local - 选取时间、日、月、年（本地时间）

6. search
   search 类型用于搜索域，比如站点搜索或 Google 搜索。
   search 域显示为常规的文本域。

---

H5 新的表单元素

HTML5 拥有若干涉及表单的元素和属性。

• datalist
• keygen
• output

浏览器支持性

Input type	IE	Firefox	Opera	Chrome	Safari
datalist	No	No	9.5	No	No
keygen	No	No	10.5	3.0	No
output	No	No	9.5	No	No

1. datalist 元素

datalist 元素规定输入域的选项列表。
列表是通过 datalist 内的 option 元素创建的。
如需把 datalist 绑定到输入域，请用输入域的 list 属性引用 datalist 的 id：

Webpage: <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>

<input>元素的list属性需要与<datalist>元素的id对应

---

H5 表单属性

新的 form 属性：

• autocomplete
  自动完成， 重新加载网页时，记录先前输入的值
• novalidate
  属性规定在提交表单时不应该验证 form 或 input 域

新的 input 属性：

• autocomplete
• autofocus
  自动获取焦点
• form
  设置input所属的from，该input可以不在<form></form>内
• form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)
  重写（重新设置）form的相关属性
• height 和 width
  只对input type="image" 类型生效

    <input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
  

• list
• min, max 和 step
  min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定（约束）。
• multiple
  multiple 属性是一个 boolean 属性.
  multiple 属性规定<input> 元素中可选择多个值。
  注意: multiple 属性适用于以下类型的 <input> 标签：email 和 file:
• pattern (regexp)
• placeholder
• required
  规定必须在提交之前填写输入域（不能为空）。