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

для

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

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

Зарплаты веб-разработчиков на Западе в 2024 году

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.

Фронтенд-разработчик: что это за профессия и где ей обучиться

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К показов

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

Фронтенд-разработка: чем занимаются и сколько зарабатывают специалисты

Профессия фронтенд-разработчика сейчас в числе самых востребованных в IT. Разбираем базовые вопросы для тех, кто планирует стать фронтенд-разработчиком.

Зачем нужна эта библиотека Python в веб-разработке

Пройдите небольшое тестирование, чтобы узнать, насколько вы знакомы с Python-библиотеками и фреймворками, которые используют в веб-разработке.

Дьявол в деталях: интерактивная карта на OpenLayers. Часть 1.

Поделились опытом создания интерактивной карты на JS-библиотеке OpenLayers. Рассказали, как создать карту, настроить её и сделать маркеры.

На каком языке писать сайт в 2024 году

Сергей Немчинский обсуждает выбор технологий для создания сайта в 2024 году и рассматривает фронтенд- и бэкенд-технологии.