input type="search"

"search"类型的<input>元素是为用户输入搜索查询而设计的文本字段。

<input type="search">

值	表示搜索字段中包含的值的DOMString。
活动	改变和输入
支持的通用属性	自动完成，列表，最大长度，最小长度，模式，占位符，所需，大小。
IDL属性	值
方法	select（），setRangeText（），setSelectionRange（）。

值

该value属性包含DOMString,表示搜索框中包含的值。您可以使用JavaScript中的属性HTMLInputElement.value来检索它。

mySearch.value;

如果输入没有验证约束（请参阅验证以获取更多详细信息），该值可以是任何文本字符串或空字符串（""）。

使用搜索的 inputs

search类型的<input>元素与text类型非常相似，只不过它们是专门用来处理搜索词的。它们在行为上基本相同，但风格不同。

基本示例

<form>
  <div>
    <input type="search" id="mySearch" name="q">
    <button>Search</button>
  </div>
</form>

呈现如下：

q是name搜索输入的标准。提交时，发送到服务器的数据键/值对将会是q=searchterm。你必须记得为你的输入设置一个名字，否则什么都不会被提交。

search 和 text 类型之间的差异

主要的基本差异来自浏览器处理它们的方式。首先要注意的是，有些浏览器会显示一个叉图标，如果需要，可以立即删除搜索字词。以下屏幕截图来自Chrome：

另外，现代浏览器也倾向于自动存储先前在域中输入的搜索项，然后当在该域的搜索输入中，执行后续搜索时，之前的搜索项作为自动完成的选项出现。这个截图来自Firefox：

在这一点上，让我们看看一些有用的技巧，你可以应用到你的搜索表单。

设置占位符

你可以在你的搜索输入中提供一个有用的占位符，它可以给出一个关于如何使用该placeholder属性的提示。看下面的例子：

<form>
  <div>
    <input type="search" id="mySearch" name="q"
     placeholder="Search the site...">
    <button>Search</button>
  </div>
</form>

你可以看到呈现的占位符如下：

搜索表单标签和辅助功能

搜索表单的一个问题是其可访问性 —— 一般的模式是，您不提供标签（尽管您可能会提供一个放大镜图标或类似的图标），因为搜索表单放置后，它的目的通常对于有视觉的用户来说相当明显的（这个例子显示了一个典型的模式）。

但是，这可能会导致屏幕阅读器用户感到困惑，因为他们不会有任何关于搜索输入的口头指示。不影响你的视觉设计而解决这个问题的一个方法是，那就是使用WAI-ARIA功能：

<form>元素内 search值的role属性，将导致屏幕阅读器将表单作为搜索表单进行通知。

如果这还不够，可以在input上使用一个 aria-label 属性。该标签的目的是包含一个将由屏幕阅读器读出的描述性文字标签 - 基本上，这是一个非视觉等效的<label>。

我们来看一个例子：

<form role="search">
  <div>
    <input type="search" id="mySearch" name="q"
     placeholder="Search the site..."
     aria-label="Search through site content">
    <button>Search</button>
  </div>
</form>

呈现如下：

与前面的例子没有区别，但是屏幕阅读器用户可以获得更多的信息。

注意：有关这些辅助功能的更多信息，请参阅路标/标志。

物理输入元素大小

输入框的物理尺寸可以使用size属性进行控制。有了它，您可以指定输入框一次可以显示的字符数。在这个例子中，例如，搜索框的宽度为30个字符：

<form>
  <div>
    <input type="search" id="mySearch" name="q"
    placeholder="Search the site..." size="30">
    <button>Search</button>
  </div>
</form>

验证

search 类型的<input>元素具有text类型元素相同的验证特征。搜索框一般不太可能使用验证功能。在许多情况下，用户应该被允许搜索任何东西，但是有几种情况需要考虑，比如搜索已知格式的数据。

注：HTML表单验证不是确保正确格式数据输入的验证脚本替代品。有人很容易调整HTML，使他们绕过验证，或完全删除它。也有人可能完全绕过你的HTML，直接提交数据到你的服务器。如果您的服务器端代码无法验证其接收到的数据，那么当格式不正确的数据（或数据太大，类型错误等等）输入到您的数据库时，可能会导致灾难。

关于造型的说明

伪类可用于有效/无效的表单元素 - :valid和:invalid。在本节中，我们将使用下面的CSS，它将在包含有效值的输入旁边进行检查（打勾），并在包含无效值的输入旁边放置一个十字叉。

input:invalid ~ span:after {
    content: '?';
    padding-left: 5px;
    position: absolute:
}

input:valid ~ span:after {
    content: '?';
    padding-left: 5px;
    position: absolute:
}

该技术还需要在表单元素之后放置<span>元素，该元素充当图标的持有者。这是必要的，因为某些浏览器上的某些输入类型不能很好地显示直接放在它们后面的图标。

要求输入

您可以使用该required属性，简单地在表单提交通过之前，保证输入一个所需值：

<form>
  <div>
    <input type="search" id="mySearch" name="q"
    placeholder="Search the site..." required>
    <button>Search</button>
    <span class="validity"></span>
  </div>
</form>

这呈现如下：

此外，如果您尝试提交没有输入搜索词的表单，浏览器将显示一条消息。下面的例子来自Firefox：

当您尝试使用不同类型的无效数据提交表单时，会显示不同的消息; 看下面的例子。

输入值长度

您可以使用minlength属性为输入的值指定最小字符长度; 同样，maxlength用来设置输入值的最大长度。

以下示例要求输入的值为4-8个字符。

<form>
  <div>
    <label for="mySearch">Search for user</label>
    <input type="search" id="mySearch" name="q"
    placeholder="User IDs are 4–8 characters in length" required
    size="30" minlength="4" maxlength="8">
    <button>Search</button>
    <span class="validity"></span>
  </div>
</form>

这呈现如下：

如果您尝试提交少于4个字符的表单，则会给出相应的错误消息（这在浏览器中会有所不同）。如果您尝试超过8个字符的长度，浏览器不会让你成功。

指定一个模式

您可以使用该pattern属性来指定输入值必须遵循的正则表达式，输入值符合表达式才能被认为是有效的（请参阅简单快速课程针对正则表达式进行验证）。

我们来看一个例子。假设我们想要提供一个产品ID搜索表单，这些ID是否都是两个字母后跟四个数字的代码？下面的例子涵盖了这种情况：

以下示例要求输入的值为4-8个字符。

<form>
  <div>
    <label for="mySearch">Search for product by ID:</label>
    <input type="search" id="mySearch" name="q"
    placeholder="two letters followed by four numbers" required
    size="30" pattern="[A-z]{2}[0-9]{4}">
    <button>Search</button>
    <span class="validity"></span>
  </div>
</form>

这呈现如下：

例子

您可以在我们的网站-aria-roles示例中看到在上下文中使用的搜索表单的一个很好的示例（请参见实况）。

规范

规范	状态	评论
HTML生活标准在该规范中，'<input type ='search'>'的定义。	生活水平	初始定义
HTML 5.1该规范中'<input type ='search'>'的定义。	建议	初始定义

浏览器兼容性

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	5.0	?	Unknown (4.0)	10	10.62	?

Feature	Android	Chrome for Android	Edge	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	iOS WebKit (Safari/Chrome/Firefox/etc)
Basic support	?	?	?	4.0 (4.0)	?	(Yes)	3.1

本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com

最后更新于：2017-12-18