<input type="search">

试一试

<label for="site-search">Search the site:</label>
<input type="search" id="site-search" name="q" />

<button>Search</button>

label {
  display: block;
  font:
    1rem "Fira Sans",
    sans-serif;
}

input,
label {
  margin: 0.4rem 0;
}

值

value 属性包含一个字符串，表示搜索字段中包含的值。你可以使用 JavaScript 中的 HTMLInputElement.value 属性来检索它。

searchTerms = mySearch.value;

如果输入框没有设置验证约束（详见 验证），则该值可以是任何文本字符串或空字符串（""）。

附加属性

除了 全局属性 和适用于所有类型 <input> 元素的属性外，搜索字段输入还支持以下属性。

list

列表属性的值是位于同一文档中的 <datalist> 元素的 id。<datalist> 为此输入提供了一个预定义值列表，以供用户建议。列表中与 type 不兼容的任何值都不会包含在建议选项中。提供的值是建议，而不是要求：用户可以从这个预定义列表中选择，也可以提供不同的值。

maxlength

用户可以在搜索字段中输入的最大字符串长度（以 UTF-16 代码单元 衡量）。这必须是 0 或更大的整数值。如果未指定 maxlength，或指定了无效值，则搜索字段没有最大长度。此值还必须大于或等于 minlength 的值。

如果字段中输入的文本长度大于 maxlength UTF-16 代码单元，则输入将无法通过 约束验证。约束验证仅在用户更改值时应用。

minlength

用户可以在搜索字段中输入的最小字符串长度（以 UTF-16 代码单元 衡量）。这必须是一个非负整数值，小于或等于 maxlength 指定的值。如果未指定 minlength，或指定了无效值，则搜索输入没有最小长度。

如果字段中输入的文本长度少于 minlength UTF-16 代码单元，则搜索字段将无法通过 约束验证。约束验证仅在用户更改值时应用。

pattern

当指定 pattern 属性时，它是一个正则表达式，输入框的 value 必须与该正则表达式匹配才能通过 约束验证。它必须是有效的 JavaScript 正则表达式，如 RegExp 类型所使用，并记录在我们的正则表达式指南中；在编译正则表达式时指定 'u' 标志，以便将模式视为 Unicode 码点序列，而不是 ASCII。模式文本周围不应指定正斜杠。

如果未指定或指定的模式无效，则不应用正则表达式，并且此属性将完全被忽略。

有关详细信息和示例，请参阅 指定模式 部分。

placeholder

placeholder 属性是一个字符串，它向用户提供一个简短的提示，说明字段中预期哪种信息。它应该是一个词或短语，演示预期的数据类型，而不是解释性消息。文本不能包含回车或换行符。

如果控件的内容具有单一方向性（从左到右或从右到左），但需要以相反的方向性呈现占位符，您可以使用 Unicode 双向算法格式字符来覆盖占位符内的方向性；有关更多信息，请参阅如何使用 Unicode 控件处理双向文本。

readonly

一个布尔属性，如果存在，则表示该字段不能由用户编辑。但是，其 value 仍然可以通过 JavaScript 代码直接设置 HTMLInputElement value 属性来更改。

size

size 属性是一个数字值，表示输入字段应该有多宽（以字符为单位）。该值必须是一个大于零的数字，默认值为 20。由于字符宽度不同，这可能不完全精确，不应依赖于此；最终的输入可能比指定的字符数更窄或更宽，具体取决于字符和正在使用的字体（font 设置）。

这不限制用户可以在字段中输入的字符数。它只指定一次大约可以看到多少个字符。要对输入数据的长度设置上限，请使用maxlength 属性。

spellcheck

spellcheck 是一个全局属性，用于指示是否为元素启用拼写检查。它可以用在任何可编辑内容上，但这里我们考虑与在 <input> 元素上使用 spellcheck 相关的具体情况。spellcheck 的允许值是

false

禁用此元素的拼写检查。

true

启用此元素的拼写检查。

"" (空字符串) 或无值

遵循元素的拼写检查默认行为。这可能基于父元素的 spellcheck 设置或其他因素。

如果输入字段未设置 readonly 属性且未禁用，则可以启用拼写检查。

如果 用户代理 的偏好设置覆盖了该设置，则读取 spellcheck 返回的值可能无法反映控件内拼写检查的实际状态。

非标准属性

以下非标准属性可用于搜索输入字段。尽可能避免使用它们。

incremental

布尔属性 incremental 是 WebKit 和 Blink 扩展（因此被 Safari、Opera、Chrome 等支持），如果存在，它会告知 用户代理 将输入作为实时搜索处理。当用户编辑字段的值时，用户代理会向代表搜索框的 HTMLInputElement 对象发送 search 事件。这允许你的代码在用户编辑搜索时实时更新搜索结果。

如果未指定 incremental，则 search 事件仅在用户明确发起搜索时发送（例如，在编辑字段时按下 Enter 或 Return 键）。

search 事件是限速的，因此发送频率不会超过实现定义的间隔。

results

results 属性（仅 Safari 支持）是一个数值，它允许你覆盖在 <input> 元素的本地提供的先前搜索查询下拉菜单中显示的最大条目数。

该值必须是非负十进制数。如果未提供，或提供了无效值，则使用浏览器的默认最大条目数。

使用搜索输入

<input> 元素的 search 类型与 text 类型非常相似，只是它们专门用于处理搜索词。它们在行为上基本等效，但用户代理默认可能会选择以不同的方式对其进行样式设置（当然，站点可以使用样式表对其应用自定义样式）。

基本示例

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

渲染效果如下：

q 是搜索输入最常见的 name，尽管它不是强制性的。提交时，发送到服务器的数据名称/值对将是 q=searchTerm。

搜索和文本类型之间的差异

主要的根本差异在于浏览器处理它们的方式。首先要注意的是，一些浏览器会显示一个交叉图标，如果需要，可以单击该图标立即删除搜索词；在 Chrome 中，此操作也会在按下 Esc 键时触发。以下屏幕截图来自 Chrome

此外，现代浏览器也倾向于自动存储之前在不同域中输入的搜索词，当在该域的搜索输入中执行后续搜索时，这些搜索词会作为自动完成选项出现。这有助于用户随着时间的推移进行相同或相似的搜索查询。此屏幕截图来自 Firefox

此时，让我们看一些可以应用于搜索表单的有用技巧。

设置占位符

你可以在搜索输入中提供一个有用的占位符，使用 placeholder 属性来提示要做什么。请看以下示例

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

你可以在下面看到占位符的渲染效果

搜索表单标签和可访问性

搜索表单的一个问题是它们的可访问性；一种常见的设计实践是不为搜索字段提供标签（尽管可能有一个放大镜图标或类似的东西），因为搜索表单的目的对于有视力的用户来说通常由于其位置而相当明显（此示例显示了一个典型模式）。

然而，这可能会给屏幕阅读器用户造成混淆，因为他们不会收到关于搜索输入是什么的任何口头提示。一个不会影响你的视觉设计的方法是使用 地标元素。

• 将整个搜索功能封装在一个 <search> 元素中，这会创建一个地标区域，辅助技术可以宣布并快速导航到该区域。如果你的 <input> 已经在一个 <form> 中，你也可以选择向 <form> 元素添加 role="search"，这也会使 <form> 成为一个搜索地标。<search> 元素使用原生 HTML 语义，而 role="search" 具有更广泛的支持，如果你已经有一个 <form> 包装器，它可能更简洁。
• 如果这还不够，你可以在 <input> 本身使用 aria-label 属性。这应该是一个描述性文本标签，屏幕阅读器会读出；它用作 <label> 的非视觉等效项。

让我们看一个例子

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

你可以在下面看到它的渲染效果

与上一个示例相比没有视觉差异，但屏幕阅读器用户可以获得更多信息。

物理输入元素大小

可以使用 size 属性控制输入框的物理大小。使用它，你可以指定输入框一次可以显示的字符数。例如，在此示例中，搜索框的宽度为 30 个字符

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

结果是这个更宽的输入框

验证

<input> 元素的 search 类型具有与常规 text 输入相同的验证功能。你通常不太可能在搜索框中使用验证功能。在许多情况下，用户应该被允许搜索任何内容，但有一些情况需要考虑，例如针对已知格式的数据进行搜索。

关于样式的一个注意事项

有一些有用的伪类可用于样式化有效/无效的表单元素：: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>

input {
  margin-right: 10px;
}

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

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

渲染效果如下：

此外，如果你尝试在没有输入搜索词的情况下提交表单，浏览器将显示一条消息。以下示例来自 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>

input {
  margin-right: 10px;
}

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

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

渲染效果如下：

如果你尝试提交少于 4 个字符的表单，你将收到一条相应的错误消息（不同浏览器之间有所不同）。如果你尝试超过 8 个字符的长度，浏览器将不允许你这样做。

指定模式

你可以使用 pattern 属性指定一个正则表达式，输入的值必须遵循该正则表达式才能被视为有效（有关速成课程，请参阅 针对正则表达式进行验证）。

我们来看一个例子。假设我们想提供一个产品 ID 搜索表单，并且所有 ID 都是由两个字母后跟四个数字组成的代码。以下示例涵盖了这一点

<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>

input {
  margin-right: 10px;
}

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

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

渲染效果如下：

示例

你可以在我们的 website-aria-roles 示例（实时查看）中看到一个用于上下文的搜索表单的良好示例。

技术摘要

规范

浏览器兼容性

另见

• HTML 表单
• <input> 及其所基于的 HTMLInputElement 接口
• <input type="text">