Формы Bootstrap 4
С помощью Bootstrap 4 вы можете создавать красивые адаптивные формы. Bootstrap 4 предоставляет стили для оформления большинства элементов форм. В частности, в Bootstrap 4 стили display: block и width: 100% применяются к большинству элементов форм. Это приводит к тому, что все элементы располагаются по вертикали (расположение элементов можно изменить).
Основная форма
Используйте класс .form-control для тегов <input> , <textarea> , и <select> для применения стиля width: 100%.
1 2 3 4 5 6 7 8 9 10 11 | <form> <fieldset class="form-group"> <label for="first_name">First Name</label> <input type="text" class="form-control" id="first_name" name="first_name"> </fieldset> <fieldset class="form-group"> <label for="last_name">Last Name</label> <input type="text" class="form-control" id="last_name" name="last_name"> </fieldset> <button type="submit" class="btn btn-default">Submit</button> </form> |
Inline формы
Используйте класс .form-inline для отрисовки элементов формы как inline blocks и с выравниванием по левому краю.
1 2 3 4 5 6 7 8 9 10 11 | <form class="form-inline"> <div class="form-group"> <label for="first_name">First Name</label> <input type="text" class="form-control" id="first_name" name="first_name"> </div> <div class="form-group"> <label for="last_name">Last Name</label> <input type="text" class="form-control" id="last_name" name="last_name"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> |
Скрытые элементы label
Тег label в большинстве случаев должен присутствовать в форме, иначе могут возникнуть проблемы с ее восприятием. Скрыть label можно с помощью класса .sr-only. В примере ниже мы использовали класс .sr-only, а также добавили атрибут placeholder, для описания полей формы.
1 2 3 4 5 6 7 8 9 10 11 | <form> <div class="form-group"> <label for="first_name" class="sr-only">Фамилия</label> <input type="text" class="form-control" id="first_name" name="first_name" placeholder="Фамилия"> </div> <div class="form-group"> <label for="last_name" class="sr-only">Имя</label> <input type="text" class="form-control" id="last_name" name="last_name" placeholder="Имя"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> |
Управление размером форм
Вы можете использовать классы .form-control-lg или .form-control-sm для того, чтобы увеличить или уменьшить размер полей ввода формы.
Различие Bootstrap 4 и Bootstrap 3
Bootstrap 4 использует другие классы для управления размером форм.
- Bootstrap 4 — .form-control-lg и .form-control-sm.
- Bootstrap 3 — .input-lg и .input-sm.
Подсказки
В Bootstrap 4 есть класс .text-muted, который может быть использован для отображения подсказок. Он может применен к любому inline HTML элементу, например <p> , <span> или <small>. Your account ID is located at the top of your invoice.
1 2 3 | <label for="accountId">Account Id</label> <input type="text" id="accountId" class="form-control" aria-describedby="helpAccountId"> <span id="helpAccountId" class="text-muted">Your account ID is located at the top of your invoice.</span> |
В Bootstrap 3 этот класс назывался .help-block.
Стили валидации форм
Bootstrap 4 включает в себя стили для валидации элементов формы. Они могут быть использованы отображения одного из трех состояний (успех, ошибка или предупреждение). Для этого есть три класса: .has-success, .has-warning, и .has-error.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <div class="form-group has-success"> <label class="control-label" for="username">Success</label> <input type="text" class="form-control form-control-success" id="username" aria-describedby="usernameStatus"> </div> <div class="form-group has-warning"> <label class="control-label" for="password">Warning</label> <input type="password" class="form-control form-control-warning" id="password" aria-describedby="passwordStatus"> </div> <div class="form-group has-error"> <label class="control-label" for="phone">Error</label> <input type="tel" class="form-control form-control-error" id="phone" aria-describedby="phoneStatus"> </div> |