<input type="search">

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

searchTerms = mySearch.value;

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

除了对所有 <input> 元素（无论其类型如何）起作用的属性外，搜索字段输入还支持以下属性。

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

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

如果输入的文本长度超过 maxlength UTF-16 代码单元，则输入将失败 约束验证。约束验证仅在用户更改值时应用。

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

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

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

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

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

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

如果控件的内容具有单向性 (LTR 或 RTL)，但需要以相反的方向呈现占位符，可以使用 Unicode 双向算法格式化字符来覆盖占位符内的方向性；有关详细信息，请参阅 如何使用 Unicode 控件进行双向文本。

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

size 属性是一个数值，指示输入字段的宽度应为多少个字符。该值必须大于零，默认值为 20。由于字符宽度各不相同，因此这可能不是精确的，也不应该依赖于它；生成的输入可能比指定的字符数窄或宽，具体取决于字符和字体 (font 使用中的设置)。

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

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

false

为该元素禁用拼写检查。

true

为该元素启用拼写检查。

"" (空字符串) 或无值

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

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

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

以下非标准属性可用于搜索输入字段。一般来说，除非不得已，否则应避免使用它们。

作为 Safari 扩展，autocorrect 属性是一个字符串，指示在用户编辑此字段时是否激活自动更正。允许的值为

on

启用对错字的自动更正，以及对任何已配置的文本替换的处理。

off

禁用自动更正和文本替换。

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

如果未指定 incremental，则 search 事件仅在用户显式启动搜索时（例如，在编辑字段时按下 Enter 或 Return 键）才会发送。

search 事件受到速率限制，因此不会比实现定义的间隔更频繁地发送。

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

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

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

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

呈现如下

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

主要的根本差异在于浏览器处理它们的方式。首先要注意的是，一些浏览器显示一个十字图标，可以点击它以立即删除搜索词（如果需要），在 Chrome 中，按下 escape 键也会触发此操作。下面的截图来自 Chrome

此外，现代浏览器还倾向于自动存储先前在不同域中输入的搜索词，然后在同一域中的搜索输入中执行后续搜索时，这些搜索词会作为自动完成选项出现。这有助于那些倾向于在一段时间内对相同或类似的搜索查询进行搜索的用户。此截图来自 Firefox

现在，让我们看看一些可以应用于搜索表单的有用技术。

可以使用 placeholder 属性在搜索输入框内提供一个有用的占位符，它可以提示用户如何使用该输入框。请看下面的例子

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

你可以看到下面是如何呈现占位符的

搜索表单的一个问题是其可访问性；一个常见的做法是不为搜索字段提供标签（虽然可能有一个放大镜图标或类似图标），因为搜索表单的用途通常对有视力的人来说相当明显，因为其位置 (此示例展示了一个典型模式)。

然而，这可能会让屏幕阅读器用户感到困惑，因为他们不会收到任何关于搜索输入框的语音提示。一种不会影响你的视觉设计的方法是使用 WAI-ARIA 功能

• 在 <form> 元素上设置 role 属性的值为 search 会导致屏幕阅读器宣布该表单是一个搜索表单。
• 如果这还不够，可以在 <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 输入相同的验证功能。通常情况下，你不太可能希望为搜索框使用验证功能。在很多情况下，用户应该被允许搜索任何内容，但需要考虑一些情况，例如针对已知格式数据的搜索。

有一些有用的伪类可用于对有效/无效表单元素进行样式化：: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">
• CSS 属性的兼容性