<search> универсальный элемент поиска HTML

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

Атрибуты

Этот элемент включает только глобальные атрибуты.

Примечания по использованию

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

Специальные возможности

Элемент <search> определяет ориентир search. Благодаря этому отпадает необходимость добавлять role=search к элементу <form>.

Примеры

Форма поиска в заголовке

В этом примере показано использование <search> в качестве контейнера для поиска в заголовке сайта, чтобы выполнять поиск по всему сайту. <search> — это семантический контейнер для <form>, которая отправляет введённый пользователем поисковый запрос на сервер.

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>

Результат

Поиск в веб-приложении

В этом примере показано возможное содержимое DOM при динамическом добавлении функции поиска на JavaScript в веб-приложение. Если функция поиска полностью реализована на JavaScript и форма не отправляется, элемент <form> и кнопка отправки <button> не требуются. Для обеспечения семантики включён элемент <search>, содержащий возможности поиска и фильтрации.

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>

Результат

Несколько поисковых функций

В этом примере показана страница с двумя функциями поиска. Первая — глобальный поиск по сайту, расположенный в заголовке. Вторая — поиск и фильтрация с учётом контекста страницы, в нашем примере — поиск автомобилей.

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>

Результат

Техническая сводка

Спецификации

Совместимость с браузерами

См. также

• Другие элементы, связанные с поиском: <header>, <footer>, <aside>, <nav>, <form>
• ARIA: роль Search