<search> - HTML-елемент для пошуку

HTML-елемент <search> представляє розділ сторінки, що містить елементи для виконання пошуку або фільтрації.

Елемент <search> є тегом, який групує елементи керування формою, призначені для пошуку або фільтрації. Це може бути як простий рядок пошуку, так і складний набір фільтрів.

Використання <search> покращує доступність, оскільки допоміжні технології, такі як скрінрідери, можуть ідентифікувати цей блок як функцію пошуку, що полегшує навігацію для користувачів.

<search>
  <form>
    <label for="query">Пошук:</label>
    <input type="search" id="query" name="q">
    <button type="submit">Знайти</button>
  </form>
</search>

<search>
  <form action="/search" method="get">
    <label for="search-input">Пошук по сайту:</label>
    <input type="search" id="search-input" name="q" placeholder="Що шукаєте?">
    <button type="submit">Пошук</button>
  </form>
</search>

<search>
  <form>
    <fieldset>
      <legend>Фільтри</legend>
      <label for="category">Категорія:</label>
      <select id="category" name="category">
        <option value="all">Всі</option>
        <option value="tech">Технології</option>
        <option value="news">Новини</option>
      </select>
      <br>
      <label for="date">Дата:</label>
      <input type="date" id="date" name="date">
    </fieldset>
  </form>
</search>

search {
  display: block;
}