<search>: Элемент общего поиска

Базовая версия 2023

Новое

С октября 2023 года эта функция работает во всех последних версиях устройств и браузеров. Возможно, эта функция не будет работать на старых устройствах или браузерах.

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

Атрибуты

В этом элементе используются только глобальные атрибуты.

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

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

Доступность

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

Примеры

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

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

HTML

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

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>

Результат

Примечание: Помните, что некоторые пользователи не имеют JavaScript, и ни один из ваших пользователей не будет иметь запущенный JavaScript, пока JavaScript не будет успешно загружен, проанализирован и выполнен. Убедитесь, что ваши пользователи могут получить доступ к содержимому вашего сайта при отключенном JavaScript.

Несколько поисков

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

HTML

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>

Результат

Техническое резюме

Категории контента	Потоковое содержимое, Осязаемое содержимое.
Разрешенное содержимое	Потоковое содержимое.
Пропуск тега	Нет, и открывающий, и закрывающий тег обязательны.
Неявная роль ARIA	`search`
Разрешенные роли ARIA	`form`, `group`, `none`, `presentation`, `region`, `search`
Интерфейс DOM	`HTMLElement`

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

Спецификация
Стандарт HTML # the-search-element

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

	Рабочий стол					Мобильные
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`search`	118	118	118	104	17	118	118	79	17	25.0	118

См. также

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

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/search