В HTML появился новый элемент Search

для

Отредактировано

В HTML появился элемент search, который ищет данные по документу и всему Интернету. Обсудили его важность и привели примеры использования.

3К открытий4К показов

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

Search содержит элементы управления формой (такие как поле ввода текста, выпадающее окно, кнопки и т.д.), а область поиска или фильтрации может быть любой: от одного документа до всего Интернета.

Как search работает в HTML

Перед тем, как появился элемент <search>, обычно добавляли role="search" к тегу <form>, чтобы испрользовать форму для поиска:

			<form role="search" method="get" action="/search">
  <input type="search" name="search-text" />
  <button>Search</button>
</form>

Теперь достаточно использовать тег для обёртки формы:

			<search>
  <form method="get" action="/search">
    <input type="search" name="search-text" />
    <button>Search</button>
  </form>
</search>

Увы, так как <search> — это новый стандарт, понадобится время, прежде чем все браузеры и инструменты догонят его. До тех пор можно использовать хак, указывающий роль ARIA.

Как использовать html-элемент dialog

tproger.ru

В будущем этот хак уже не понадобится, но сейчас он поможет подготовить код до тех пор, пока браузеры не начнут поддержку нового тега:

			<search role="search">
   ...
</search>

Это может показаться нелогичным: мы удаляем role="search", но все обертываем <search>. Кроме того, так выходит больше кода (аж на три символа больше), ещё и увеличивается вложенность (на один уровень больше).

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

Варианты использования search в HTML

Есть важный момент: <search> не обязательно должен быть текстовым вводом с кнопкой. Его можно использовать для фильтрации результатов или строк в таблицах.

Польза <search> выходит за рамки обычных текстовых вводов и поисковых полей:

			<search>
  <h2>Filter results</h2>

  <form>
    <label for="cartype">Car type</label>
    <select id="cartype">
      <option value="coupe">Coupe</option>
      <option value="sedan">Sedan</option>
    </select>

    <label for="electric">Electric?</label>
    <input type="checkbox" id="electric" />
  </form>
</search>

В этом примере форму поиска включили в заголовок веб-страницы:

			<header>
  <h1><a href="/">My fancy blog</a></h1>
  ...
  <search>
    <form action="search.php">
      <label for="query">Find an article</label>
      <input id="query" name="q" type="search">
      <button type="submit">Go!</button>
    </form>
  </search>
</header>

В следующем примере на странице расположены две функции поиска.

Первая находится в заголовке веб-страницы и служит глобальным поиском по сайту. На его назначение указывает title.

Notion удалит аккаунты российских пользователей и их воркспейсы уже 9 сентября. Какие есть альтернативы?

tproger.ru

Вторая функция включена в <main> и позволяет искать и фильтровать данные из содержимого этой же страницы. На его назначение указывает заголовок <h2>.

			<body>
  <header>
    ...
    <search title="Website">
      ...
    </search>
  </header>
  <main>
    <h1>Hotels near your location</h1>
     <search>
       <h2>Filter results</h2>
       ...
     </search>
     <article>
      <!-- search result content -->
    </article>
  </main>
</body>

Заключение

С элементом <search> все востребованные сообществом роли ARIA landmark будут закрыты. Элемент увеличивает доступность разметки (хотя и пройдет много времени, пока все браузеры подхватят идею) и расширяет семантику языка.

Однако с точки зрения программиста кажется, что элемент мало что добавляет к существующей реализации. Например, введение тэгов типа <tabpanel> и <tab> было бы гораздо ценнее.

Но это не отменяет важности <search>. Все улучшения, даже незначительные, только приветствуются. И <search> — отличное дополнение к семейству HTML.

3К открытий4К показов

Также рекомендуем

Django или Node.js: что выбрать в 2024 году

Рассмотрели преимущества, недостатки, сходства, различия, возможности карьерного роста для Django и Node.js, чтобы выяснить, какую из них лучше использовать.

Когда фронтендеру пора остановиться в изучении HTML, CSS и JS

IT-блогер Chris Sean рассказал, каких знаний в HTML, CSS и JS достаточно для работы во фронтенде.

CSS в 2023: что изменилось за последние несколько лет

Рассказали о нововведениях в CSS в 2023 году: какие оказали большое влияние на текущие методы работы с CSS, а какие не изменили ничего.

Какие JS-библиотеки использовать для анимаций на сайте в 2024 году

JS-библиотек более тысячи — они постоянно обновляются, а многие из них создаются сообществом. Рассказываем о наиболее актуальных для разработки анимаций на сайте.