Формы в Bootstrap 4

Bootstrap 4 предлагает стиль по умолчанию, который применяется к большинству полей формы. Bootstrap также предоставляет классы для конкретных целей.

Базовая форма
Используйте класс .form-control для текстовых элементов <input>, <textarea> и <select>, чтобы применить к ним width: 100%. Вставьте метки и поля формы внутрь <fieldset> с классом .form-group, к которому применяется оптимальное расстояние. В качестве альтернативы можно использовать <div> или другой элемент.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<form>
<fieldset class="form-group">
<label for="first_name">Имя</label>
<input type="text" class="form-control" id="first_name" name="first_name">
</fieldset>
<fieldset class="form-group">
<label for="last_name">Фамилия</label>
<input type="text" class="form-control" id="last_name" name="last_name">
</fieldset>
<button type="submit" class="btn btn-primary">Отправить</button>
</form>

Форма в одну строку
Используйте класс .form-inline, чтобы элементы формы отображались как строчно-блочные и выравнивались по левому краю. Используйте вспомогательные класса (например, mr-sm-2), чтобы добавить пространство между элементами.

Обратите внимание, всё это применимо только тогда, когда область просмотра имеет ширину не меньше 576 пикселей.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<form class="form-inline">
<label class="mr-sm-2 mb-0" for="first_name">Имя</label>
<input type="text" class="form-control mr-sm-2 mb-2 mb-sm-0" id="first_name" name="first_name">
<label class="mr-sm-2 mb-0" for="last_name">Фамилия</label>
<input type="text" class="form-control mr-sm-2 mb-2 mb-sm-0" id="last_name" name="last_name">
<button type="submit" class="btn btn-primary mt-2 mt-sm-0">Отправить</button>
</form>

Скрытые метки
В полях ввода всегда должны указываться метки, иначе программы чтения с экрана ожидают проблемы. При необходимости вы можете скрыть метку с помощью класса .sr-only.

Здесь мы используем .sr-only, чтобы скрыть метки, а также добавляем атрибут placeholder, чтобы подсказывать пользователю что вводить. Использование атрибута placeholder таким способом не рекомендуется, так как это может вызвать проблемы с удобством пользования.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<form class="form-inline">
<label class="mr-sm-2 mb-0 sr-only" for="first_name">Имя</label>
<input type="text" class="form-control mr-sm-2 mb-2 mb-sm-0"
id="first_name" name="first_name" placeholder="Имя">
<label class="mr-sm-2 mb-0 sr-only" for="last_name">Фамилия</label>
<input type="text" class="form-control mr-sm-2 mb-2 mb-sm-0"
id="last_name" name="last_name" placeholder="Фамилия">
<button type="submit" class="btn btn-primary mt-2 mt-sm-0">Отправить</button>
</form>

Горизонтальная форма
Вы можете использовать классы сетки Bootstrap для создания горизонтальных форм. Просто укажите, сколько колонок должен занимать каждый элемент. В частности, добавьте класс .row к .form-group и класс .col-*-* или .col-* для каждой колонки.

Вы также должны добавить класс .col-form-label к элементу <label>, чтобы метка относительно текстовых полей расположилась по центру вертикали.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="container">
<form>
<div class="form-group row">
<label for="first_name" class="col-xs-3 col-form-label mr-2">Имя</label>
<div class="col-xs-9">
<input type="text" class="form-control" id="first_name" name="first_name">
</div>
</div>
<div class="form-group row">
<label for="last_name" class="col-xs-3 col-form-label mr-2">Фамилия</label>
<div class="col-xs-9">
<input type="text" class="form-control" id="last_name" name="last_name">
</div>
</div>
<div class="form-group row">
<div class="offset-xs-3 col-xs-9">
<button type="submit" class="btn btn-primary">Отправить</button>
</div>
</div>
</form>
</div>

Bootstrap 4 против Bootstrap 3
Когда речь идёт о горизонтальных формах, имеются некоторые незначительные различия между Bootstrap 4 и Bootstrap 3.

Сетки
При использовании сеток для макета формы, Bootstrap 4 требует класс .row. Этот класс не является обязательным для форм Bootstrap 3 (хотя по прежнему обязателен для сеток Bootstrap 3).
Метки
Bootstrap 4 использует .col-form-label в сетке макета формы, тогда как Bootstrap 3 использует .control-label. Обратите внимание, что Bootstrap 4 изначально использовал .form-control-label, но впоследствии заменил его на .col-form-label.
Класс .form-horizontal
Bootstrap 3 требует класс .form-horizontal, тогда как Bootstrap 4 нет.
Строка формы
Вы можете заменить .row на .form-row для более компактной компоновки.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<p><code>.row</code>:</p>
<form>
<div class="row">
<div class="col">
<input type="text" class="form-control" placeholder="Имя">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="Фамилия">
</div>
</div>
</form>
<p class="mt-5"><code>.form-row</code>:</p>
<form>
<div class="form-row">
<div class="col">
<input type="text" class="form-control" placeholder="Имя">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="Фамилия">
</div>
</div>
</form>

<legend>
При использовании элементов <legend> в формах вы можете добавить к ним класс .col-form-label. Этот класс стилизует <legeng>, чтобы он больше походил на метку. Это может быть удобно при представлении набора переключателей или флажков в горизонтальной форме.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="container">
<form>
<fieldset class="form-group">
<div class="row">
<legend class="col-form-label col-3">Фрукты</legend>
<div class="col-9">
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="legendRadio" id="legendRadio1" value="1">
Яблоко
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="legendRadio" id="legendRadio2" value="2" checked>
Апельсин
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="legendRadio" id="legendRadio3" value="3">
Арбуз
</label>
</div>
</div>
</div>
</fieldset>
<div class="form-group row">
<label for="first_name" class="col-3 col-form-label">Имя</label>
<div class="col-9">
<input type="text" class="form-control" id="first_name" name="first_name">
</div>
</div>
<div class="form-group row">
<label for="last_name" class="col-3 col-form-label">Фамилия</label>
<div class="col-9">
<input type="text" class="form-control" id="last_name" name="last_name">
</div>
</div>
<div class="form-group row">
<div class="offset-3 col-9">
<button type="submit" class="btn btn-primary">Отправить</button>
</div>
</div>
</form>
</div>

Смещение полей формы
В некоторых примерах используется класс .offset-* или .offset-*-* для выравнивания полей с метками и без.

Размер полей формы
Вы можете использовать .form-control-lg и .form-control-sm для увеличения или уменьшения размера полей ввода.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="form-group">
<input type="text" class="form-control form-control-sm" placeholder="Маленький">
</div>
<div class="form-group">
<input type="text" class="form-control" id="last_name" placeholder="Размер по умолчанию">
</div>
<div class="form-group">
<input type="text" class="form-control form-control-lg" placeholder="Большой">
</div>

Bootstrap 4 против Bootstrap 3
Bootstrap 4 использует классы .form-control-lg и .form-control-sm для увеличения или уменьшения размера полей ввода. Bootstrap 3 для этого использует .input-lg и .input-sm.

Размер метки
Вы можете добавить к меткам .col-form-label-sm и .col-form-label-lg, чтобы размер метки соответствовал размеру поля формы.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<form>
<div class="form-group row">
<label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control form-control-sm" id="colFormLabelSm" placeholder="Маленький">
</div>
</div>
<div class="form-group row">
<label for="colFormLabel" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="colFormLabel" placeholder="Размер по умолчанию">
</div>
</div>
<div class="form-group row">
<label for="colFormLabelLg" class="col-sm-2 col-form-label col-form-label-lg">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control form-control-lg" id="colFormLabelLg" placeholder="Большой">
</div>
</div>
</form>

Новое в Bootstrap 4
Классы .col-form-label-sm и .col-form-label-lg являются новыми в Bootstrap 4.

Размер колонок
Вы можете использовать систему сетки Bootstrap, чтобы задать поля формы желаемой ширины.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="form-row">
<div class="col-5">
<input type="text" class="form-control" placeholder=".col-5">
</div>
<div class="col-3">
<input type="text" class="form-control" placeholder=".col-3">
</div>
</div>

Текст справки
Bootstrap 4 предоставляет класс .form-text, который можно использовать для обозначения текста справки. Вы можете комбинировать этот класс со служебными классами, такими как .text-muted.

Вам также следует использовать атрибут aria-descriptionby, чтобы связать текст справки с полем формы. Это гарантирует, что программы чтения с экрана смогут сообщить текст справки, когда пользователь переведёт фокус на поле формы.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<label for="accountId">Идентификатор аккаунта</label>
<input type="text" id="accountId" class="form-control" aria-describedby="helpAccountId">
<span id="helpAccountId" class="form-text text-muted">Идентификатор аккаунта находится в верхней части счёта.</span>

Bootstrap 4 против Bootstrap 3
Bootstrap 4 использует класс .form-text для отображения текста справки, Bootstrap 3 использует класс .help-block.

Статичные поля формы
Вы можете использовать класс .form-control-plaintext для элемента <p>, чтобы представить простой текст рядом с меткой (например, вместо использования поля ввода).

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<form>
<div class="form-group row">
<label class="col-3 col-form-label mr-2">Логин</label>
<div class="col-8">
<p class="form-control-plaintext">Bugsy</p>
</div>
</div>
<div class="form-group row">
<label for="pwd" class="col-3 col-form-label mr-2">Пароль</label>
<div class="col-8">
<input type="password" class="form-control" id="pwd" placeholder="Пароль">
</div>
</div>
</form>

Bootstrap 4 против Bootstrap 3
Bootstrap 3 использовал класс .form-control-static для отображения статичного текста, в Bootstrap 4 этот класс был заменён на .form-control-plaintext.

Флажки и переключатели
Bootstrap 4 предоставляет классы .form-check, .form-check-label, .form-check-input и .form-check-inline для отображения флажков и переключателей.

Чтобы отобразить флажки или переключатели друг под другом, вложите каждый из них в элемент <div> с классом .form-check. Кроме того, добавьте .form-check-label к элементу <label> и .form-check-input к элементу <input>.

В одну строку
В Bootstrap 4 флажки и переключатели по умолчанию располагаются друг под другом. Вы можете отобразить их в одну строку, добавив .form-check-inline к внешнему <div>. Оставьте .form-check-input в элементе <input>.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<!-- Флажки -->
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="1">
<label class="form-check-label">1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="2">
<label class="form-check-label">2</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="3">
<label class="form-check-label">3</label>
</div>
<!-- Переключатели -->
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="1">
<label class="form-check-label">1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="2">
<label class="form-check-label">2</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="3">
<label class="form-check-label">3</label>
</div>
</div>