HTML5引入了新的表单元素、输入类型和属性，以及内置的对必填字段、电子邮件地址、URL以及定制模式验证。

元素：

---- 电子邮件框

---- 搜索框

---- 电话框

---- URL框

以下元素得到部分浏览器支持：

---- 日期

---- 数字

---- 范围

----

Grapes ---- \

Pears ---- 数据列表

Kiwi ---- /

----

下面输入或元素得到更少的支持

---- 颜色

---- 全局日期和时间

---- 局部日期和时间

---- 月

---- 时间

---- 周

---- 输出

属性：

注：Ryan Seddon的H5F（ http://github.com/ryanseddon/H5F）可以为旧浏览器提供模仿H5表单行为的js方案

method=“get”，表单提交后，表单中的数据会显示在浏览器地址栏里，数据大小有，获取信息等可公开的操作使用get操作

method=”post”，表单提交后，表达数据不会显示在地址栏，可以发送更多的数据，用于在数据库保存，删除，添加数据等敏感操作使用post

对表单元素进行组织

可以使用fieldset元素将相关元素组合在一起，还可以使用legend元素为每个fieldset提供标题，用于描述每个组的目的，这些描述也可以使用h1~h6。如果需要包含legend元素，则它必须是fieldset的第一个元素。

建议：对于单选按钮，最好总是使用fieldset和legend

label标签有一个特殊的属性：for，当for的值与一个表单字段的id值一样时，该label标签就与该字段显示地关联了起来。

for，id，name属性的值都可以是任意值，但对于包含多个单词的值，for，id会使用连字符（-）分隔单词，而name使用下划线（_）连接。

注：必须建立服务端验证，因为客户端的js验证有可能会被禁用，或者不支持H5的新属性。

http://html5pattern.com有很多有用的模式

创建单选按钮

同一组单选按钮的input元素的name属性必须都一样，type="radio"

创建复选框

同一组复选框的input元素的name属性必须都一样，type="checkbox"

创建选择框

1、创建选择框

使用select元素。size=n代表选择框高度，以行为高度，输入multiple或者multiple="multiple"，可以允许访问者选择多个选项。

在select内部使用option元素表示选项。在option元素中，输入selected或者selected="selected"，指定某个选项默认被选中。

2、对选择框进行分组

对多个分在同一组的option元素使用optgroup元素，label属性是子菜单标题。

如果添加了size属性，那么选择框看起来会更像一个列表，且没有自动选中的选项，若size大于选项数量，访问者可以点击空白处，使所有选项处于未选中状态

让访问者上传文件

必须在form元素里面正确设置enctype属性，创建input type="file"元素

对于允许上传的表单，不允许使用get方法

创建隐藏字段

input type="hidden"

隐藏字段出现在表单标记中的位置并不重要，因为它们在浏览器中并不可见。

不要将敏感信息放到隐藏字段中，访问者可以通过查看源码看到

创建提交按钮

1、input type="submit"

2、创建带图像的提交按钮

input type="image" src="img.url"

3、创建结合文本和图像的提交按钮

使用button元素

 Create Profile

注：如果表单需要一个以上的提交按钮，就应避免使用button元素

Reset

禁用表单元素

为元素添加属性，disabled或disabled="disabled"，禁用表单元素。

根据状态为表单设置样式

伪类

第十七章，视频、音频和其他多媒体

视频文件格式

HTML5支持三种视频文件格式：

1、Ogg Theora使用的文件扩展名为.ogg/.ogv，支持的浏览器：Firefox3.5+、Chrome4+、Opera10.5+以及Android版Firefox

2、MP4（H.2）使用的文件扩展名为.mp4/.m4v，支持的浏览器：Safari3.2+，Chrome4-？，IE9+，iOS（Mobile Safari）和Android2.1+，Android版Chrome，Android版Firefox和Opera Mobile11+

3、WebM使用的文件扩展名为.webm，支持的浏览器：Firefox4+、Chrome6+、Opera10.6+、Android2.3+、Android版Chrome、Android版Firefox和OPera Mobile 14

注：开发者至少要准备两种视频格式（MP4，WebM），才能确保获得所有兼容H5的浏览器的支持。

在网页中添加单个视频

使用video元素，

video属性

为视频添加控件和自动播放

使用controls、autoplay属性

为视频指定循环播放和海报图像

使用autoplay、loop、poster属性，最好加上controls，不然会一直循环播放不能暂停，这会让用户非常火大。

阻止视频预加载

使用preload属性

使用多种来源的视频和备用文本

为了获得所有兼容HTML5的浏览器的支持，至少要准备两种视频格式：MP4、WebM

可以使用source元素做到这一点。

一个video元素可以包含任意个source元素。