Поисковая строка: подпись поля и кнопка без тесноты
Поисковая форма должна оставаться понятной при вводе, увеличении масштаба и узком окне. Постоянная подпись объясняет назначение поля, а кнопка показывает действие.
Назначение
Поисковая форма должна оставаться понятной при вводе, увеличении масштаба и узком окне. Постоянная подпись объясняет назначение поля, а кнопка показывает действие.
Как это работает
Форма с role="search" обозначает область поиска. Label связывается с input по id, name задаёт имя параметра запроса. Flex с переносом позволяет кнопке перейти на следующую строку при недостатке места.
Пример
<style>.search-row{display:flex;flex-wrap:wrap;gap:.6rem}.search-row input{flex:1 1 12rem;min-width:0;padding:.6rem}.search-row button{padding:.6rem 1rem}</style>
<form role="search" action="/search/" method="get">
<label for="query">Поиск по учебным заметкам</label>
<div class="search-row"><input id="query" name="q" type="search"><button type="submit">Найти</button></div>
</form>Что должно получиться
Поле и кнопка делят строку, а на узком окне могут переноситься. В песочнице отправка заблокирована. В собственном проекте нужен обработчик /search/: одна разметка не создаёт поиск по базе.
Граница применения и частая ошибка
Placeholder исчезает при вводе и не заменяет label. Не отправляйте через GET пароли и другие секреты: запрос становится частью адреса. Не подменяйте кнопку кликабельным div — это потребует воспроизвести клавиатурное поведение.
Самостоятельная проверка
Сократите окно до ширины телефона, увеличьте масштаб и перейдите к форме клавишей Tab. Проверьте, что введённый текст не сжимает кнопку до нечитаемого состояния, а подпись остаётся видна.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.