HTML таг search

Пример

Кратък пример как се използва тагът <search>.

<search class="d-flex gap-2 align-items-center" role="search" aria-label="Търсене в сайта">
  <label for="site-search" class="form-label mb-0">Търси:</label>
  <input id="site-search" class="form-control" type="search" name="q" placeholder="Въведете ключова дума...">
  <button class="btn btn-primary" type="submit">Търси</button>
</search>

Дефиниция и употреба

Елементът <search> е предложен HTML елемент, който се използва за групиране на съдържание, свързано с търсене – например поле за търсене, бутон за изпращане и филтри. Целта му е семантично да обозначи зона за търсене в страницата.

Въпреки че не е част от официалната HTML спецификация и не предоставя специално поведение в браузърите, той може да се използва като обикновен контейнер (подобно на <div>) и да се стилизира с CSS или Bootstrap класове. Често се комбинира с role="search", за да се подобри достъпността и да се покаже ясно на помощните технологии, че това е секция за търсене.

Типичната употреба включва:

• Групиране на поле за търсене (<input type="search">) и бутон за търсене.
• Добавяне на филтри и допълнителни опции за търсене в рамките на един семантичен блок.
• По-ясна структура на страницата при изграждане на сложни интерфейси с множество зони за търсене.

Тъй като <search> не е стандартизиран, някои проекти предпочитат да използват <form role="search"> или <div role="search">. Ако все пак изберете да използвате <search>, третирайте го като обикновен блоков елемент и не разчитайте на специфична браузърна логика.

Browser Support

Browser	Поддръжка
Chrome	✔️ (като несемантичен елемент, третиран като блоков контейнер)
Firefox	✔️ (като несемантичен елемент, третиран като блоков контейнер)
Edge	✔️ (като несемантичен елемент, третиран като блоков контейнер)
Safari	✔️ (като несемантичен елемент, третиран като блоков контейнер)
Opera	✔️ (като несемантичен елемент, третиран като блоков контейнер)

Атрибути