Написать пост

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

Аватарка пользователя Дух айтишной эмо школы
для
Логотип компании Tproger
Tproger

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

В стандарте 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.

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

			<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.

Вторая функция включена в <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К открытий3К показов