Как сделать поле поиска
Короткий ответ
Сделайте форму с полем type="search" и кнопкой, а саму форму оберните в <search>:
<search>
<form>
<input type="search" name="q" placeholder="Search the site" aria-label="Search">
<button>Find</button>
</form>
</search>Тип search добавляет крестик для очистки поля, а на телефоне клавиша ввода превращается в «Найти». Элемент <search> помечает область поиска для программ чтения с экрана. Для старых браузеров вместо него форме добавляют role="search", как в следующем примере.
Поле и кнопка вместе
Поле и кнопку объединяют flexbox'ом в один блок со скруглением:
<style>
.search { display: flex; max-width: 320px; border: 1px solid silver; border-radius: 999px; overflow: hidden; }
.search input { flex: 1; min-width: 0; padding: 8px 14px; border: 0; font: inherit; outline: none; }
.search button { padding: 0 16px; border: 0; background: steelblue; color: white; cursor: pointer; }
.search:focus-within { outline: 2px solid lightblue; }
</style>
<form class="search" role="search">
<input type="search" name="q" placeholder="Search" aria-label="Search">
<button>Find</button>
</form>:focus-within подсвечивает всю форму, когда фокус в поле, — раз уж у самого поля обводку убрали.
Значок лупы внутри поля
Иконку кладут поверх поля абсолютным позиционированием и оставляют слева отступ под неё:
<style>
.field { position: relative; display: inline-block; }
.field svg { position: absolute; left: 10px; top: 50%; translate: 0 -50%; pointer-events: none; }
.field input { padding: 8px 8px 8px 34px; border: 1px solid silver; border-radius: 8px; }
</style>
<label class="field">
<svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><circle cx="7" cy="7" r="5" fill="none" stroke="gray" stroke-width="2"/><path d="M11 11l4 4" stroke="gray" stroke-width="2"/></svg>
<input type="search" placeholder="Search" aria-label="Search">
</label>pointer-events: none пропускает щелчок по иконке сквозь неё — в поле.
Частая ошибка
Поле поиска оставляют без подписи — ведь «и так видно, что это поиск». Скринридер объявит просто «поле ввода». Если видимой подписи нет, добавьте aria-label="Search", как в примерах.
Функции из этого ответа
- <search> — Область поиска или фильтрации на странице.
- <input> — Поле ввода; вид поля задаёт атрибут `type`.
- <form> — Форма: собирает данные из полей и отправляет их на сервер.
- type — Вид поля `<input>`: от текста и чисел до даты, цвета и файла.
- aria-* — Атрибуты доступности: роль, название и состояние элемента для программ чтения с экрана.