<search>: 通用搜索元素
<search> HTML 元素是一个容器，表示文档或应用程序中包含表单控件或其他与执行搜索或过滤操作相关的内容的部分。<search> 元素从语义上标识了元素内容的目的，即具有搜索或过滤功能。搜索或过滤功能可以针对网站或应用程序、当前网页或文档，或者整个互联网或其中的一个子集。
属性
此元素仅包含全局属性。
用法说明
<search> 元素并非用于呈现搜索结果。相反，搜索或过滤后的结果应作为该网页主内容的一部分进行呈现。也就是说，作为搜索或过滤功能一部分的“快速搜索”建议和链接，可以恰当地嵌套在 <search> 元素的内容中，因为它们是搜索功能的一部分。
无障碍
<search> 元素定义了一个 search 地标。这消除了向 <form> 元素添加 role=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 |
浏览器兼容性
加载中…