原文：The Definitive Guide to HTML5
协议：CC BY-NC-SA 4.0
十三、定制输入元素
在前一章中，我向您展示了input元素的基本用法，它生成了一个简单的文本框，用户可以在其中输入数据。这种方法的问题是用户可以输入任何数据。这在某些情况下可能没问题，但在其他情况下，您可能希望从用户那里得到一个特定于的类型的数据值。在这种情况下，您可以配置input元素以不同的方式从用户那里收集数据。通过type属性配置input元素，HTML5 中有 23 个不同的值。在你选择了你想要的type值后，你就可以访问更多的属性了。总共有 30 个属性可用于input元素，其中许多只能用于某些type值。我将在本章中解释所有不同的类型和相关的属性。表 13-1 对本章进行了总结。
使用 input 元素进行文本输入
如果将type属性设置为text，浏览器将显示一个单行文本框。这与您在上一章中看到的input元素的样式相同，也是您完全省略type属性时使用的样式。表 13-2 总结了该input元素类型可用的属性(这些属性是对前一章所述属性的补充)。
在接下来的部分中，我将描述这种类型的input的可用属性。
提示对于多行文本框，使用textarea元素，我在第十四章中描述过。
指定元素尺寸
有两个属性会影响文本框的大小。maxlength属性指定用户可以输入的字符数的上限，而size属性指定文本框可以显示多少个字符。对于这两个属性，字符数都表示为正整数值。清单 13-1 展示了这两种属性的使用。
清单 13-1。使用 maxlength 和 size 属性
`
对于第一个input元素，我应用了值为10的maxlength属性。这意味着浏览器可以自由决定文本框在屏幕上所占的空间，但用户最多只能输入十个字符。如果用户试图输入超过十个字符，浏览器将会丢弃输入。
对于第二个input元素，我已经应用了size属性，值也是10。这意味着浏览器必须确保调整文本框的大小，使其能够显示十个字符。size属性对用户可以输入的字符数没有任何限制。
我已经将这两个属性应用于第三个input元素。这具有固定屏幕大小和限制用户可以输入的字符数的效果。你可以在图 13-1 中看到这些属性是如何影响显示和数据输入的。
图 13-1。使用 maxlength 和 size 属性
在图 13-1 中，你可以看到浏览器中的布局以及提交表单时传递给服务器的数据。我在这个例子中使用了 Firefox，因为我的首选浏览器 Chrome 没有正确实现size属性。当查看已经提交给服务器的数据时，请注意city数据项包含的字符比屏幕上显示的要多。正如我提到的，这是因为size属性不限制用户可以输入的字符数，只限制浏览器可以显示的字符数。
设置值和使用占位符
到目前为止，所有表单示例中的文本框都是空的，但情况不一定如此。您可以使用value属性指定一个默认值，使用placeholder属性给用户一个有用的提示，告诉他们应该输入哪种数据。清单 13-2 展示了这些使用中的属性。
清单 13-2。使用值和占位符属性
`
当您需要用户输入数据，并且希望提供一些上下文来帮助用户决定提供什么数据时，请使用placeholder属性。使用value属性提供一个默认值，或者是因为用户以前已经提供了这个信息，或者是因为这是一个很可能是正确的常见选择。你可以在图 13-2 中看到浏览器如何表示这些属性指定的值。
图 13-2。提供占位符和默认值
提示当你使用按钮元素重置表单时(如第十二章所述)，浏览器会恢复占位符和默认值。
使用数据列表
属性允许您指定一个datalist元素的id值，当用户在文本框中输入数据时，它将被用来向用户建议选项。表 13-3 描述了datalist元素。
datalist元素是 HTML5 中的新增元素，它允许您定义一组值来帮助用户提供您需要的数据。不同类型的输入元素使用datalist元素的方式略有不同。对于text类型，这些值被显示为自动完成建议。你通过option元素指定你想给用户的值，这在表 13-4 中有描述。
清单 13-3 显示了用于为文本框创建一组值的datalist和option元素。
提示在第十四章中查看select和optgroup元素时会再次看到option元素。
清单 13-3。使用数据列表元素
`
**
Refreshing Oranges
**
包含在datalist中的每个option元素代表一个您想要向用户建议的值。如果选择了option，则value属性指定将在input元素中使用的数据值。通过使用label属性或者通过在option元素中定义内容，您可以使用不同的标签来描述选项。你可以看到我已经为清单 13-3 中的Apples和Oranges option元素做了这些。图 13-3 显示了浏览器如何使用在datalist中定义的option元素。
图 13-3。使用带有文本输入元素的数据表
使用文本input类型时，使用不同的label时要小心；用户可能不明白为什么点击一个名为Lovely Apples的条目只会导致在文本框中输入Apples。有些浏览器，比如 Opera，在标签和值不同时会采取稍微不同的做法，如图图 13-4 所示。
图 13-4。Opera 显示不同的值和标签
这是一个改进(虽然注意到检测到了label属性，但是忽略了option元素的内容)，但是仍然会令人困惑。
创建只读和禁用的文本框
属性readonly和disabled允许你创建用户不能编辑的文本框。每一种都创造了不同的视觉效果。清单 13-4 显示了这两个属性。
清单 13-4。使用只读和禁用属性
`
你可以在图 13-5 中看到浏览器是如何处理这些属性的。
图 13-5。使用禁用和只读属性
清单 13-4 中的第一个input元素具有disabled属性，其作用是使文本框变灰，防止用户编辑文本。第二个input元素有readonly属性，它阻止用户编辑文本，但不影响文本框的外观。当你提交表单时，用value属性定义的值被提交给服务器，如图 13-6 所示。
图 13-6。来自具有禁用和只读属性的输入元素的表单数据
请注意，input元素中带有disabled属性的数据没有提交给服务器。如果您想要使用这个属性，并且您需要确保服务器接收到input元素的值，那么可以考虑添加一个hidden类型的input元素(参见本章后面的“使用输入元素创建隐藏数据项”一节)。
我的建议是谨慎使用readonly属性。尽管数据被提交给了用户，但是用户并不知道这个字段是不可编辑的；浏览器只是忽略击键，这可能会导致混乱。
指定文本方向
dirname属性允许您指定提交给服务器的数据值的名称，并包含用户输入的数据的文本方向。在撰写本文时，主流浏览器都不支持该属性。
使用输入元件进行密码输入
type属性的password值创建了一个用于输入密码的input元素。用户键入的字符由屏蔽字符表示，例如星号(*)。表 13-5 列出了当type属性设置为password时可用的附加属性。其中许多与text型共享，工作方式相同。
清单 13-5 显示了正在使用的password类型。
清单 13-5。使用密码类型
`
在清单 13-5 的中，我使用了placeholder属性来给用户一些关于我期望的密码类型的指导。当用户开始键入时，浏览器会删除占位符并用圆形项目符号替换每个键入的字符(不同的浏览器使用不同的屏蔽字符)。你可以在图 13-7 中看到这个效果。
图 13-7。使用输入元素的密码类型
冒着显而易见的风险，屏蔽只适用于用户输入的文本显示。当你提交表单时，服务器收到明文的密码，正如你在图 13-8 中看到的，它显示了来自Node.js脚本的响应。
图 13-8。提交包含密码字段的表单
注意input元素的password类型在提交给服务器时不保护密码。用户输入的值以明文形式传输。如果安全性对您的站点和应用很重要(应该如此)，您应该考虑使用 SSL/HTTPS 来加密浏览器和服务器之间的通信。
使用输入元素创建按钮
input元素的submit、reset和button类型创建的按钮与使用button元素时创建的按钮非常相似，在第十二章中有描述。表 13-6 总结了这些input类型。
使用submit类型时可用的附加属性与使用button元素时相同。你可以在第十二章中找到这些属性的描述和演示。reset和button类型没有定义任何额外的属性。
对于所有这三种input类型，显示在按钮上的标签取自value属性，如清单 13-6 所示。
清单 13-6。使用输入元素创建按钮
`
** ** ** ** ** ** `
你可以在图 13-9 中看到浏览器是如何显示这些按钮的。如您所见，它们与您使用button元素时的外观相同。
图 13-9。使用输入元素创建按钮
使用input元素创建按钮和使用button元素的区别在于，你可以使用button元素显示标记文本(你可以在第十二章中看到一个例子)。一些老的浏览器，特别是 IE6，对button元素做了奇怪的事情，这就是为什么大多数网站倾向于使用input元素——它们传统上被更一致地处理。
使用输入元素来限制数据输入
HTML5 为input元素的type属性引入了一些新值，让您可以更具体地了解您希望从用户那里获得的数据类型。在接下来的部分中，我将介绍每个新的type值并演示其用法。表 13-7 总结了这些新的type值。
这些input类型中的一些向用户提供了关于他们可能输入或选择的数据的限制类型的强烈视觉提示(例如，checkbox和radiobutton类型)。其他的，比如email和url类型，依赖于输入验证，我在第十四章的中描述过。
使用输入元素获得一个数字
type属性的number值创建了一个只接受数值的输入框。一些浏览器，特别是 Chrome，还会显示选择器箭头来增加和减少数值。表 13-8 描述了使用该输入类型时可用的附加属性。
min、max、step和value属性的值可以用整数或小数表示；例如，3和3.14都有效。清单 13-7 显示了正在使用的input的number类型。
清单 13-7。使用数字类型的输入元素
`
`
在清单 13-7 中，我请求用户支付他们所在地区最喜欢的水果的价格。我指定了最小值1，最大值100，步长1，起始值1。你可以在图 13-10 中看到浏览器是如何显示这种类型的input元素的。在这个图中，我展示了 Firefox 和 Chrome 请注意，Chrome 显示了小箭头按钮，可以用来增加数值，但 Firefox 没有。
图 13-10。Chrome 和 Firefox 显示输入元素的数字类型
使用输入元素获得一个给定范围内的数字
获取数值的另一种方法是使用input元素的range类型，它限制用户从预定的范围内选择一个值。range类型支持与number类型相同的属性集(如表 13-8 所示)，但是浏览器显示元素的方式不同。清单 13-8 显示了正在使用的range型。
清单 13-8。使用输入元素的范围类型
`
`
你可以在图 13-11 中看到浏览器如何显示range类型。
图 13-11。使用输入元素的范围类型
使用输入元素获得布尔响应
input元素的checkbox类型创建一个复选框，允许用户做出真/假选择。type属性的这个值支持表 13-9 中显示的附加属性。
清单 13-9 显示了正在使用的input元素的checkbox类型。
清单 13-9。使用输入元素创建复选框
`
`
你可以在图 13-12 中看到浏览器是如何显示这种input元素的。
图 13-12。创建带有输入元素 的复选框
使用checkbox类型的问题是，当提交表单时，只有当用户选中复选框时，数据值才会被发送到服务器。因此，如果我提交如图图 13-12 所示的表单，我会得到如图图 13-13 所示的Node.js脚本的响应。
图 13-13。表单提交的数据项如上图所示
请注意，password元素有一个值，但checkbox没有。缺少checkbox类型input元素的数据项表示用户没有选中该框；数据值的出现表示用户已经勾选了该复选框，如图图 13-14 所示。
图 13-14。提交复选框被选中的表单
使用输入元素创建固定选项
元素的类型允许您创建一组单选按钮，让用户从一组固定的选项中进行选择。当只有少量有效数据值可供使用时，这很有用。表 13-10 描述了此类input元素支持的附加属性。
每个类型为radio的input元素代表用户的一个选项。通过确保所有的input元素都具有相同的name属性值，可以创建一组独占选项。你可以在清单 13-10 中看到这是如何工作的。
清单 13-10。使用广播类型创建固定选择
`
** Vote for your favorite fruit **
`在这个例子中，我创建了三个radio类型的input元素。这三者的name属性的值都是fave，这意味着浏览器会将它们视为彼此相关。这意味着选择其中一个按钮将导致其他两个按钮被取消选择。我使用了value属性来指定提交表单时发送给服务器的数据值，并使用了fieldset和legend属性来给用户一个三个按钮相关的视觉提示(这是可选的；第十二章中的描述了fieldset和legend元素。我已经在第一个radio元素上应用了checked属性，因此总是有一个值被选中。你可以在图 13-15 中看到浏览器如何显示这些输入元素。
图 13-15。使用 input 元素创建一组单选按钮
最多会勾选一个单选按钮。如果没有应用checked属性并且用户没有做出选择，则不能有选中的按钮。像input元素的checkbox类型一样，如果元素没有被选中，没有值会被提交给服务器，这意味着如果用户没有做出选择，没有数据项会出现。
使用输入元素获得格式化字符串
email、tel和url类型值分别配置input元素只接受有效的电子邮件地址、电话号码或 URL 输入。这三种类型都支持表 13-11 中所示的附加属性。
email类型还支持multiple属性，当应用该属性时，允许 input 元素接受多个电子邮件地址。您可以看到清单 13-11 中使用的所有三种类型的input元素。
清单 13-11。使用电子邮件、电话和 url 输入类型
`
这些input类型对用户来说是常规的文本框，只在提交表单时验证用户输入的数据。这是新的 HTML5 输入验证支持的一部分，我在第十四章中描述过。验证的质量是可变的。所有主流浏览器都能很好地处理email类型，并正确检测有效的电子邮件地址。url型有点碰运气。一些浏览器简单地将http://添加到用户输入的任何内容前面，一些浏览器要求用户输入以http://开头的值，但不验证其余的值，还有一些浏览器只让用户提交任何值而不验证。tel输入类型是最不受支持的。在我写这篇文章的时候，主流浏览器都没有应用任何有用的验证。
使用输入元素获取时间和日期
HTML5 还引入了一些input元素类型来收集用户的日期和时间。表 13-12 描述了这些输入类型。
众所周知，日期和时间很难处理，可悲的是，这些新的input元素类型的规范与理想状态相差甚远。日期格式取自 RFC 3339(可从http://tools.ietf.org/html/rfc3339获得)，它描述了严格描述和格式化的时间戳。这是一种非常不同的日期表达方式，不同于实际使用的和用户所期望的许多地区差异。例如，很少用户会意识到datetime格式中的T表示时间段的开始，而Z表示不变的祖鲁语时区。表 13-12 中描述的所有input元素类型都支持表 13-13 中描述的附加属性。
清单 13-12 显示了正在使用的date型。
清单 13-12。使用输入元素的日期类型
`
`
浏览器对这些新的input类型的支持仍然非常有限。在我写这篇文章的时候，Opera 提供了最好的支持，并提供了一个日期选择器小部件，如图 13-16 所示。
图 13-16。选择与 Opera 的约会
下一个最好的实现是在 Chrome 中，它提供了与input元素的number类型相同的文本框，带有小的上下按钮来增加和减少时间。其他主流浏览器只是预设了一个单行文本框，让用户自己解决所有问题。我确信这种情况会得到改善，但在此之前，我建议查看流行的 JavaScript 库(如 jQuery)中的日历选择器。
使用输入元素获得颜色
input元素的color类型限制用户选择颜色。这个input类型支持附加属性list，我在本章前面的“使用数据列表”一节中描述了这个属性。
颜色值精确地表示为七个字符:一个前导字符#，后面跟着三个两位数的十六进制值，代表红色、绿色和蓝色值(例如，#FF1234)。不支持 CSS 颜色名称，如red或black。你可以在清单 13-13 的中看到这种类型的input元素。
清单 13-13。使用输入元素的颜色类型
`
`
大多数浏览器都没有实现对这种类型的input元素的任何特殊支持。Google Chrome 允许用户输入一个值，并在执行输入验证时报告格式问题(我在第十四章中描述过)。Opera 提供了最好的支持，它显示了一个简单的颜色选择器，可以扩展为一个全范围的颜色选择器对话框，如图图 13-17 所示。
图 13-17。Opera 中的颜色选择器支持
使用输入元素获取搜索词
input元素的search类型为用户提供了一个单行文本框，用于输入搜索词。这是一个不寻常的input类型，因为它实际上什么也不做。对用户可以输入的数据没有内置限制，也没有特殊功能，例如搜索本地页面或使用用户的默认搜索引擎来执行搜索。这种类型的input元素支持与text类型相同的附加属性，你可以在清单 13-14 中看到它的使用。
清单 13-14。使用输入元素的搜索类型
`
`
浏览器可以选择显示文本框的方式，使其明显显示您正在收集搜索词。谷歌浏览器会显示一个标准的文本框，直到用户开始输入，这时会显示一个取消图标，如图图 13-18 所示。在撰写本文时，其他主流浏览器只是将这种类型的input视为普通的text类型。
图 13-18。谷歌浏览器显示的输入搜索类型
使用输入元素创建隐藏数据项
有时，您希望确保在提交表单时将数据项发送到服务器，而不向用户显示或允许编辑它们。一个常见的例子是当 web 应用向用户显示数据库记录以供编辑时。您经常需要在 web 页面中包含主键，这样您就能以简单、方便的方式知道用户正在编辑哪条记录，但是您不想向用户显示这些信息。您使用input元素的hidden类型来实现这种效果。清单 13-15 展示了如何使用这种类型的input元素。
清单 13-15。创建隐藏类型输入元素
`
`
在本例中，我创建了一个hidden input元素，其name属性的值为recordID，其value属性为1234。当页面显示时，浏览器不提供任何输入元素的可视化表示，如图 13-19 所示。
图 13-19。带有隐藏输入元素的网页
当用户提交表单时，浏览器使用我们为hidden input元素提供的name和value包含一个数据项。你可以在图 13-20 中看到这一点，它显示了提交上图所示的表单时来自Node.js脚本的响应。
图 13-20。来自服务器的响应显示隐藏的数据值
注意这种输入元素只适用于为了方便或可用性而被隐藏的数据，而不是因为它敏感或对安全性有影响。用户可以通过查看页面的 HTML 来查看隐藏的输入元素，数据值以明文形式从浏览器发送到服务器。大多数 web 应用框架都支持将敏感数据安全地保存在服务器上，并基于会话标识符(通常表示为 cookies)将其与请求相关联。
使用输入元素创建图像按钮和地图
input元素的image类型允许您创建显示图像的按钮，并在单击时提交表单。这种类型的input元素支持表 13-14 中显示的附加属性。
清单 13-16 显示了正在使用的input元素的image类型。
清单 13-16。使用输入元素的图像类型
`
** ** `
你可以在图 13-21 中看到浏览器是如何显示这种类型的input元素的。
图 13-21。使用图像类型的输入元素
当用户单击图像时，浏览器提交表单并包含两个代表image input元素的数据项。这些表示用户点击的 x 和 y 坐标，相对于图像的左上角。您可以在图 13-22 中看到数据值是如何提交的，图中显示了提交上图中的表单时来自Node.js脚本的响应。
图 13-22。Node.js 对包含图像输入元素的表单的响应
提供坐标的事实意味着您可以使用包含区域的图像，这些区域根据用户在图像上单击的位置来表示不同的动作和对用户的响应。
使用输入元素上传文件
input元素的最后一种类型是file，它允许您将文件上传到服务器，作为表单提交的一部分。这种类型的input支持表 13-15 中显示的附加属性。
清单 13-17 显示了正在使用的input元素的file类型。
清单 13-17。使用输入元素的文件类型上传文件
`
只有当表单的编码类型为multipart/form-data时，您才能上传文件。如您所见，我使用了form元素的enctype属性来设置编码。你可以在图 13-23 中看到浏览器如何显示输入元素。
图 13-23。输入元素的文件类型
当用户点击Choose File按钮时，会出现一个对话框，允许用户选择一个文件。提交表单时，文件的内容将被发送到服务器。
总结
在这一章中，我已经向你展示了许多不同类型的input元素。没有其他 HTML 元素有这么多不同的功能，任何需要与用户交互的网页或 web 应用都将严重依赖于input元素。
在下一章，我将向你展示一些你可以在表单中使用的其他类型的元素。我还将演示新的 HTML5 输入验证特性，该特性允许您在提交表单之前检查用户是否输入了您想要处理的数据类型。
十四、其他表单元素和输入验证
在这一章中，我完成了 HTML 表单特性之旅。您还可以在 HTML 表单中使用另外五个元素，我将依次对它们进行描述。我还解释了 HTML5 中引入的新的输入验证特性。这些新特性允许您对用户输入的数据应用约束，并在满足这些约束之前阻止提交表单。表 14-1 对本章进行了总结。
使用其他表格元素
在接下来的部分中，我描述了可以在表单中使用的其他五个元素。这些是select、optgroup、textarea、output和keygen。
创建选项列表
元素让您创建选项列表，用户可以从中进行选择。这是你在第十三章中看到的input元素的radiobutton类型的一个更紧凑的替代，非常适合更大的选项集。表 14-2 总结了select要素。
name、disabled、form、autofocus和required属性的工作方式与input元素相同。size属性指定您想要向用户显示多少个选项，当应用multiple属性时，用户可以选择多个值。
您使用option元素来定义您想要呈现给用户的选项。这与第十二章中的datalist元素使用的option元素相同。清单 14-1 展示了如何使用select和option元素。
清单 14-1。使用选择和选项元素
`
`
在清单 14-1 中，我使用了select元素并定义了四个option元素来表示我想提供给用户的选择。我已经将selected属性应用于第一个option元素，这样当页面显示时它会被自动选中。在图 14-1 中可以看到select元素的初始外观以及浏览器如何显示option元素。
图 14-1。使用 select 元素为用户预设一个选项列表
您可以使用select元素上的size属性向用户显示多个选项，并使用multiple属性允许用户选择多个选项，如清单 14-2 所示。
清单 14-2。在选择元素上使用大小和多个属性
`
在清单 14-2 中，我应用了size和multiple属性，这产生了你在图 14-2 中看到的效果。您可以通过在单击的同时按住 Ctrl 键来选择多个选项。我还应用了一个内联样式(如第四章中所述)来改变垂直对齐，这样label与select元素的顶部对齐(默认情况下，它与底部对齐，这看起来有点奇怪)。
图 14-2。使用选择元素显示和选择多个项目
向选择的元素添加结构
您可以通过使用optgroup元素向select元素添加一些结构。表 14-3 描述了这个元素。
您使用optgroup元素将option元素组合在一起。label属性允许您为分组的option创建标题，而disabled属性允许您阻止用户选择包含在optgroup中的任何option元素。清单 14-3 显示了使用中的optgroup元素。
清单 14-3。使用 optgroup 元素
`
`
在图 14-3 的中，你可以看到optgroup元素是如何将结构添加到option元素列表中的。optgroup标签纯粹是为了结构；用户不能选择这些值。
图 14-3。使用 optgroup 元素
捕获多行文本
元素创建了一个多行文本框，用户可以在其中输入多行文本。表 14-4 总结了textarea要素。
rows和cols属性指定了textarea的尺寸，您可以将wrap属性设置为硬或软，以控制如何将换行符添加到用户输入的文本中。其他属性的工作方式与input元素上相应属性的工作方式相同，详见第十二章和第十三章。清单 14-4 显示了使用中的textarea元素。
清单 14-4。使用 textarea 元素
`
**
在清单 14-4 的中，我添加了一个宽 20 列、高 5 行的textarea。你可以在图 14-4 中看到浏览器是如何显示的。
图 14-4。使用 textarea 元素
属性控制提交表单时如何在文本中插入换行符。如果将wrap属性设置为 hard，内容将插入换行符，这样提交的文本中没有一行的字符数超过cols属性的值。
表示计算的结果
output元素表示计算的结果。表 14-5 总结了这一要素。
清单 14-5 展示了使用中的output元素。
清单 14-5。使用输出元件
`
在清单 14-5 中，我使用 JavaScript 事件系统创建了一个简单的计算器(你可以在第三十章中了解更多关于事件的信息)。有两个number类型的input元素，当用户输入时，input元素的值相乘，结果显示在output元素中。你可以在图 14-5 中看到这是如何出现在浏览器中的。
图 14-5。使用输出元件
创建公钥/私钥对
您使用keygen元素来生成一对公共/私有密钥。这是公钥加密的一个重要功能，它支撑着 web 安全，包括客户端证书和 SSL。提交表单时，会创建一对新的密钥。公钥被发送到服务器，私钥由浏览器保留并添加到用户的密钥库中。表 14-6 总结了keygen要素。
name、disabled、form和autofocus属性的作用就像它们对input元素的作用一样，如第十二章所述。属性keytype指定了将用于生成密钥对的算法，但是唯一支持的值是RSA。challenge属性指定了一个质询短语，它与公钥一起被发送到服务器。
浏览器对该元素的支持是不完整的，那些支持该元素的浏览器以不同的方式向用户呈现它。我的建议是在支持得到改善之前避免使用这个元素。
使用输入验证
当您请求用户输入时，您会冒接收到您无法使用的数据的风险。这可能是因为用户犯了一个错误，或者你没有清楚地传达你想要的那种回应。
HTML5 引入了对输入验证的支持，在这里您可以向浏览器提供一些关于您需要的数据类型的基本信息。在提交表单之前，浏览器使用这些信息来检查用户是否输入了可用的数据。如果数据有问题，系统会提示用户更正问题，在问题解决之前，用户不能提交表单。
在浏览器中执行验证并不是一个新想法，但是在 HTML5 之前，你必须使用 JavaScript 库，比如优秀的 jQuery 验证插件。HTML5 具有内置的验证支持当然很方便，但是正如您将看到的，这种支持是初级的，并且在不同浏览器之间不一致。
在浏览器中进行输入验证的好处是用户可以立即得到关于问题的反馈。如果没有这个特性，用户必须提交表单，等待服务器响应，然后处理报告的任何问题。在低性能网络和过度使用的服务器上，这可能是一个缓慢而令人沮丧的过程。
注意浏览器中的输入验证是对服务器验证的补充，而不是替代。您不能指望用户使用正确支持输入验证的浏览器，恶意用户编写一个脚本将输入直接发送到您的服务器，而不进行任何形式的验证，这是一件小事。
您通过属性来管理输入验证。表 14-7 显示了哪些元素(和输入类型)支持不同的验证属性。
确保用户提供一个值
最简单的输入验证是确保用户提供一个值。您可以使用required属性来实现这一点。在提供值之前，用户不能提交表单，尽管对值没有限制。清单 14-6 显示了正在使用的required属性。
清单 14-6。使用所需的属性
`
在清单 14-6 的中，我将required属性应用于三种类型的input元素。用户只有在提供了所有三个值之后才能提交表单。对于text和password类型，这意味着用户必须在文本框中输入文本，并且必须勾选checkbox类型的文本框。
提示用value属性设置的初始值将满足required验证属性。如果你想强迫用户输入一个值，考虑使用placeholder属性。关于value和placeholder属性的详细信息，参见第十二章。
每个支持输入验证的浏览器的方式略有不同，但效果是一样的:当用户单击按钮提交表单时，第一个具有required属性但没有值的元素会被标记出来以引起用户的注意。然后，用户可以更正遗漏并再次提交表单。如果有其他遗漏，则标记下一个问题元素。这个过程一直持续到用户为所有具有required属性的元素提供了一个值。你可以在图 14-6 中看到谷歌 Chrome 如何吸引用户对某个问题的注意力。
图 14-6。谷歌浏览器将用户的注意力吸引到一个必填字段
HTML5 输入验证支持是相当基本的，尤其是如果您习惯于通过 jQuery 等库获得更丰富的功能。例如，每个问题依次突出显示给用户，这意味着如果一个表单中有多个问题，用户被迫通过重复提交表单并一次解决一个问题来进行逐步发现的旅程。没有所有验证错误的摘要，并且您无法控制验证错误警告的外观。
确保值在界限内
使用min和max属性来确保数值和日期值在特定的范围内。清单 14-7 显示了这些应用于input元素的number类型的属性。
清单 14-7。使用最小和最大属性
`
您不需要同时应用这两个属性。如果您只应用了max属性，那么您将为该值创建一个上限，如果您只应用了min属性，那么您将创建一个下限。应用这两个值时，可以约束上限值和下限值来创建一个范围。min和max值包含在内，这意味着如果您指定max值为100，那么直到并包括 100的任何值都是允许的。
你可以在图 14-7 中看到浏览器如何报告一个范围验证错误。
图 14-7。一个范围验证错误
提示min和max属性只有在用户提供值时才会生效。如果文本框为空，浏览器将允许用户提交表单。由于这个原因，mix和max属性经常与required属性一起使用，如前一节所述。
确保一个值匹配一个模式
属性确保一个值匹配一个正则表达式。清单 14-8 显示了正在使用的pattern属性。
清单 14-8。使用模式属性
`
在清单 14-8 中，我应用了一个简单的模式来确保用户输入两个名字，用空格分开。这不是验证值是名称的明智方法，因为它忽略了名称的所有区域差异，但它确实提供了一个合适的验证支持示例。您可以在图 14-8 中看到浏览器如何显示模式验证错误。
图 14-8。模式验证错误
提示pattern属性只在用户提供一个值时产生验证。如果文本框为空，浏览器将允许用户提交表单。因此，该属性通常与本章前面描述的required属性一起使用。
确保值是电子邮件地址或 URL
我在第十三章的中描述的input元素的email和url类型分别确保用户输入了有效的电子邮件地址或完全合格的 URL(嗯，差不多——浏览器对email类型的支持相当不错，但url类型有些粗略)。
我们可以将pattern属性与这些类型的input元素结合起来，进一步限制用户可以输入的值；例如，将电子邮件地址限制在特定的域中。清单 14-9 提供了一个演示。
清单 14-9。使用带有电子邮件输入元素类型的模式属性
`
在清单 14-9 中，我使用了三个验证特性。元素的类型确保用户输入有效的电子邮件地址。required属性确保用户提供一个值。pattern属性确保用户输入属于特定域的电子邮件地址(mydomain.com)。使用email input类型和pattern属性似乎是多余的，但是input元素仍然负责确保@字符之前的所有内容作为电子邮件地址是有效的。
禁用输入验证
有时，您希望允许用户在不验证内容的情况下提交表单。一个很好的例子是当用户需要通过一个不完整的过程保存进度时。您希望用户能够保存他们输入的任何内容，以便他们可以在以后继续该过程。如果在保存进度之前必须纠正所有错误，这将是一个令人沮丧的过程。
您可以不经过验证就提交表单，方法是将novalidate属性应用于form元素，或者将formnovalidate属性应用于可以提交表单的button和input元素的类型。清单 14-10 显示了如何禁用表单验证。
清单 14-10。禁用输入验证
`
** ** `
在这个例子中，我在 HTML 文档中添加了一个 input 元素，它将提交表单而不进行验证，允许用户保存进度(当然，假设在服务器上实现了一个相应的特性，它将接受来自浏览器的值而不进行进一步的验证)。
总结
在这一章中，我向您展示了可以在表单中使用的其他元素，并且演示了 HTML5 中引入的新的输入验证特性。
十五、嵌入内容
在这一章中，我介绍了可以用来在 HTML 文档中嵌入内容的元素。到目前为止，我主要关注于使用 HTML 元素在文档中创建结构和含义。本章中的元素允许您丰富这些文档。
注意一些用于嵌入内容的 HTML5 元素在本书的其他地方有所涉及。有关详细信息，请参见本章末尾的“其他嵌入元素”一节。
表 15-1 对本章进行了总结。
嵌入图像
元素允许你在 HTML 文档中嵌入图片。表 15-2 总结了这个元素，它是 HTML 中使用最广泛的元素之一。
要嵌入图像，需要使用src和alt属性，如清单 15-1 所示。
清单 15-1。嵌入图像
`
** 
**
属性指定了您想要嵌入的图像的 URL。在本例中，我为图像文件https://blog.csdn.net/wizardforcel/article/details/triathlon.png指定了一个相对 URL。alt属性定义了img元素的回退内容。如果图像无法显示(因为找不到图像，因为浏览器不支持图像格式，或者因为浏览器或用户使用的设备无法显示图像)，将显示此内容。你可以在图 15-1 中看到图像。
图 15-1。用 img 元素嵌入图像
使用width和height属性来指定由img元素显示的图像的大小(以像素为单位)。图像直到 HTML 标记被处理后才被加载，这意味着如果你忽略了width和height属性，浏览器不知道屏幕上有多少空间分配给图像。因此，浏览器必须从图像文件本身确定大小，然后在屏幕上重新定位内容以适应它。这可能会让用户感到不舒服，因为他们可能已经开始阅读直接包含在 HTML 中的内容了。指定width和height属性让浏览器有机会在页面上正确地布局元素，即使图像还没有被加载。
注意width和height属性告诉浏览器图像的大小，而不是你想要的大小。您不应该使用这些属性来动态调整图像的大小。
在超链接中嵌入图像
img元素的一个常见用途是结合a元素创建一个基于图像的超链接(我在第八章中描述过)。这是基于图像的表单提交按钮的对应按钮(在第十二章中描述)。清单 15-2 展示了如何一起使用img和a元素。
清单 15-2。使用 img 和 a 元素创建服务器端图像映射
`
** **
浏览器显示图像没有任何不同，正如你在图 15-2 中看到的。因此，重要的是给用户视觉提示，特定的图像代表超链接。这可以通过 CSS 来完成，或者最好是通过图像的内容来完成。
图 15-2。在超链接中嵌入图像
如果你点击图片，浏览器将导航到由父元素a的href属性指定的 URL。如果您将ismap属性应用到img元素，您将创建一个服务器端图像映射，这意味着您在图像上单击的位置将被附加到 URL 上。例如，如果您单击了距离图像顶部 4 个像素和距离图像左边缘 10 个像素的位置，浏览器将导航到以下位置:
http://titan/listings/otherpage.html?10,4
(很明显，这个 URL 是基于我从我的开发服务器titan加载原始 HTML 文档的事实，a元素上的href属性是一个相对 URL。)清单 15-3 展示了otherpage.html的内容，它包含了一个简单的脚本，显示了点击的坐标。
清单 15-3。otherpage.html 的内容
`
The X-coordinate is ??
The Y-coordinate is ??
`你可以在图 15-3 中看到鼠标点击的效果。
图 15-3。显示鼠标点击超链接中嵌入的图像的坐标
服务器端图像映射的假设是，当用户单击图像的不同区域时，服务器会有不同的反应，可能会返回不同的响应。如果从img元素中省略了ismap属性，鼠标点击的坐标就不会包含在请求的 URL 中。
创建客户端图像地图
您可以创建一个客户端图像地图，点击图像中的区域会导致浏览器导航到不同的 URL。这不需要来自服务器的任何指示，这意味着您需要定义图像的区域以及它们导致使用元素的动作。客户端图像地图的关键元素是map，总结在表 15-3 中。
map元素包含一个或多个area元素，每个元素表示图像中可以点击的区域。表 15-4 总结了area要素。
area元素的属性可以分为两类，第一类是当用户点击area所代表的图像区域时，浏览器将导航到的 URL。这些在表 15-5 中有描述，类似于你在其他元素上看到的相应属性。
更有趣的属性形成了第二个类别:shape和coords属性。您使用这些来表示用户可以点击的图像区域。shape和coords属性一起工作。coords属性的含义取决于shape属性的值，如表 15-6 所述。
现在，我已经描述了元素，我们可以继续一个例子。演示图像地图的困难之一是area元素在浏览器屏幕上是不可见的。为此，图 15-4 展示了我打算在例子中定义的两个区域，使用了前一节的https://blog.csdn.net/wizardforcel/article/details/triathlon.png图像。为了简单起见，我把两个区域都做成矩形。
图 15-4。规划图像地图的区域
从这个图中，你可以创建地图和区域元素，如清单 15-4 所示。
清单 15-4。创建图像地图
`
** **
注意在img元素上添加了usemap属性。这个属性的值必须是一个散列名称引用，这意味着一个以#字符开头的字符串，后面是您想要使用的地图的name属性的值——在本例中是#mymap。这就是如何将map元素与图像相关联。
如果用户点击图像的游泳部分，浏览器导航到swimpage.html。如果用户点击图像的循环部分，浏览器会导航到cyclepage.html。点击图像上的任何其他地方，浏览器就会导航到otherpage.html。
提示注意，在使用客户端图像地图时，不需要使用a元素来显式创建超链接。
嵌入另一个 HTML 文档
元素允许你在现有的文档中嵌入另一个 HTML 文档。表 15-7 总结了这一要素。
清单 15-5 展示了如何使用iframe元素。
清单 15-5。使用 iframe 元素
`
Things I like
** **
** **
在这个例子中，我创建了一个iframe，它的name属性值为frame。这创建了一个名为myframe的浏览上下文。然后，我可以将这个浏览上下文与其他元素的目标属性一起使用，具体来说就是 a、form、button、input和base。我使用a元素来创建一对超链接，当跟随它们时，会将它们的href属性中指定的 URL 加载到iframe中。你可以在图 15-5 中看到这是如何工作的。
图 15-5。使用 iframe 嵌入外部 HTML 文档
width和height属性以像素为单位指定尺寸。src属性指定了最初应该在iframe中加载和显示的 URL，而srcdoc属性允许您定义一个 HTML 文档来内联显示。
HTML5 为iframe元素引入了两个新属性。第一个是seamless，指示浏览器显示iframe内容，就好像它们是主 HTML 文档的一个组成部分。从图中可以看到，默认情况下应用了边框，如果内容大于由width和height属性指定的大小，就会出现滚动条。
第二个属性sandbox，对 HTML 文档进行限制。当应用的属性没有值时，如下所示:
`…
以下是禁用的:
- 剧本
- 形式
- 插件
- 指向其他浏览上下文的链接
此外，iframe中的内容被视为来自不同于 HTML 文档其他部分的来源，这加强了额外的安全措施。您可以通过定义sandbox属性的值来启用单个特性，如下所示:
`…
可使用的一组数值在表 15-8 中描述。不幸的是，在我写这篇文章的时候，主流浏览器都不支持沙盒和无缝属性，所以我也无法演示。
使用插件嵌入内容
object和embed元素都是作为一种扩展浏览器功能的方式出现的，通过增加对插件的支持，插件可以处理浏览器不直接支持的内容。这些元素是在我在《??》第一章中提到的浏览器大战期间引入的，每个元素都是由不同的阵营构想出来的。
最近，object元素已经成为 HTML4 规范的一部分，但是embed元素还没有——尽管embed元素已经被广泛使用。为了使这两个元素对等，HTML5 增加了对embed元素的支持。为了兼容，这给了你两个非常相似的元素。
虽然object和embed元素一般用于插件，但是也可以用来嵌入浏览器可以直接处理的内容，比如图片。在本节的后面，我将向您演示为什么这很有用。
使用嵌入元素
我将从embed元素开始，由表 15-9 总结。
清单 15-6 显示了使用中的embed元素。对于这个例子，我嵌入了一个来自[www.youtube.com](http://www.youtube.com)的视频，展示了一些谷歌工程师关于 HTML5 的演讲。
清单 15-6。使用嵌入元素
`
属性指定内容的位置，属性指定内容的 MIME 类型，以便浏览器知道如何处理它。width和height属性决定了嵌入内容在屏幕上占据的大小。您应用的任何其他属性都被视为插件或内容的参数。在本例中，我应用了一个名为 allowfullscreen的属性，YouTube 视频播放器使用它来支持全屏观看。你可以在图 15-6 中看到浏览器是如何渲染这些内容的。
图 15-6。嵌入 YouTube 视频
使用 object 和 param 元素
object元素实现了与embed元素相同的结果，但是它的工作方式略有不同，并且有一些额外的特性。表 15-10 总结了object元素。
清单 15-7 展示了如何使用object元素来嵌入与上例相同的 YouTube 视频。
清单 15-7。使用对象和参数属性
`
data属性提供了内容的位置，type、width和height属性与embed元素的含义相同。使用param元素定义将传递给插件的参数。您为每个需要定义的参数使用一个param元素。该元素总结在表 15-11 中。正如您可能想象的那样，name和value属性定义了参数的name和value。
指定回退内容
元素的优点之一是，如果您指定的内容不可用，您可以包含将显示的内容。清单 15-8 提供了一个简单的演示。
清单 15-8。使用对象元素的回退内容特性
`
在这个例子中，我使用了data属性来引用一个不存在的文件。浏览器将尝试加载这个不存在的内容，如果加载失败，将显示object元素中的内容。param元素被忽略，只留下你的措辞和流动内容显示，如图图 15-7 所示。
图 15-7。依靠对象元素中的后备内容
注意，我删除了清单中的type属性。当不存在type属性时，浏览器试图从数据本身确定内容的类型。对于某些浏览器和插件的组合，即使数据不可用，插件仍然会被加载。这意味着屏幕上会显示一个空白区域，并且不会使用回退内容。
对象元素的其他用途
尽管object元素主要用于为插件嵌入内容，但它最初是作为包括img在内的几个元素的通用替代物。在接下来的几节中，我将描述使用object元素的其他一些方法。尽管这些特性出现在 HTML 规范中已经有一段时间了，但并不是所有的浏览器都支持所有的特性。为了完整起见，我包括了这些部分，但是我建议您坚持使用更具体的元素，比如s。
提示form属性允许object元素与 HTML 表单相关联(这是第十二章的主题)。这是 HTML5 中新增的。目前，没有一个浏览器支持这个属性，HTML5 规范对于这个特性如何工作也很模糊。
使用对象元素嵌入图像
正如我提到的，object想要替换的元素之一是img。因此，您可以使用object元素在 HTML 文档中嵌入图像。清单 15-9 给出了一个演示。
清单 15-9。用对象元素嵌入图像
`
在这个例子中，我使用了data属性来引用我在本章前面使用的图像。浏览器嵌入并显示图像，就像你使用img元素时一样，如图图 15-8 所示。
图 15-8。用对象元素嵌入图像
使用 object 元素创建客户端图像地图
您也可以使用object元素来创建客户端图像地图。属性可以用来关联一个map元素和一个object元素，如清单 15-10 所示。我使用了与使用img元素执行相同任务时相同的map和area元素。
清单 15-10。使用对象元素创建客户端图像映射
`
<object data=“https://blog.csdn.net/wizardforcel/article/details/triathlon.png” type=“image/png” usemap=“#mymap”>
注意并非所有浏览器都支持使用object元素创建的图像地图。在撰写本文时，谷歌 Chrome 和苹果 Safari 不支持这一功能。
使用对象元素作为浏览上下文
您可以使用object元素将一个 HTML 文档嵌入到另一个文档中，就像您使用iframe元素一样。如果应用了name属性，就创建了一个可以与元素的target属性一起使用的浏览上下文，比如a和form。清单 15-11 显示了如何做到这一点。
清单 15-11。使用对象元素创建浏览上下文
`
Things I like
** **
** **
</body
只有当您将type属性设置为text/html时，这个特性才起作用——即使这样，浏览器支持也不是通用的。在撰写本文时，谷歌 Chrome 和苹果 Safari 是唯一支持该功能的主流浏览器。
嵌入数字表示法
HTML5 新增了两个元素，允许您在文档中嵌入数值的表示。
显示进度
progress元素可以用来表示任务的逐步完成。表 15-12 总结了progress要素。
value属性定义了当前的进度，它在零和max属性的值之间。当省略max属性时，刻度在 0 和 1 之间。您使用浮点数来表示进度，例如0.3表示 30%。
清单 15-12 显示了progress元素和一些按钮。按下按钮更新由progress元件显示的值。我使用一些简单的 JavaScript 将按钮和进度元素连接在一起。我在本书的第四部分描述了我使用的技术。
清单 15-12。使用进度元素
`
** **
30%
60%
90%
你可以在图 15-9 中看到 progress 元素是如何用来显示不同的值的。
图 15-9。使用进度元素
显示一个范围值
meter元素显示了在可能值范围的上下文中显示的值。表 15-13 总结了这一要素。
min和max属性设置可能值范围的界限。这些可以用浮点数来表示。meter元素的显示可以分为三个部分:太低、太高和刚刚好。low属性设置一个值，低于该值的值被认为太低，而high属性设置一个值，高于该值的值被认为太高。optimum属性指定了“恰到好处”的值。您可以看到这些属性被应用到清单 15-13 中的meter元素。
清单 15-13。使用仪表元件
`
30
60
90
在本例中，button元素将meter元素的value属性设置为过低和过高范围内的值以及最佳值。你可以在图 15-10 中看到这是如何出现在浏览器中的。
图 15-10。使用仪表元件
在当前实现的情况下,optimum属性对 meter 元素的外观没有任何视觉效果。支持meter元素的浏览器只区分低于low值和高于high值的值，如图所示。
其他嵌入元素
还有一些元素可以用来在 HTML 文档中嵌入内容。这些将在后面的章节中深入讨论，但是为了完整起见，在这里提到它们。
嵌入音频和视频
HTML5 定义了几个新的属性，支持在 HTML 文档中嵌入音频和视频，而不需要插件。这些元素(audio、video、source和track)在第三十四章中有详细介绍。
嵌入图形
元素是 HTML5 中引入的另一个主要功能领域，允许在 HTML 文档中添加动态图形。canvas元素包含在第三十五章 & 第三十六章中…
总结
在这一章中，我介绍了允许您用嵌入内容丰富 HTML 文档的元素。这些元素的范围从简单的添加，如图像，到丰富的可扩展的插件技术。
