<search>: 通用搜索元素
<search> HTML 元素是一个容器，表示文档或应用程序中包含表单控件或其他与执行搜索或筛选操作相关内容的部分。<search> 元素语义上标识了元素内容的目的，即具有搜索或筛选功能。搜索或筛选功能可以针对网站或应用程序、当前网页或文档，也可以针对整个互联网或其子部分。
属性
此元素仅包含 全局属性.
使用说明
<search> 元素不用于展示搜索结果。相反，搜索或筛选结果应作为该网页主要内容的一部分展示。也就是说，作为“快速搜索”功能一部分的建议和链接（在搜索或筛选功能内）适当地嵌套在<search> 元素的内容中，因为它们是搜索功能。
无障碍
示例
页眉搜索表单
此示例演示了在网站页眉中使用 <search> 作为搜索容器来执行简单站点范围搜索。<search> 是 <form> 的语义容器，该容器将用户输入的搜索查询提交到服务器。
HTML
html
<header>
<h1>Movie website</h1>
<search>
<form action="./search/">
<label for="movie">Find a Movie</label>
<input type="search" id="movie" name="q" />
<button type="submit">Search</button>
</form>
</search>
</header>
结果
Web 应用搜索
此示例演示了在 Web 应用程序中动态包含 JavaScript 搜索功能时潜在的 DOM 内容。当搜索功能完全使用 JavaScript 实现时，如果未提交表单，则不需要 <form> 元素或提交 <button>。为了语义，包含 <search> 元素来包含搜索和过滤功能。
HTML
html
<search>
<label>
Find and filter your query
<input type="search" id="query" />
</label>
<label>
<input type="checkbox" id="exact-only" />
Exact matches only
</label>
<section>
<h3>Results:</h3>
<ul id="results">
<!-- search result content -->
</ul>
<output id="no-results">
<!-- no results content -->
</output>
</section>
</search>
结果
注意：请记住，一些用户没有 JavaScript，并且在 JavaScript 成功下载、解析和执行之前，您的用户都没有运行 JavaScript，请确保您的用户可以在禁用 JavaScript 的情况下访问您网站的内容。
多个搜索
此示例演示了一个带有两个搜索功能的页面。第一个是位于页眉的全局站点搜索。第二个是基于页面上下文的搜索和过滤，在我们的示例中是汽车搜索。
HTML
html
<body>
<header>
<h1>Car rental agency</h1>
<search title="Website">...</search>
</header>
<main>
<h2>Cars available for rent</h2>
<search title="Cars">
<h3>Filter results</h3>
...
</search>
<article>
<!-- search result content -->
</article>
</main>
</body>
结果
技术概要
规范
| 规范 |
|---|
| HTML 标准 # the-search-element |
浏览器兼容性
BCD 表格仅在浏览器中加载