<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 |
瀏覽器相容性
載入中…