HTML элемент search

24 марта 2023 года в спецификации HTML появился элемент search — специализированный контейнер для интерфейсов поиска.

Элемент <search> служит семантической обёрткой для форм поиска и фильтрующих компонентов UI. Он обеспечивает лучшую доступность, чем общие элементы <div>, и разъясняет назначение связанного с поиском контента как браузерам, так и вспомогательным технологиям.

До его появления разработчики полагались на типовые элементы div с ролями ARIA для обозначения областей поиска — решение приемлемое, но не идеально. Элемент search меняет ситуацию, предоставляя собственное семантическое значение для интерфейсов поиска и фильтрации.

HTML элемент <search>

<search> <!-- NEW -->
  <form>
    <input type="search" placeholder="Search...">
    <button type="submit">Search</button>
  </form>
</search>

Поле ввода type="search" предоставляет специфические для платформы возможности, такие как понятные кнопки в некоторых браузерах.

Явная метка помогает всем пользователям понять, что они ищут, а метка ARIA обеспечивает дополнительный контекст для устройств чтения с экрана.

<search>
  <h2>Filter Products</h2>
  <div class="filter-group">
    <h3>Price Range</h3>
    <input type="range" min="0" max="1000" value="500">
  </div>
  <div class="filter-group">
    <h3>Categories</h3>
    <input type="checkbox" id="electronics" name="category">
    <label for="electronics">Electronics</label>
    <input type="checkbox" id="clothing" name="category">
    <label for="clothing">Clothing</label>
  </div>
</search>

Когда использовать <search>

Элемент search может показаться простым, но знание, когда его использовать, повышает эффективность:

<!-- Хорошо: Глобальный поиск по сайту -->
<search>
  <form>
    <input type="search" placeholder="Search entire site">
  </form>
</search>

<!-- Хорошо: Фильтрация товаров -->
<search>
  <form>
    <fieldset>
      <legend>Filter by price</legend>
      <input type="range">
    </fieldset>
  </form>
</search>

<!-- Не идеально: Просто текстовое поле -->
<input type="text" placeholder="Enter your name">

Элемент search не предназначен для всех полей ввода. Он предназначен для интерфейсов поиска и фильтрации, в которых пользователи могут искать или ограничивать содержимое.

Элемент <search> представляет специальный раздел для поисковой функциональности — но с важной оговоркой. Хотя он идеально подходит для ввода поисковых данных и мгновенных результатов, таких как автозавершение, его не следует использовать для полноценных страниц с результатами поиска.

<!-- Хорошо: Ввод поисковой информации с быстрыми предложениями -->
<search>
  <form>
    <input type="search">
    <ul class="suggestions">
      <li><a href="/doc1">Quick result 1</a></li>
      <li><a href="/doc2">Quick result 2</a></li>
    </ul>
  </form>
</search>

<!-- Не подходит: Страница с результатами поиска -->
<search> <!-- Не делайте так -->
  <h1>Search Results for "query"</h1>
  <div class="results">
    <!-- Страница результатов поиска -->
  </div>
</search>

Результаты поиска размещаются в основном содержимом страницы, обычно в элементах <main> или <article>. Элемент <search> предназначен для самого интерфейса поиска — полей ввода, фильтров и немедленной обратной связи, например, предложений автозаполнения.