Формы являются неотъемлемой частью большинства веб-приложений. Bootstrap значительно упрощает их создание, предоставляя готовые стили и классы для различных элементов. Этот урок посвящен основам создания форм с помощью Bootstrap.
Базовая форма
Для начала необходимо использовать тег <form>. По желанию можно добавить атрибут role="form" для лучшей семантической разметки.
<form role="form">
<!-- Здесь будут поля формы -->
</form>
Важно помнить:
- Все поля формы должны находиться внутри тега <form>.
- Каждое поле (вместе с описанием и подсказкой) должно быть заключено в отдельный блок с классом 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 предоставляет мощный набор инструментов для создания стильных и отзывчивых форм. Использование описанных классов позволяет легко создавать и настраивать формы различных типов и конфигураций. Мы рассмотрели основные элементы и методы создания функциональных и привлекательных форм.