<search>
Oznacza część strony z wyszukiwarką albo filtrami wyników.
- Wyświetlanie
- block
- Znacznik zamykający
- Wymagany
- Dozwolona zawartość
- Treść przepływu (flow content)
Przykład
#<search>
<form action="/szukaj">
<label for="query">Szukaj w dokumentacji</label>
<input type="search" id="query" name="q" placeholder="np. flexbox">
<button>Szukaj</button>
</form>
</search>Definicja i zastosowanie
#Element <search> obejmuje elementy służące do wyszukiwania lub filtrowania: wyszukiwarkę w nagłówku serwisu, pole „Szukaj w dokumentacji”, filtry listy produktów. Nie zawiera samych wyników, tylko część, w której użytkownik wpisuje lub wybiera kryteria.
Czytniki ekranu rozpoznają go jako punkt orientacyjny „search”, do którego można szybko przeskoczyć. Wcześniej ten sam efekt uzyskiwało się, dodając do formularza atrybut role="search".
W środku może być <form>, który wysyła zapytanie na serwer, albo same pola, które filtrują listę na bieżąco za pomocą JavaScriptu. Nie używaj <search> dla formularzy innego rodzaju, np. zapisu do newslettera czy logowania.
To stosunkowo nowy element: wszystkie popularne przeglądarki obsługują go od 2023 roku.
Składnia
#<search>
<form>…</form>
</search>Atrybuty
#Ten element nie ma własnych atrybutów. Obsługuje atrybuty globalne, takie jak class, id czy hidden.
Więcej przykładów
#<search>
<label for="filter">Filtruj kursy</label>
<input type="search" id="filter" placeholder="np. script">
</search>
<ul id="courses">
<li>HTML i CSS</li>
<li>JavaScript</li>
<li>TypeScript</li>
<li>Python</li>
</ul>
<script>
const input = document.getElementById('filter');
const items = document.querySelectorAll('#courses li');
input.addEventListener('input', () => {
const query = input.value.trim().toLowerCase();
items.forEach((item) => {
item.hidden = !item.textContent.toLowerCase().includes(query);
});
});
</script>Wpisz „script”, a na liście zostaną tylko JavaScript i TypeScript. Lista wyników stoi poza elementem <search>.
Domyślny CSS
#Większość przeglądarek wyświetla ten element z takimi stylami domyślnymi:
search {
display: block;
}Obsługa przeglądarek
#Szeroko dostępne · od 2023 roku
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Wyniki wyszukiwania umieść poza
<search>, np. w<main>albo osobnej<section>. - Pole wyszukiwania zawsze opisz etykietą
<label>. Placeholder znika podczas pisania i nie zastąpi etykiety. - Jeśli na stronie są dwie wyszukiwarki, nadaj im nazwy przez
aria-label, np. „Szukaj w kursach”.
Powiązane hasła
#- <form>Formularz, który zbiera dane od użytkownika i wysyła je pod wskazany adres.
- <input>Pole formularza: tekst, e-mail, hasło, liczba, data, suwak, pole wyboru, plik i wiele innych.
- <label>Etykieta pola formularza. Kliknięcie etykiety przenosi kursor do pola.
- <nav>Blok głównych linków nawigacyjnych: menu, spis treści, okruszki.
- <header>Wstęp do strony lub sekcji: logo, tytuł, nawigacja, dane autora.
Widzisz błąd albo brakuje przykładu? Napisz do nas.