Вертикальная форма в CSS — как создать

CSS относится к классу языков, известных как языки таблиц стилей. Он используется для определения внешнего вида веб-страницы. HTML задаёт структуру, а CSS отвечает за оформление. Без CSS сайт будет выглядеть непривлекательно.

Фокус на CSS — один из лучших способов улучшить привлекательность и удобство сайта. Вертикальная (stacked) форма — простой и эффективный приём для повышения удобства ввода, особенно на мобильных устройствах.

Что такое stacked форма?

Stacked форма — это форма, где метки (label) и поля ввода (input, select) расположены друг над другом, а не в ряд. Такой порядок облегчает сканирование и снижает ошибки при вводе, особенно на узких экранах.

Код HTML

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

        `    






What Is a Stacked Form?

Here's how you create a stacked form.



Full Name



Email Address



Department



Information Technology

Customer Support

Sales











`
    

Однако этот HTML сам по себе создаст простую форму без вертикального выравнивания. Чтобы поля располагались одно под другим, нужен CSS.

Код CSS

Внешний файл CSS подключается в секции head. Затем примените стили к body, input, select и контейнеру. В оригинале используются свойства font-family, width, padding, margin, display, border и другие.

        `      
`
    

Оригинальный пример стилей:

        `    

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;

}
`
    

Проверка результата показана ниже.

Теперь вы можете создать stacked форму в CSS

Вы научились базовым шагам: структуре HTML, подключению CSS и простым стилям. Практикуйтесь, чтобы довести оформление до желаемого вида.

Важно: исходный пример содержит несколько неточностей (например, незакрытая форма и неоптимальный display). Ниже приведён исправленный и доступный пример, а также чек-лист и варианты альтернатив.

Когда stacked форма не подходит

• На широких десктопах, где горизонтальное расположение экономит место.
• Когда форма содержит очень короткие поля, и горизонтальное выравнивание улучшает визуальную связь метки и поля.
• Если важно поместить большое количество полей на одном экране.

Альтернативные подходы

• Flexbox: быстрый способ выравнивания и центрирования.
• CSS Grid: для сложных макетов с несколькими колонками.
• Inline labels (метки внутри поля): компактно, но хуже с доступностью.

Исправленный пример (HTML + CSS, более практичный)

  

    

      ФИО
      

      Email
      

      Отдел
      
        Выберите отдел
        Информационные технологии
        Поддержка клиентов
        Отдел продаж
      

      
    
  

Доступность и тестирование

• Убедитесь, что каждая метка связана с полем через атрибут for/id.
• Используйте семантические элементы form и button, где уместно.
• Проверяйте навигацию через клавиатуру (Tab, Shift+Tab).
• Тестируйте с увеличением масштаба и с экранными читалками.

Чек-лист для разработчика

• Метки связаны с полями.
• Контраст текста и фона соответствует доступности.
• Поля имеют логичные placeholder’ы и required, где нужно.
• Фокус видим (outline или box-shadow).
• Отправка формы работает (method/action).

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

• Все поля отображаются вертикально на мобильных и планшетах.
• Поля не пересекаются при изменении ширины окна.
• Форма полностью доступна клавиатуре и экранным читалкам.
• Тестовые отправки проходят без ошибок на стороне клиента (валидность) и сервера.

Короткий глоссарий

• label — элемент, описывающий поле ввода.
• input — элемент для ввода данных.
• select — выпадающий список.
• stacked форма — форма с вертикальным расположением полей.

Когда stacked форма не работает — быстрые подсказки

• Если у вас очень узкие контейнеры, ставьте ширину полей в процентах или используйте max-width.
• Для сложных сеток комбинируйте Grid и Flexbox.
• Для быстрой адаптивности используйте media queries и изменяйте width на 100% под 600px.

Сводка

Вы получили рабочие шаги: структура HTML, подключение CSS, исправленный практичный пример и набор правил тестирования. Используйте чек-лист и учитывайте доступность при реализации. Практикуйтесь регулярно, чтобы улучшать навыки верстки форм.