Как создать вертикально расположенную форму в CSS

CSS: стили для вертикальной формы

Оригинальный пример подключения внешнего файла стилей:

Пример исходного CSS из статьи:

    

body {

font-family: Calibri;

}

input[type=text], select {

width: 25%;

padding: 12px 20px;

margin: 8px 10;

display: list-item;

border: 4px double #39A9DB;

border-radius: 8px;

box-sizing: border-box;

}

input[type=submit] {

width: 25%;

background-color: #F8E2E6;

color: #0000FF;

padding: 12px 18px;

margin: 20px 0;

border: none;

border-radius: 6px;

cursor: pointer;

}

div.container {

border-radius: 10px;

background-color: #39A9DB;

padding: 40px;

}

Этот CSS даёт базовую стилизацию, но его можно улучшить для адаптивности и доступности. Ниже — современный вариант с flexbox, который гарантирует вертикальное расположение и удобство на всех экранах.

/* Responsive stacked form using flexbox */
.container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 480px;
  margin: 0 auto;
}
.container label,
.container input,
.container select {
  width: 100%;
  box-sizing: border-box;
}
input[type="submit"] {
  align-self: flex-start;
  padding: 10px 16px;
}

Пример вывода

Изображение показывает, как выглядит форма после стилизации: метки находятся над полями, отступы равномерны, кнопка отправки заметна.

Улучшения и варианты

• Адаптивность: используйте проценты и max-width, чтобы форма выглядела хорошо на мобильных.
• Доступность: добавьте корректные id и for для меток, используйте aria-атрибуты для нестандартных виджетов.
• Валидация: применяйте type=”email” для адресов и required для обязательных полей; полагаясь на HTML5 и дополнительно — на серверную валидацию.
• Альтернативы: можно расположить метки слева (inline labels) для экономии вертикального пространства на широких экранах.
• Когда это не подходит: при таблицах данных или очень коротких формах горизонтальное расположение может быть компактнее.

Важно: проверяйте форму на разных устройствах и в разных браузерах. Убедитесь, что открывающий тег form присутствует и что серверная логика обрабатывает данные корректно.

Проверочный чек-лист ролей

• Дизайнер:
  • Проверил читаемость шрифтов и контраст.
  • Убедился в согласованности отступов и цветов.
• Разработчик:
  • Добавил правильные id и for для меток.
  • Реализовал адаптивность (flexbox/grid).
  • Настроил клиентскую и серверную валидацию.
• QA:
  • Проверил фокусирование клавиатурой.
  • Проверил поведение при отключённом JavaScript.
  • Прогнал кросс-браузерные тесты.

Критерии приёмки

• Метки видимы над каждым полем.
• Поля корректно выровнены и не перекрываются на мобильных.
• Кнопка отправки доступна и вызывает нужный обработчик.
• Тесты на клавиатуре и экранных читалках проходят.

Резюме

Вертикальная форма — простой приём, который улучшает UX, особенно на мобильных устройствах. Используйте семантическую разметку, адаптивные CSS-паттерны и проверки доступности. Практикуйтесь на небольших проектах, чтобы отточить навыки и сделать формы более эффективными.