<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 表格僅在瀏覽器中載入