Сетка формы: подписи и поля без ломких ширин
Форму можно разложить по колонкам, сохраняя каждую подпись рядом со своим полем и удобный порядок Tab.
Назначение
Форму можно разложить по колонкам, сохраняя каждую подпись рядом со своим полем и удобный порядок Tab.
Как это работает
Каждая пара label и input объединена в контейнер. Внешний Grid распределяет пары, а внутреннее поле занимает доступную ширину с border-box. На узком экране используется одна колонка.
Пример
<style>.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.field{min-width:0}.field label{display:block}.field input{width:100%;box-sizing:border-box}@media(max-width:460px){.form-grid{grid-template-columns:1fr}}</style>
<form class="form-grid"><div class="field"><label for="first-name">Имя</label><input id="first-name" name="first" autocomplete="given-name"></div><div class="field"><label for="last-name">Фамилия</label><input id="last-name" name="last" autocomplete="family-name"></div></form>Что должно получиться
Пары полей переходят в одну колонку по ширине области. Пример не отправляет данные и не задаёт реальный контракт обработки личной информации.
Граница применения и частая ошибка
Не переставляйте поля только визуально: фокус клавиатуры обычно следует DOM. Поля одного логического шага должны читаться последовательно и при выключенных стилях.
Самостоятельная проверка
Пройдите форму клавиатурой при двух и одной колонке. Добавьте длинную подпись и проверьте, что она не перекрывает поле и не вынуждает страницу прокручиваться горизонтально.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Для проверки сетевых запросов, отправки данных или функций браузера используйте отдельную локальную страницу.