Bootstrap 5: Создание форм — руководство для начинающих

Формы являются неотъемлемой частью большинства веб-приложений. Bootstrap значительно упрощает их создание, предоставляя готовые стили и классы для различных элементов. Этот урок посвящен основам создания форм с помощью Bootstrap.

Базовая форма

Для начала необходимо использовать тег <form>. По желанию можно добавить атрибут role="form" для лучшей семантической разметки.

<form role="form">
  <!-- Здесь будут поля формы -->
</form>

Важно помнить:

  1. Все поля формы должны находиться внутри тега <form>.
  2. Каждое поле (вместе с описанием и подсказкой) должно быть заключено в отдельный блок с классом form-group.

Пример блока для поля электронной почты:

<div class="form-group">
  <label for="email">Email:</label>
  <input type="email" class="form-control" id="email" placeholder="Введите email">
</div>

Класс form-control автоматически применяет стили Bootstrap, обеспечивая красивое и отзывчивое отображение поля, растягивающееся на всю ширину родительского блока. Атрибут placeholder добавляет подсказку внутри поля. Атрибуты id и for в <label> связывают метку и поле.

Подсказки

Для улучшения юзабилити можно добавить информационные подсказки к полям формы. Для этого используется тег <p> с классом help-block:

<p class="help-block">Некая подсказка</p>

Подсказка отображается серым цветом под полем ввода.

Дополнительные поля

Аналогично создаются поля для пароля, чекбоксов, радиокнопок и выпадающих списков:

Поле пароля:

<div class="form-group">
  <label for="password">Password:</label>
  <input type="password" class="form-control" id="password" placeholder="Введите пароль">
</div>

Чекбокс:

<div class="checkbox">
  <label>
    <input type="checkbox"> Checkbox
  </label>
</div>

Обратите внимание: для чекбоксов не требуется блок form-group. Класс checkbox применяется напрямую к элементу <label>.

Радиокнопки:

<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
    Option one is this and that—be sure to include why it’s great
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
    Option two can be something else and selecting it will deselect option one
  </label>
</div>

Радиокнопки группируются в блоке radio, а атрибут name обеспечивает взаимную исключительность выбора. Класс inline для <label> обеспечивает горизонтальное расположение.

Выпадающий список (Select):

<select class="form-control">
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>

Класс form-control применяется и к тегу <select>.

Кнопка отправки

Для кнопки отправки формы используется тег <button> с классом btn btn-success:

<button type="submit" class="btn btn-success">Регистрация</button>

Расположение элементов

По умолчанию поля формы располагаются вертикально. Можно изменить это с помощью классов:

  • form-inline: располагает элементы формы в одну строку.
  • form-horizontal: создает горизонтальную форму. Для меток (<label>) необходимо добавить класс control-label. Ширина элементов контролируется классами col-md-* системы сеток Bootstrap.

Статический текст

Для отображения статического текста вместо поля ввода используется класс form-control-static:

<div class="form-group">
  <label class="col-md-2 control-label">Ваша почта</label>
  <div class="col-md-10">
    <p class="form-control-static">example@example.com</p>
  </div>
</div>

Размер поля

Для изменения размера поля ввода используются классы form-control-lg, form-control-md, form-control-sm и form-control-xs.

Контекстные классы

Для отображения состояния поля (ошибка, предупреждение, успех) используются классы has-error, has-warning и has-success. Эти классы добавляются к блоку form-group.

Bootstrap предоставляет мощный набор инструментов для создания стильных и отзывчивых форм. Использование описанных классов позволяет легко создавать и настраивать формы различных типов и конфигураций. Мы рассмотрели основные элементы и методы создания функциональных и привлекательных форм.

Что будем искать? Например,программа