HTML5新增表单控件

1.数据列表

双击会出现一个类似浏览历史的下拉框
<input type="" list="id">
<datalist id="id值">
      <option value="值">文本</option>
      ......
</datalist>

2.<time> 标签

<time> 标签定义公历的时间（24 小时制）或日期，时间和时区偏移是可选的

3.Input 类型 - email

        email 类型用于应该包含 e-mail 地址的输入域。

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

4.Input 类型 - URL

        url 类型用于应该包含 URL 地址的输入域。

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

5.Input 类型 -  number

number 类型用于应该包含数值的输入域。

您还能够设定对所接受的数字的限定

6.Input 类型 -  range

        range 类型用于应该包含一定范围内数字值的滑动条。

        range 类型显示为滑动条。

7.Input 类型 - Date Pickers（日期选择器）

        date - 选取日、月、年

        month - 选取月、年

        week - 选取周和年

        time - 选取时间（小时和分钟）

        datetime - 选取时间、日、月、年（UTC 时间）

        datetime-local - 选取时间、日、月、年（本地时间）

8.Input 类型 - search（搜索）

search 类型用于搜索域，比如站点搜索或 Google 搜索。

search 域显示为常规的文本域

9.Input 类型 - color（颜色）

        默认颜色    value=“#ff0000”

10.电话input 类型 ---tel（电话号码) telphone

        定义用于输入电话号码的字段。

        电话号是11位纯数字，需要加入patten。

11.autofocus 属性

autofocus 属性规定在页面加载时，域自动地获得焦点。

注释：autofocus 属性适用于所有 <input> 标签的类型。

12.required 属性

        required 属性规定必须在提交之前填写输入域（不能为空）。

13.音频和视频

        可以使像插入图片一样引入音频和视频。

14.新增语义标签（块元素）

<header></header>

<nav></nav>

<section></section>

<footer></footer>

<main></main>

<aside></aside>

<article></article>

<figure>
         <figcaption>独立流内容标题</figcaption>
          独立流内容(图标、代码、图片、表格等）
</figure>

<delatils>
        <summary>概要.标题</summary>
       内容
</detalis>

示例：

 15.新增语义标签（内联元素）

<progress value="进度值“  min="最小值"max="最大值">
       你的浏览器不支持此标签
</progress>

<meter value="值" min=""   max=""  low=""hight=""> Your browser  is  not  supported
</meter>

<time  datetime="yyyy-mm-dd"></time>
<mark>标记</mark>

<audio src="sound.mp3" controls></audio>

<video src="movie.webm" autoplay controls></video>

<input type="text" name="usr_name" required="required" />

 <input type="text" name="user_name"  autofocus="autofocus" />

<input type="tel" patten="\d{11}">

颜色

<input type="color">

数字

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

<form>
<p>
   颜色选择控件:
<input type="color">
</p>
<p>
   日期选择:
<input type="date">
</p>
<p>
   时间选择:
<input type="time">
</p>
<p>
   电子邮件:
<input type="email">
</p>
<p>
   必填字段:
<input type="text" required>
</p>
<p>
   数字限制:
<input type="number" max="20" min="3">
</p>
<p>
   拖拽条:
<input type="range" max="1000" min="500">
</p>
<p>
   搜索框:
<input type="search">
</p>
<p>
   网址:
<input type="url">
</p>
<p>
   提交表单:
<input type="submit" value="提交">
</p>
</form>