<search>: Phần tử tìm kiếm chung
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.
Phần tử <search> trong HTML là một vùng chứa biểu diễn các phần của tài liệu hoặc ứng dụng có các điều khiển form hoặc nội dung khác liên quan đến việc thực hiện tìm kiếm hoặc lọc dữ liệu. Phần tử <search> xác định mặt ngữ nghĩa mục đích của nội dung phần tử là có khả năng tìm kiếm hoặc lọc. Chức năng tìm kiếm hoặc lọc có thể dành cho trang web hoặc ứng dụng, trang web hoặc tài liệu hiện tại, hoặc toàn bộ Internet hoặc một mục con của nó.
Thuộc tính
Phần tử này chỉ bao gồm các thuộc tính toàn cục.
Ghi chú sử dụng
Phần tử <search> không dùng để hiển thị kết quả tìm kiếm. Thay vào đó, kết quả tìm kiếm hoặc lọc nên được trình bày như một phần của nội dung chính của trang web đó. Tuy nhiên, các gợi ý và liên kết là một phần của chức năng "tìm kiếm nhanh" trong chức năng tìm kiếm hoặc lọc được lồng thích hợp trong nội dung của phần tử <search> vì chúng là các tính năng tìm kiếm.
Khả năng tiếp cận
Phần tử <search> xác định một mốc search. Điều này loại bỏ nhu cầu thêm role=search vào phần tử <form>.
Ví dụ
Form tìm kiếm trong header
Ví dụ này minh họa việc sử dụng <search> như vùng chứa cho tìm kiếm trong header của trang web để thực hiện tìm kiếm toàn trang. <search> là vùng chứa ngữ nghĩa cho <form> gửi truy vấn tìm kiếm do người dùng nhập đến máy chủ.
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>
Kết quả
Tìm kiếm ứng dụng web
Ví dụ này minh họa nội dung DOM tiềm năng khi tích hợp động chức năng tìm kiếm JavaScript vào một ứng dụng web. Khi chức năng tìm kiếm được thực hiện hoàn toàn bằng JavaScript, nếu không có form nào được gửi, cả phần tử <form> lẫn nút gửi <button> đều không bắt buộc. Về mặt ngữ nghĩa, phần tử <search> được bao gồm để chứa các khả năng tìm kiếm và lọc.
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>
Kết quả
Note: Hãy nhớ rằng một số người dùng không có JavaScript, và không có người dùng nào của bạn có JavaScript chạy cho đến khi JavaScript được tải xuống, phân tích cú pháp và thực thi thành công. Đảm bảo rằng người dùng của bạn có thể truy cập nội dung của trang khi JavaScript bị tắt.
Nhiều tìm kiếm
Ví dụ này minh họa một trang có hai tính năng tìm kiếm. Tính năng đầu tiên là tìm kiếm trang web toàn cục nằm ở header. Tính năng thứ hai là tìm kiếm và lọc dựa trên ngữ cảnh trang, trong ví dụ này là tìm kiếm xe ô tô.
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>
Kết quả
Tóm tắt kỹ thuật
| Danh mục nội dung | Nội dung luồng, nội dung rõ ràng. |
|---|---|
| Nội dung được phép | Nội dung luồng. |
| Bỏ qua thẻ | Không có, cả thẻ mở và thẻ đóng đều bắt buộc. |
| Vai trò ARIA ngầm định |
search
|
| Vai trò ARIA được phép |
form, group, none, presentation, region, search
|
| Giao diện DOM | HTMLElement |
Thông số kỹ thuật
| Thông số kỹ thuật |
|---|
| HTML # the-search-element |