1. 面向开发者的 Web 技术
  2. HTML（超文本标记语言）
  3. HTML 参考
  4. HTML 元素参考
  5. <search>

此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。

View in English Always switch to English

<search>：通用搜索元素

基线
广泛可用

自 2023年10月 起，此特性已在主流浏览器中得到支持，可在大多数设备和浏览器版本中正常使用。

<search> HTML 元素是一个容器，代表文档或应用程序中包含与执行搜索或过滤操作相关的表单控件或其他内容的部分。<search> 元素在语义上标识了元素内容的用途——具有搜索或过滤功能。搜索或过滤功能可以针对网站或应用程序、当前网页或文档，也可以针对整个互联网或其子部分。

属性

这个元素只包含全局属性。

使用说明

<search> 元素不是用来显示搜索结果的。相反，搜索或过滤结果应作为该网页主要内容的一部分。也就是说，属于搜索或筛选功能中“快速搜索”功能的建议和链接，应嵌套在 <search> 元素的内容中——因为它们是搜索功能的特性。

无障碍考虑

<search> 元素定义了 search 地标。这样就不需要在 <form> 元素中添加 role=search 了。

示例

标题搜索表单

此示例演示了如何将 <search> 作为网站页眉中的搜索容器，以执行简单的全站搜索。<search> 是向服务器提交用户输入的搜索查询的 <form> 的语义容器。

HTML

html
<header>
  <h1>电影网站</h1>
  <search>
    <form action="./search/">
      <label for="movie">查找电影</label>
      <input type="search" id="movie" name="q" />
      <button type="submit">搜索</button>
    </form>
  </search>
</header>

结果

Web 应用搜索

此示例演示了在 web 应用程序中动态加入 JavaScript 搜索功能时可能出现的 DOM 内容。在完全使用 JavaScript 实现搜索功能时，如果没有提交表单，则既不需要 <form> 元素，也不需要提交 <button> 元素。从语义上讲，<search> 元素包含搜索和过滤功能。

HTML

html
<search>
  <label>
    查找和过滤你的查询
    <input type="search" id="query" />
  </label>
  <label>
    <input type="checkbox" id="exact-only" />
    仅精确匹配
  </label>

  <section>
    <h3>结果：</h3>
    <ul id="results">
      <!-- 搜索结果内容 -->
    </ul>
    <output id="no-results">
      <!-- 无结果内容 -->
    </output>
  </section>
</search>

结果

备注：请记住，有些用户没有 JavaScript，而在 JavaScript 成功下载、解析和执行之前，你的用户都不会运行 JavaScript，因此请确保你的用户在禁用 JavaScript 的情况下也能访问网站内容。

多重搜索

此示例演示了一个具有两种搜索特性的页面。首先是位于页眉的全局网站搜索。第二种是基于页面上下文的搜索和筛选，在我们的例子中是汽车搜索。

HTML

html
<body>
  <header>
    <h1>汽车租赁公司</h1>
    <search title="网站">...</search>
  </header>
  <main>
    <h2>可供出租的汽车</h2>
    <search title="汽车">
      <h3>筛选结果</h3>
      ...
    </search>
    <article>
      <!-- 搜索结果内容 -->
    </article>
  </main>
</body>

结果

技术概要

内容分类 流式内容、短语内容。
允许的内容 流式内容。
标签省略 不允许，开始标签和结束标签都不能省略。
隐含的 ARIA 角色 search
允许的 ARIA 角色 form、group、none、presentation、region、search
DOM 接口 HTMLElement

规范

规范
HTML
# the-search-element

浏览器兼容性

参见

帮助改进 MDN

了解如何参与贡献

此页面最后更新于 ，由 MDN 贡献者更新。

在 GitHub 上查看此页面 • 报告此内容的问题