<search>: The generic search element
Baseline 2023
Newly available
Since October 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
<search> HTML 元素是一个容器，表示文档或应用的各个部分，其中包含表单控件或与执行搜索或过滤操作相关的其他内容。<search> 元素在语义上将元素内容的用途标识为具有搜索或过滤功能。搜索或过滤功能可以针对网站或应用、当前网页或文档、或者整个互联网或其部分。
¥The <search> HTML element is a container representing the parts of the document or application with form controls or other content related to performing a search or filtering operation. The <search> element semantically identifies the purpose of the element's contents as having search or filtering capabilities. The search or filtering functionality can be for the website or application, the current web page or document, or the entire Internet or subsection thereof.
属性
使用说明
¥Usage notes
<search> 元素不用于呈现搜索结果。相反，搜索或过滤结果应作为该网页主要内容的一部分呈现。也就是说，作为搜索或过滤功能中 "快速搜索" 功能一部分的建议和链接适当地嵌套在 <search> 元素的内容中，因为它们是搜索功能。
¥The <search> element is not for presenting search results. Rather, search or filtered results should be presented as part of the main content of that web page. That said, suggestions and links that are part of "quick search" functionality within the search or filtering functionality are appropriately nested within the contents of the <search> element as they are search features.
无障碍
示例
标题搜索表单
¥Header search form
此示例演示了如何使用 <search> 作为网站标头内的搜索容器来执行简单的站点范围搜索。<search> 是 <form> 的语义容器，它将用户输入的搜索查询提交到服务器。
¥This example demonstrates the use of <search> as the container for a search within a website header to perform a simple site-wide search. The <search> is a semantic container for the <form> that submits the user-entered search query to a server.
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>
结果
¥Result
网络应用搜索
¥Web app search
此示例演示了在 Web 应用中动态包含 JavaScript 搜索功能时潜在的 DOM 内容。当搜索功能完全使用 JavaScript 实现时，如果没有提交表单，则既不需要 <form> 元素，也不需要提交 <button>。对于语义，包含 <search> 元素以包含搜索和过滤功能。
¥This example demonstrates potential DOM content when dynamically including JavaScript search functionality in a web application. When search functionality is implemented entirely with JavaScript, if no form is submitted, neither a <form> element nor a submit <button> is required. For semantics, the <search> element is included to contain the search and filtering capabilities.
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>
结果
¥Result
注意：请记住，有些用户没有 JavaScript，并且在 JavaScript 成功下载、解析和执行之前，你的用户都没有运行 JavaScript，因此请确保你的用户可以在禁用 JavaScript 的情况下访问你网站的内容。
¥Note: Remember that some users don't have JavaScript, and none of your users have JavaScript running until the JavaScript is successfully downloaded, parsed, and executed, ensure your users can access the content of your site with JavaScript disabled.
多次搜索
¥Multiple searches
此示例演示了具有两个搜索功能的页面。第一个是位于标题上的全球站点搜索。第二个是基于页面上下文的搜索和过滤，在我们的示例中是汽车搜索。
¥This example demonstrates a page with two search features. The first is a global site search located on the header. The second is a search and filter based on the page context, in our example a car search.
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>
结果
¥Result
技术总结
规范
| Specification |
|---|
| HTML Standard # the-search-element |
浏览器兼容性
BCD tables only load in the browser