path: root/files/zh-cn/web/html/element/input/search/index.html

---
title: <input type="search">
slug: Web/HTML/Element/Input/search
tags:
  - HTML
  - HTML 表单
  - 参考
  - 搜索
  - 表单
  - 表单输入
  - 输入类型
translation_of: Web/HTML/Element/input/search
---
<div>{{HTMLRef}}</div>

<p><span class="seoSummary"><code>{{HTMLElement("input")}}</code> 元素的 <code><strong>search</strong></code> 类型是 </span>专为用户输入搜索查询而设计的文本字段。功能上与<span class="seoSummary"> <code><a href="/en-US/docs/Web/HTML/Element/input/text">text</a></code> 输入相同，但是可以通过 <code>{{Glossary("user agent")}}</code> 进行不同样式的设置。</span></p>

<div>{{EmbedInteractiveExample("pages/tabbed/input-search.html", "tabbed-standard")}}</div>

<div class="hidden">该交互式示例的源存储在 GitHub 存储库中。 如果您想为交互式示例项目做出贡献，请克隆 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> 并向我们发起拉取请求。</div>

<table class="properties">
 <tbody>
  <tr>
   <td><strong>{{anch("值")}}</strong></td>
   <td><code>{{domxref("DOMString")}}</code> 代表搜索字段中包含的值。</td>
  </tr>
  <tr>
   <td><strong>事件</strong></td>
   <td><code>{{domxref("HTMLElement/change_event", "change")}}</code> 和 <code>{{domxref("HTMLElement/input_event", "input")}}</code></td>
  </tr>
  <tr>
   <td><strong>支持的通用属性</strong></td>
   <td><code>{{htmlattrxref("autocomplete", "input")}}</code>, <code>{{htmlattrxref("list", "input")}}</code>, <code>{{htmlattrxref("maxlength", "input")}}</code>, <code>{{htmlattrxref("minlength", "input")}}</code>, <code>{{htmlattrxref("pattern", "input")}}</code>, <code>{{htmlattrxref("placeholder", "input")}}</code>, <code>{{htmlattrxref("required", "input")}}</code>, <code>{{htmlattrxref("size", "input")}}</code>。</td>
  </tr>
  <tr>
   <td><strong>IDL 属性</strong></td>
   <td><code>value</code></td>
  </tr>
  <tr>
   <td><strong>方法</strong></td>
   <td><code>{{domxref("HTMLInputElement.select", "select()")}}</code>, <code>{{domxref("HTMLInputElement.setRangeText", "setRangeText()")}}</code>, <code>{{domxref("HTMLInputElement.setSelectionRange", "setSelectionRange()")}}</code>。</td>
  </tr>
 </tbody>
</table>

<h2 id="值">值</h2>

<p><code>{{htmlattrxref("value", "input")}}</code> 属性包含 <code>{{domxref("DOMString")}}</code> 代表搜索字段中包含的值。 您可以在 JavaScript 使用 <code>{{domxref("HTMLInputElement.value")}}</code> 属性。</p>

<pre class="brush: js notranslate">searchTerms = mySearch.value;
</pre>

<p>如果没有针对输入的验证约束 (请参见 <code>{{anch("Validation")}}</code>)，该值可以是任何文本字符串或空字符串 (<code>""</code>)。</p>

<h2 id="其他属性">其他属性</h2>

<p>除了可在所有 <code>{{HTMLElement("input")}}</code> 上的属性（无论其类型）之外，搜索字段输入还支持以下属性：</p>

<table>
 <thead>
  <tr>
   <th scope="col">属性</th>
   <th scope="col">描述</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code>{{anch("list")}}</code></td>
   <td><code>&lt;datalist&gt;</code> 元素的 ID，其中包含可选的预定义自动完成选项。</td>
  </tr>
  <tr>
   <td><code>{{anch("maxlength")}}</code></td>
   <td>输入应接受的最大字符数。</td>
  </tr>
  <tr>
   <td><code>{{anch("minlength")}}</code></td>
   <td>输入可以且仍被认为有效的最小字符数。</td>
  </tr>
  <tr>
   <td><code>{{anch("pattern")}}</code></td>
   <td>输入内容必须匹配的正则表达式才能有效。</td>
  </tr>
  <tr>
   <td><code>{{anch("placeholder")}}</code></td>
   <td>空时在输入字段中显示的示例值。</td>
  </tr>
  <tr>
   <td><code>{{anch("readonly")}}</code></td>
   <td>一个布尔属性，指示输入的内容是否应为只读。</td>
  </tr>
  <tr>
   <td><code>{{anch("size")}}</code></td>
   <td>一个数字，指示输入字段应宽多少个字符。</td>
  </tr>
  <tr>
   <td><code>{{anch("spellcheck")}}</code></td>
   <td>控制是否对输入字段启用拼写检查，或者是否应使用默认拼写检查配置。</td>
  </tr>
 </tbody>
</table>

<p id="htmlattrdeflist">{{page("/zh-CN/docs/Web/HTML/Element/input/text", "list", 0, 1, 2)}}</p>

<h3 id="htmlattrdefmaxlength">{{htmlattrdef("maxlength")}}</h3>

<p>用户可以在搜索字段中输入的最大字符数（以 UTF-16 代码为单位）。 必须为 0 或更高的整数。 如果未指定 <code>maxlength</code> 或指定了无效值，则搜索字段没有最大长度。 此值还必须大于或等于 <code>minlength</code> 的值。</p>

<p>如果输入到字段中的文本的长度大于 <code>maxlength</code> UTF-16 代码单元的长度，则输入无法通过约束验证（<a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">constraint validation</a>）。</p>

<h3 id="htmlattrdefminlength">{{htmlattrdef("minlength")}}</h3>

<p>用户可以在搜索字段中输入的最小字符数（以 UTF-16 代码为单位）。 该值必须是小于或等于 <code>maxlength</code> 指定的值的非负整数值。 如果未指定 <code>minlength</code> 或指定了无效值，则搜索输入没有最小长度。</p>

<p>如果在字段中输入的文本的长度小于 <code>minlength</code> UTF-16 代码单元的长度，则搜索字段将无法通过约束验证（<a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">constraint validation</a>）。</p>

<h3 id="htmlattrdefpattern">{{htmlattrdef("pattern")}}</h3>

<p>{{page("/zh-CN/docs/Web/HTML/Element/input/text", "pattern-include")}}</p>

<p>有关详细信息和示例，请参见 {{anch("Specifying a pattern")}} 部分。</p>

<p>{{page("/zh-CN/docs/Web/HTML/Element/input/text", "placeholder", 0, 1, 2)}}</p>

<p>{{page("/zh-CN/docs/Web/HTML/Element/input/text", "readonly", 0, 1, 2)}}</p>

<p>{{page("/zh-CN/docs/Web/HTML/Element/input/text", "size", 0, 1, 2)}}</p>

<h3 id="htmlattrdefspellcheck">{{htmlattrdef("spellcheck")}}</h3>

<p>{{page("/zh-CN/docs/Web/HTML/Element/input/text", "spellcheck-include")}}</p>

<h2 id="非标准属性">非标准属性</h2>

<p>以下非标准属性可用于搜索输入字段。 通常，除非没有帮助，否则应避免使用它们。</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">属性</th>
   <th scope="col">描述</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code>{{anch("autocorrect")}}</code></td>
   <td>编辑此输入字段时是否允许自动更正。<strong>Safari only.</strong></td>
  </tr>
  <tr>
   <td><code>{{anch("incremental")}}</code></td>
   <td>是否发送重复的 {{event("search")}} 事件以允许在用户仍在编辑字段的值时更新实时搜索结果。<strong>WebKit and Blink only (Safari, Chrome, Opera, etc.).</strong></td>
  </tr>
  <tr>
   <td><code>{{anch("mozactionhint")}}</code></td>
   <td>一个字符串，指示当用户在编辑字段时按 <kbd>Enter</kbd> 或 <kbd>Return</kbd> 键时将执行的操作类型； 用于确定虚拟键盘上该键的适当标签。<strong>Firefox for Android only.</strong></td>
  </tr>
  <tr>
   <td><code>{{anch("results")}}</code></td>
   <td>先前搜索查询的下拉列表中应显示的最大项目数。<strong>Safari only.</strong></td>
  </tr>
 </tbody>
</table>

<h3 id="htmlattrdefautocorrect_non-standard_inline">{{htmlattrdef("autocorrect")}} {{non-standard_inline}}</h3>

<p>{{page("/zh-CN/docs/Web/HTML/Element/input/text", "autocorrect-include")}}</p>

<h3 id="htmlattrdefincremental_non-standard_inline">{{htmlattrdef("incremental")}} {{non-standard_inline}}</h3>

<div id="incremental-include">
<p>布尔值 <code>incremental</code> 属性是 WebKit 和 Blink 扩展 （因此被 Safari, Opera, Chrome 等支持）如果存在，它会告诉 {{Glossary("user agent")}} 将输入作为实时搜索进行处理。 当用户编辑字段的值时，用户代理将 <code>{{event("search")}}</code> 事件发送到代表搜索框的 <code>{{domxref("HTMLInputElement")}}</code> 对象。这允许您的代码在用户编辑搜索时实时更新搜索结果。</p>

<p>如果 <code>incremental</code> 没有被指定，则仅当用户显式启动搜索时（例如，在编辑字段时按 <kbd>Enter</kbd> 或 <kbd>Return</kbd> ）才发送 <code>{{event("search")}}</code> 事件。</p>

<p><code>search</code> 事件受速率限制，因此发送事件的频率不会超过实现定义的间隔。</p>
</div>

<h3 id="htmlattrdefmozactionhint_non-standard_inline">{{htmlattrdef("mozactionhint")}} {{non-standard_inline}}</h3>

<p>{{page("/zh-CN/docs/Web/HTML/Element/input/text", "mozactionhint-include")}}</p>

<h3 id="htmlattrdefresults_non-standard_inline">{{htmlattrdef("results")}} {{non-standard_inline}}</h3>

<div id="results-include">
<p><code>results</code> 属性是一个数字值（仅受 Safari 支持），可让您覆盖要在 <code>{{HTMLElement("input")}}</code> 元素的本机提供的先前搜索查询的下拉菜单中显示的最大条目数。</p>

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

<h2 id="使用搜索输入">使用搜索输入</h2>

<p><code>&lt;input&gt;</code> 元素 <code>search</code> 类型与 <code>text</code> 类型的元素非常相似，不同之处在于它们专门用于处理搜索项。 它们的行为基本相同，但是用户代理可以默认选择不同的样式（当然，站点可以使用样式表向其应用自定义样式）。</p>

<h3 id="基本例子">基本例子</h3>

<pre class="brush: html notranslate">&lt;form&gt;
  &lt;div&gt;
    &lt;input type="search" id="mySearch" name="q"&gt;
    &lt;button&gt;Search&lt;/button&gt;
  &lt;/div&gt;
&lt;/form&gt;</pre>

<p>如下：</p>

<p>{{EmbedLiveSample("Basic_example", 600, 40)}}</p>

<p><code>q</code> 是搜索输入中最常用 <code>name</code> ，尽管不是强制性的。提交后，发送到服务器的键值对数据将为 <code>q=searchterm</code>。</p>

<div class="note">
<p>你一定要记住设置 <code>{{htmlattrxref("name", "input")}}</code> 输入，否则不会提交任何内容。</p>
</div>

<h3 id="搜索类型和文本类型之间的差异">搜索类型和文本类型之间的差异</h3>

<p>主要的基本区别在于浏览器处理它们的方式。 首先要注意的是，某些浏览器显示一个十字图标，如果需要，可以单击该十字图标以立即删除搜索词。 以下屏幕截图来自 Chrome：</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/15235/chrome-cross-icon.png" style="display: block; height: 31px; margin: 0px auto; width: 144px;"></p>

<p>此外，现代浏览器还倾向于自动存储先前在各个域中输入的搜索词，然后在该域的搜索输入中执行后续搜索时，这些搜索词会作为自动完成选项出现。 这有助于随着时间的流逝倾向于在相同或相似搜索查询上进行搜索的用户。 此屏幕截图来自 Firefox：</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/15237/firefox-auto-complete.png" style="display: block; height: 83px; margin: 0px auto; width: 171px;">现在，让我们看看可以应用于搜索表单的一些有用的技巧。</p>

<h3 id="设置占位符">设置占位符</h3>

<p>您可以在搜索输入中提供一个有用的占位符，使用<code>{{htmlattrxref("placeholder","input")}}</code> 属性来提示要做什么。看下面的例子：</p>

<pre class="brush: html notranslate">&lt;form&gt;
  &lt;div&gt;
    &lt;input type="search" id="mySearch" name="q"
     placeholder="Search the site..."&gt;
    &lt;button&gt;Search&lt;/button&gt;
  &lt;/div&gt;
&lt;/form&gt;</pre>

<p>您可以在下面看到占位符的呈现方式：</p>

<p>{{EmbedLiveSample("Setting_placeholders", 600, 40)}}</p>

<h3 id="搜索表单标签和辅助功能">搜索表单标签和辅助功能</h3>

<p>搜索表单的一个问题是它们的可访问性。 常见的设计惯例是不为搜索字段提供标签（尽管可能会有放大镜图标或类似图标），因为由于放置位置的原因，搜索表单的目的通常对于视力正常的用户而言相当明显（<a href="https://mdn.github.io/learning-area/accessibility/aria/website-aria-roles/">这个例子展示了一个典型的模式</a>）。</p>

<p>但是，这可能会使屏幕阅读器用户感到困惑，因为他们不会对搜索输入内容有任何口头指示。 解决此问题而不会影响您的视觉设计的一种方法是使用 <a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA</a> 功能：</p>

<ul>
 <li><code>&lt;form&gt;</code> 元素上， <code>search</code> 值的 <code>role</code> 属性 使屏幕阅读器用户声明该表单是搜索表单。</li>
 <li>您还可以在 <code>{{HTMLElement("input")}}</code> 上使用 <code>aria-label</code> 属性。这应该是一个描述性的文本标签，屏幕阅读器会读出该标签； 它用作 <code>&lt;label&gt;</code>的非可视等效项。</li>
</ul>

<p>让我们看一个例子：</p>

<pre class="brush: html notranslate">&lt;form role="search"&gt;
  &lt;div&gt;
    &lt;input type="search" id="mySearch" name="q"
     placeholder="Search the site..."
     aria-label="Search through site content"&gt;
    &lt;button&gt;Search&lt;/button&gt;
  &lt;/div&gt;
&lt;/form&gt;</pre>

<p>您可以在下面看到它的呈现方式：</p>

<p>{{EmbedLiveSample("Search_form_labels_and_accessibility", 600, 40)}}</p>

<p>与上一个示例没有视觉上的区别，但是屏幕阅读器用户可以使用更多信息。</p>

<div class="note">
<p><strong>注意：</strong>有关此类辅助功能的更多信息，请参见 <a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics#SignpostsLandmarks">Signposts/Landmarks</a> 。</p>
</div>

<h3 id="输入框元素大小">输入框元素大小</h3>

<p>可以使用 <code>{{htmlattrxref("size", "input")}}</code> 属性来控制输入框的尺寸。 使用它，您可以指定输入框一次可以显示的字符数。 例如，在此示例中，搜索框为 30 个字符宽：</p>

<pre class="brush: html notranslate">&lt;form&gt;
  &lt;div&gt;
    &lt;input type="search" id="mySearch" name="q"
    placeholder="Search the site..." size="30"&gt;
    &lt;button&gt;Search&lt;/button&gt;
  &lt;/div&gt;
&lt;/form&gt;</pre>

<p>结果是这个更宽的输入框：</p>

<p>{{ EmbedLiveSample('Physical_input_element_size', 600, 40) }}</p>

<h2 id="验证方式">验证方式</h2>

<p><code>&lt;input&gt;</code> 元素的 <code>search</code> 类型具有与常规文本 <code>text</code> 输入相同的验证功能。 通常，您不太可能希望对搜索框使用验证功能。 在许多情况下，应该只允许用户搜索任何内容，但是有几种情况需要考虑，例如搜索已知格式的数据。</p>

<div class="note">
<p><strong>注意：</strong>HTML 表单验证不能替代确保输入数据格式正确的脚本。 对于某人来说，对 HTML 进行调整以使其绕过验证或完全删除验证太容易了。 有人也可以完全绕开您的 HTML 并将数据直接提交到您的服务器。 如果服务器端代码无法验证接收到的数据，则当将格式不正确的数据（或太大，类型错误的数据等等）输入数据库时，灾难可能会发生。</p>
</div>

<h3 id="样式注意事项">样式注意事项</h3>

<p>有一些有用的伪类可用于设置有效/无效表单元素的样式： <code>{{cssxref(":valid")}}</code> 和 <code>{{cssxref(":invalid")}}</code>。在本节中，我们将使用以下 CSS，它将在包含有效值的输入旁边放置一个复选标记（勾号），并在包含无效值的输入旁边放置一个叉号。</p>

<pre class="brush: css notranslate">input:invalid ~ span:after {
    content: '✖';
    padding-left: 5px;
    position: absolute;
}

input:valid ~ span:after {
    content: '✓';
    padding-left: 5px;
    position: absolute;
}</pre>

<p>该技巧还需要将 <code>{{htmlelement("span")}}</code> 元素放置在<code>form</code>元素之后，该<code>form</code>元素充当图标的持有者。 这是必要的，因为某些浏览器上的某些输入类型不能很好地显示直接位于其后的图标。</p>

<h3 id="输入要求">输入要求</h3>

<p>您可以使用 <code>{{htmlattrxref("required", "input")}}</code> 属性作为在允许提交表单之前输入所需值的简单方法：</p>

<pre class="brush: html notranslate">&lt;form&gt;
  &lt;div&gt;
    &lt;input type="search" id="mySearch" name="q"
    placeholder="Search the site..." required&gt;
    &lt;button&gt;Search&lt;/button&gt;
    &lt;span class="validity"&gt;&lt;/span&gt;
  &lt;/div&gt;
&lt;/form&gt;</pre>

<div class="hidden">
<pre class="brush: css notranslate">input {
  margin-right: 10px;
}

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

input:valid ~ span:after {
    content: '✓';
    padding-left: 5px;
    position: absolute;
}</pre>
</div>

<p>如下所示：</p>

<p>{{ EmbedLiveSample('Making_input_required', 600, 40) }}</p>

<p>另外，如果您尝试在未输入搜索词的情况下提交表单，浏览器将显示一条消息。 以下示例来自 Firefox：</p>

<p><img alt="form field with attached message that says Please fill out this field" src="https://mdn.mozillademos.org/files/15241/firefox-required-message.png" style="display: block; margin: 0 auto;"></p>

<p>当您尝试使用输入中包含的不同类型的无效数据提交表单时，将显示不同的消息； 请参阅以下示例。</p>

<h3 id="输入值长度">输入值长度</h3>

<p>您可以使用 <code>{{htmlattrxref("minlength", "input")}}</code> 属性为输入的值指定最小长度（以字符为单位）； 同样，使用 <code>{{htmlattrxref("maxlength", "input")}}</code> 设置输入值的最大长度。</p>

<p>下面的示例要求输入的值的长度为 4–8 个字符。</p>

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

<div class="hidden">
<pre class="brush: css notranslate">input {
  margin-right: 10px;
}

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

input:valid ~ span:after {
    content: '✓';
    padding-left: 5px;
    position: absolute;
}</pre>
</div>

<p>如下所示：</p>

<p>{{ EmbedLiveSample('Input_value_length', 600, 40) }}</p>

<p>如果您尝试提交少于 4 个字符的表单，则会收到相应的错误消息（不同的浏览器会有所不同）。 如果尝试超过 8 个字符，浏览器将不允许您访问。</p>

<h3 id="指定模式">指定模式</h3>

<p>您可以使用 <code>{{htmlattrxref("pattern", "input")}}</code> 属性指定一个正则表达式，输入值必须遵循该正则表达式才能被视为有效 (请参照 <a href="/en-US/docs/Learn/HTML/Forms/Form_validation#Validating_against_a_regular_expression">Validating against a regular expression</a>).</p>

<p>让我们看一个例子。 假设我们想提供一个产品 ID 搜索表格，这些 ID 都是由两个字母和四个数字组成的代码。 以下示例对此进行了介绍：</p>

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

<div class="hidden">
<pre class="brush: css notranslate">input {
  margin-right: 10px;
}

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

input:valid ~ span:after {
    content: '✓';
    padding-left: 5px;
    position: absolute;
}</pre>
</div>

<p>如下所示：</p>

<p>{{ EmbedLiveSample('Specifying_a_pattern', 600, 40) }}</p>

<h2 id="例子">例子</h2>

<p>您可以在我们的网站 <a class="external external-icon" href="https://github.com/mdn/learning-area/tree/master/accessibility/aria/website-aria-roles">website-aria-roles</a> 示例中看到一个在上下文中使用搜索表单的一个好例子 (<a class="external external-icon" href="http://mdn.github.io/learning-area/accessibility/aria/website-aria-roles/">see it live</a>).</p>

<h2 id="规范">规范</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'input.html#text-(type=text)-state-and-search-state-(type=search)', '&lt;input type="search"&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td>初始化定义</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5.1', 'sec-forms.html#text-typetext-state-and-search-state-typesearch', '&lt;input type="search"&gt;')}}</td>
   <td>{{Spec2('HTML5.1')}}</td>
   <td>初始化定义</td>
  </tr>
 </tbody>
</table>

<h2 id="浏览器兼容性">浏览器兼容性</h2>

<p>{{Compat("html.elements.input.input-search")}}</p>

<p><font face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif"><span style="font-size: 37.33327865600586px;"><strong>参见</strong></span></font></p>

<ul>
 <li><a href="/en-US/docs/Learn/HTML/Forms">HTML 表单</a></li>
 <li>{{HTMLElement("input")}} 及其所基于的接口 {{domxref("HTMLInputElement")}} </li>
 <li><code><a href="/en-US/docs/Web/HTML/Element/input/text">&lt;input type="text"&gt;</a></code></li>
 <li><a href="/zh-CN/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">CSS 属性的兼容性</a></li>
</ul>