第3章 HTML5新增标签和属性 在网站开发过程中，表单是获取用户信息的重要手段，HTML5大大加强了表单的功能，增加了从用户手机获得特定类型数据的新方法和在浏览器中检查数据的能力，以便提高用户交互的黏性，而且HTML5为了使页面元素更加丰富、多元，新增了video和audio等媒体标签。本章主要介绍表单新增特性、语义化结构标签及媒体标签的应用。 本章思维导图如图31所示。 图31思维导图 3.1HTML5表单新增 HTML5对表单系统进行了彻底的改造，新特性提供了更多语义明确的表单类型，并能够及时响应用户交互，以适应当前的应用。下面从表单新增类型、新增元素及新增属性等方面分别进行介绍。 3.1.1HTML5新增输入类型 HTML5新增了多项表单输入类型，这些新类型具有更明确的含义，提供了更好的输入控制和验证，而不用借助其他前端脚本语言(如JavaScript)，为开发人员带来了极大的方便。新增的输入类型如表31所示。 表31HTML5新增输入类型 类型示例描述 email输入邮箱格式 tel输入手机号码格式 url输入URL格式 number输入数字格式(只能是数字) search搜索框(体现语义化) range包含数值范围的滚动条 time选中时间(包含时、分) date选择日期(包含年、月、日) datetimeUTC时间(包含年、月、日、时、分) month选择月份(包含年、月) week选择星期(包含年、第几周) datetimelocal本地时间和日期 color颜色选择器 其中，datetime、datetimelocal、time、date、week和month类型是6种样式不同的时间日期选择器控件，统称为日期选择器。目前主流浏览器一般支持新的input类型，即使不支持，也可以显示常规的文本域。 1. 电子邮箱类型email 在提交表单时，会自动验证email域的值是否符合email的标准格式，再也不用自己用正则表达式去写email的格式验证了，代码如下： Email： 2. 电话号码类型tel tel 类型的元素用于让用户输入和编辑电话号码，在提交表单之前，输入值不会被自动验证为特定格式，因为世界各地的电话号码格式差别很大。尽管 tel 类型的输入在功能上和 text 输入一致，但它们确实有用，其中最明显的就是移动浏览器，特别是在手机上可能会选择专为输入电话号码而优化的自定义键盘，如图32所示。 图32手机端运行效果 由图32可知type="tel"会唤起系统的数字键盘。或者tel类型的文本框也可以和pattern属性一起使用，达到校验的效果，代码如下： 3. 地址类型url 将type属性设置为url，在提交表单时，会自动验证url域的值是否符合url的标准格式，输入的内容中必须包含"http://"，后面必须有内容，如百度网址或谷歌网址，代码如下： 4. 数字类型number number类型是用来专门输入数字的文本框，在提交时会检测其中内容是否为数字。此类型的input标签的常用属性如表32所示，代码如下： 表32数值设置限定属性 属性描述 max规定允许的最大值 min规定允许的最小值 step规定合法的数字间隔(如果 step="3"，则合法的数字是-3、0、3、6等) value规定默认值 disabled规定输入字段是禁用的 maxlength规定输入字段的最大字符长度 pattern规定用于验证输入字段的模式 readonly规定输入字段的值无法修改 required规定输入字段的值是必需的 size规定输入字段的可见字符 5. 搜索类型search search类型是一种专门用来输入搜索关键词的文本框。不同于普通类型的文本框，当用户开始输入时，输入框的右边会出现一个用于清除内容的图标，单击此图标可以快速清除，代码如下： 6. 数值范围类型range range 类型用于包含一定范围内数字值的输入域。range 类型显示为滑动条。还能够设定对所接收的数字的限定，代码如下： 其用于数字限定的属性同number类型的前4个。 7. 颜色类型color color类型用来选取颜色，它提供了一种颜色选取器，代码如下： 8. (Date Pickers)日期选择器 标签中与时间日期选择相关的type属性值有以下6种： (1) date 用于选取日、月、年。 (2) month 用于选取月、年。 (3) week 用于选取周和年。 (4) time 用于选取时间(小时和分钟)。 (5) datetime 用于选取时间、日、月、年(UTC时间，有时区)。 (6) datetimelocal 用于选取时间、日、月、年(本地时间)。 使用日期选择器的语法格式如下： 其中，type属性值可以填写上边6种类型中的任意一种。 新增input标签类型的综合应用如例31所示。 【例31】表单新增输入类型 表单新增输入类型
学生档案 姓名：
相片：
邮箱:
博客:
身高:
体重:
电话:
肤色:
艺名：
出生日期：
生日：
入学日期：
毕业日期:
毕业月份:
毕业星期:
在浏览器中的显示效果如图33所示。 图33表单新增输入类型综合应用效果 3.1.2HTML5新增元素标签 HTML5新增表单元素有datalist、keygen、output等，其功能描述如表33所示。 表33HTML5新增表单元素标签 标 签 名 称描述 datalist定义选项列表，需与input标签配合使用 keygen规定用于表单的密钥对生成器 output定义不同类型的输出 1. datalist标签 datalist标签用来定义选项列表，它无法单独使用，需要与 input 标签配合使用，来定义 input 可能的值。初始加载时datalist 元素及其选项不会被显示出来，它仅仅是合法的输入值列表。 input标签的list属性要与datalist标签的id属性一致才能进行绑定，如例32所示。 【例32】datalist标签应用 datalist标签应用
在浏览器中的显示效果如图34所示。 图34datalist标签应用效果 2. keygen标签 keygen标签的作用是提供一种验证用户的可靠方法。keygen标签是密钥对生成器(keypair generator)。当提交表单时，会生成两个键，一个是私钥，另一个是公钥。私钥(Private Key)存储于客户端，公钥(Public Key)则被发送到服务器端。公钥可用于之后验证用户的客户端证书(Client Certificate)，代码如下：

Encryption:
目前，各大浏览器对此元素的支持程度都不高。 3. output标签 output标签用定义不同类型的输出(例如脚本的输出)。output标签通常和form表单一起使用，用来输出显示计算结果。output标签有3个属性，如表34所示。 表34output标签属性 属性值描述 for元素的id名称定义输出域相关的一个或多个元素 form表单的id名称定义输入字段所属的一个或多个表单 name自定义名称定义对象的唯一名称(表单提交时使用) 基本语法格式如下： 默认内容 注意： output标签中的内容为默认显示内容，它会随着相关元素的改变而变化。 使用output标签实现加法计算器的应用，如例33所示。 【例33】output标签应用 output标签应用

output标签演示：

加法计算器
+ = 0
在浏览器中的显示效果如图35所示。 图35加法计算器效果 3.1.3HTML5新增属性 HTML5给表单新增了一些属性，如表35所示。 表35新增常用属性 属性值描述 placeholder占位符，提供可描述输入字段预期值的提示信息 autofocus规定当页面加载时 input 元素应该自动获得焦点 multiple多文件上传 autocomplete规定表单是否应该启用自动完成功能，有两个值： on和off，on表示记录已经输入的值 required校验控件为必填项，内容不能为空 accesskey规定激活(使元素获得焦点)元素的快捷键，采用Alt+s的形式 1. placeholder属性 placeholder属性为input控件提供一种提示信息，该属性的值将会以灰色的字体显示在文本框中，当文本框获得焦点时，提示信息消失;当失去焦点时，提示信息显示(前提是该文本框的内容为空)。 语法格式如下： 2. autofocus 属性 autofocus是指在页面加载时，控件自动获得焦点，可以直接输入内容。这个属性在注册登录页面及表单的第1项input中比较实用。 语法格式如下： 注意： 一个页面只能有一个控件有该属性。 3. autocomplete属性 autocomplete属性用于启用/关闭自动完成功能。其作用是对表单字段的值填写完成后记录所填写的值，当再返回时，恢复之前表单字段的值，即用户正在输入的内容是否显示曾经填写过的内容选项，此功能取决于两个属性值on(开启)、off(关闭)。autocomplete 属性适用于
，以及下面的 类型： text、search、url、telephone、email、password、datepickers、range及color，如例34所示。 【例34】 autocomplete属性的应用 autocomplete属性的应用 姓氏：
名字:
地址:
在浏览器中的显示效果如图36所示。 图36autocomplete属性的应用效果 为标签添加autocomplete="on"属性，开启自动提示内容效果。图36(a)为页面首次加载后的效果，由图可见与普通框没有什么区别。先在文本框中输入一次关键词(如admin)并单击“提交”按钮后重新回到该页面，在第2次重新输入内容时会在输入框下方自动显示出曾经填写过的关键词内容，如图36(b)所示的效果。 4. required属性 一旦为某输入型控件设置了 required 属性，则此项必镇，不能为空，否则无法提交表单。 以文本输入框为例，要将其设置为必填项，按照以下方式添加 required 属性即可： required属性是最简单的一种表单验证方式。 5. accesskey属性 accesskey属性的示例代码如下： 用户名: 密码: 单击此处 将这些标签设置accesskey属性后，使用Alt+accesskey属性中设置的值，就可激活对应的HTML元素，例如，在浏览器中按快捷键Alt+x时会跳转到超链接的百度页面； 按快捷键Alt+p时密码文本框会自动获取焦点。 注意： accesskey的值可以为任意字母、数字、标点符号，即键盘上存在的字符(前提是这个快捷键没有被占用)。 表单新增属性的综合应用如例35所示。 【例35】表单新增属性综合应用 表单新增属性综合应用
学生档案 用户名：
住宿费：
手机号：
相片：
在浏览器中的显示效果如图37所示。 图37表单新增属性综合应用效果 3.2HTML5新增结构标签 3.2.1新增文档结构标签 在HTML5之前，使用机器来阅读一个网页是非常困难的，通常用
对网页整体布局，常见网页布局包括页眉、页脚、导航菜单和正文部分，为了区分文档中的不同
内容，一般会为其配上不同的 id 来标识，代码如下：
这是网页的正文
这些元素的用途，从机器搜索引擎的角度出发，它并不认识这些div元素具体是用来做什么的，因为它看不懂这些id的意义，所以为了能够让机器理解这些元素的意义，HTML5新增了语义化标签来代替之前的div布局方式，这样的网页结构对于搜索引擎更加友好，使网页内容能够更好地被搜索引擎抓取，新增文档结构标签如表36所示。 表36HTML5新增文档结构标签 标签描述
页眉标签，定义文档的标题