HTML5表单输入类型详解及最佳实践
核心要点
type="search") 提供了一个搜索字段，为用户提供直观的搜索站点提示。它通常带有内置的清除按钮，并且可以样式化以匹配浏览器或操作系统的搜索框。type="email") 用于指定一个或多个电子邮件地址。它支持布尔型multiple属性，用于多个逗号分隔的电子邮件地址。触摸板设备通常会在该字段获得焦点时显示针对电子邮件输入优化的键盘，一些浏览器还会为无效的电子邮件输入提供错误消息。type="url") 用于指定网络地址，与email输入类型类似，它显示为普通文本字段，但在触摸屏上提供针对网络地址输入优化的键盘。现代浏览器使用此输入类型验证URL的一般协议格式。(以下内容摘自Alexis Goldstein、Louis Lazaris和Estelle Weyl合著的书籍《HTML5 & CSS3 for the Real World, 2nd Edition》。该书在全球各地的商店有售，您也可以在这里购买电子书版本。)
您可能已经熟悉input元素的type属性。此属性决定了将向用户呈现哪种类型的表单输入。如果省略此属性——或者对于新输入类型和旧版浏览器而言，如果浏览器不理解该类型——它仍然有效；输入将默认为type="text"。这就是使HTML5表单在今天仍然可以使用的原因，即使您仍在支持旧版浏览器。如果您使用新的输入类型，例如email或search，旧版浏览器只会向用户显示标准文本字段。
我们的注册表单目前使用了您熟悉的十种输入类型中的四种：checkbox、text、password和submit。以下是HTML5之前可用的所有类型列表：
HTML5规范为我们提供了九种新的输入类型，它们提供了更符合数据类型的UI元素和原生数据验证功能：
HTML5.1和WHATWG HTML Living Standard包含四种额外的日期输入类型，其中三种在现代浏览器中得到了良好的支持：
让我们详细了解每种新类型，并了解如何使用它们。
search输入类型(type="search") 提供了一个搜索字段——一个单行文本输入控件，用于输入一个或多个搜索词。规范指出：
文本状态和搜索状态之间的区别主要在于样式：在搜索字段与普通文本字段有所区分的平台上，搜索状态可能会导致外观与平台的搜索字段一致，而不是像普通的文本字段。
许多浏览器以与浏览器或操作系统的搜索框一致的方式设置search输入的样式。目前，Chrome、Safari、Opera和IE都添加了在输入文本后通过单击鼠标提供×图标来清除输入的功能，如图4.5所示。date/time输入类型在Chrome和Opera中也可以清除，IE11现在也包括一个×图标来清除大多数输入类型，包括type为text的输入。
在Apple设备上，Chrome、Safari和Opera中的search字段默认情况下具有圆角，与设备的搜索字段外观相匹配。在带有动态键盘的触摸板上，“go”按钮会显示为搜索图标或单词“search”，具体取决于设备。如果您包含非标准的results属性，Chrome和Opera将在表单字段内显示放大镜/查找图标。
虽然您仍然可以使用type="text"来创建搜索字段，但新的search类型可以直观地提示用户在哪里搜索站点，并提供用户习惯的界面。HTML5 Herald没有搜索字段，但以下是如何使用它的示例：
<form id="search" method="get"> <label for="s">Search:</label> <input type="search" id="s" name="s"/> <input type="submit" value="Search"/> </form>
由于search与所有新的输入类型一样，在不支持的浏览器中显示为常规文本框，因此在适当的时候没有理由不使用它。
email类型(type="email") 用于指定一个或多个电子邮件地址。它支持布尔型multiple属性，允许使用多个逗号分隔（可选空格）的电子邮件地址。让我们将表单更改为对注册人的电子邮件地址使用type="email"：
<form id="search" method="get"> <label for="s">Search:</label> <input type="search" id="s" name="s"/> <input type="submit" value="Search"/> </form>
如果您将输入类型从text更改为email，正如我们在这里所做的那样，您将注意到用户界面没有明显的变化；输入仍然看起来像一个普通的文本字段。但是，幕后存在差异。
如果您使用的是触摸板设备，这种变化就会变得明显。当您将焦点放在email字段上时，大多数触摸板设备（例如运行Chromium的iPad或Android手机）都会显示针对电子邮件输入优化的键盘，包括@符号、句点和空格按钮，但不包括逗号，如图4.6所示。
Firefox、Chrome、Opera和Internet Explorer 10还会为无效的电子邮件输入提供错误消息：如果您尝试提交内容无法识别为一个或多个电子邮件地址的表单，浏览器会告诉您哪里错了。默认错误消息如图4.7所示。
注意：自定义验证消息不喜欢浏览器提供的默认错误消息？使用.setCustomValidity(errorMsg)设置您自己的消息。setCustomValidity只接受一个参数，即您要提供的错误消息。如果您设置了自定义验证消息，一旦该值变为有效值，您必须将验证消息设置为空字符串（虚假值）才能启用表单提交：
<label for="email">My email address is:</label> <input type="email" id="email" name="email"/>
不幸的是，虽然您可以更改消息的内容，但至少目前您仍然受其外观的限制。
url输入(type="url") 用于指定网络地址。与email非常相似，它将显示为普通的文本字段。在许多触摸屏上，显示的屏幕键盘将针对网络地址输入进行优化，带有正斜杠(/)和“.com”快捷键。让我们更新我们的注册表单以使用url输入类型：
function setErrorMessages(formControl) {
var validityState_object = formControl.validity;
if (validityState_object.valueMissing) {
formControl.setCustomValidity('Please set an age (required)');
} else if (validityState_object.rangeUnderflow) {
formControl.setCustomValidity('You\'re too young');
} else if (validityState_object.rangeOverflow) {
formControl.setCustomValidity('You\'re too old');
} else if (validityState_object.stepMismatch) {
formControl.setCustomValidity('Counting half birthdays?');
} else {
//如果有效，必须设置虚假值，否则将始终出错
formControl.setCustomValidity('');
}
}从Internet Explorer 10开始的所有现代浏览器都支持url输入类型，如果值不以协议开头，则会报告输入无效。只验证URL的一般协议格式，因此，例如，q://example.xyz将被认为是有效的，即使q://不是真实的协议，.xyz也不是真实的顶级域名。如果您希望输入的值符合更具体的格式，请在标签（或占位符）中提供信息以告知用户，并使用pattern属性确保其正确性，如前所述。
对于电话号码，使用tel输入类型(type="tel")。与url和email类型不同，tel类型不强制执行特定的语法或模式。字母和数字——实际上，除了换行符或回车符之外的任何字符——都是有效的。这有一个很好的理由：在世界各地，各个国家都有各种长度和标点的有效电话号码，因此不可能将单一格式指定为标准。例如，在美国， 1(415)555-1212与415.555.1212一样容易理解，但公司也可能在电话号码中使用字母，例如(800)CALL-NOW。您可以通过包含带有正确语法的占位符或输入后的注释以及示例来鼓励特定格式。此外，您可以使用pattern属性规定格式。在pattern属性中包含一个title以提供工具提示并改进原生验证错误消息的用户体验。您还可以使用setCustomValidity方法提供更具信息性的客户端验证。在使用tel输入类型时，动态触摸板通常会显示电话键盘，包括星号和井号键。您可以将tel用于电话号码以外的其他用途。例如，它可能是社会安全号码表单输入的最佳键盘。
HTML5 引入各种新的表单输入类型。这些包括“color”、“date”、“datetime-local”、“email”、“month”、“number”、“range”、“search”、“tel”、“time”、“url”和“week”。每种输入类型都有其特定的用途，可以通过提供更合适和用户友好的输入字段来极大地增强网站的用户体验。
HTML5 中的“date”输入类型创建一个允许用户输入日期的输入字段。日期格式根据用户的浏览器语言环境进行格式化，并且通常会提供日期选择器以方便用户使用。但是，对这种输入类型的支持在不同的浏览器之间有所不同。
如果在不支持它的旧版浏览器中查看 HTML5 表单输入类型，浏览器将默认为标准“text”输入字段。这意味着用户仍然可以输入信息，但 HTML5 输入类型的特定功能（例如“date”输入类型的日期选择器）将不可用。
HTML5 提供多个用于输入验证的属性，包括“required”、“pattern”以及数值输入类型的“min”/“max”。这些属性可用于确保用户输入在表单提交前满足特定条件。
HTML5 中的“range”输入类型创建一个滑块，允许用户在一个特定范围内选择值。您可以使用“min”和“max”属性指定范围，并使用“value”属性指定默认值。
HTML5 中的“email”输入类型为用户输入电子邮件地址提供了一种便捷的方式。它包含内置验证功能，用于检查输入的文本是否为电子邮件地址格式。某些浏览器还可能为此输入类型提供自动完成功能。
HTML5 中的“search”输入类型专为搜索字段设计。此输入类型可以提供特定于搜索的功能，例如单击一下即可清除搜索框，或向用户显示最近的搜索结果。
HTML5 中的“number”输入类型允许用户输入数字输入。您可以使用“min”和“max”属性指定可接受的数字范围，并使用“step”属性指定步长值。
HTML5 中的“tel”输入类型用于应包含电话号码的输入字段。但是，它不会验证输入，因此您应该使用 JavaScript 或类似技术进行验证。
HTML5 中的“url”输入类型用于应包含 URL 的输入字段。它包含内置验证功能，用于检查输入的文本是否为 URL 格式。某些浏览器还可能为此输入类型提供自动完成功能。
以上是HTML5表格：输入类型（第1部分） - 站点点的详细内容。更多信息请关注PHP中文网其他相关文章！
