Формы в 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>

Bootstrap 4 против Bootstrap 3

Bootstrap 3 для отображения флажков и переключателей использует .radio, .radio-inline, .checkbox или .checkbox-inline. Bootstrap 4 использует .form-check, .form-check-label, .form-check-input и .form-check-inline.

Автор и редакторы

Автор: Йен Диксон
Последнее изменение: 12.03.2020
Редакторы: Влад Мержевич
Как научиться разрабатывать сайты