Bootstrap 4 Формы
Настройки Bootstrap 4 по умолчанию
Элементы управления формы автоматически получают некоторые глобальные стили с помощью Bootstrap:
Все текстовые элементы <input>, <textarea>и
<select>с классом .form-controlимеют ширину 100%.
Bootstrap 4 Макеты форм
Bootstrap предоставляет два типа макетов форм:
- Сложенная (во всю ширину) форма
- Встроенная форма
Bootstrap 4 Сложенная форма
В следующем примере создается составная форма с двумя полями ввода, одним флажком и кнопкой отправки.
Добавьте элемент-оболочку с .form-group, вокруг каждого элемента управления формы, чтобы обеспечить правильные поля:
Пример
<form action="/action_page.php">
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control"
placeholder="Enter email" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control"
placeholder="Enter password" id="pwd">
</div>
<div class="form-group form-check">
<label
class="form-check-label">
<input
class="form-check-input" type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
Встроенная форма Bootstrap
Во встроенной форме все элементы встроены и выровнены по левому краю.
Примечание. Это относится только к формам в области просмотра шириной не менее 576 пикселей. На экранах меньше 576 пикселей он будет располагаться горизонтально.
Дополнительное правило для встроенной формы:
- Добавить класс
.form-inlineк<form>элементу
В следующем примере создается встроенная форма с двумя полями ввода, одним флажком и одной кнопкой отправки:
Пример
<form class="form-inline" action="/action_page.php">
<label for="email">Email address:</label>
<input type="email" class="form-control"
placeholder="Enter email" id="email">
<label for="pwd">Password:</label>
<input type="password" class="form-control"
placeholder="Enter password" id="pwd">
<div class="form-check">
<label
class="form-check-label">
<input
class="form-check-input" type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
Встроенная форма с утилитами
Встроенная форма выше кажется «сжатой» и будет выглядеть намного лучше с утилитами расстановки Bootstrap. В следующем примере к каждому входу на всех устройствах (маленьких и верхних) добавляется правое поле ( .mr-sm-2). И нижний класс поля ( .mb-2) используется для стилизации поля ввода, когда оно ломается (переходит от горизонтального к вертикальному из-за нехватки места/ширины):
Пример
<form class="form-inline" action="/action_page.php">
<label for="email"
class="mr-sm-2">Email address:</label>
<input type="email" class="form-control
mb-2 mr-sm-2" placeholder="Enter email" id="email">
<label for="pwd"
class="mr-sm-2">Password:</label>
<input type="password" class="form-control
mb-2 mr-sm-2" placeholder="Enter password" id="pwd">
<div class="form-check mb-2 mr-sm-2">
<label
class="form-check-label">
<input
class="form-check-input" type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-primary
mb-2">Submit</button>
</form>
Вы узнаете больше о интервалах и других «вспомогательных» классах в нашей главе «Утилиты Bootstrap 4 » .
Строка формы/сетка
Вы также можете использовать столбцы ( .col) для управления шириной и выравниванием входных данных формы, не используя утилиты интервалов. Только не забудьте положить их в .rowконтейнер.
В приведенном ниже примере мы используем два столбца, которые будут отображаться рядом. Вы узнаете гораздо больше о столбцах и строках в главе Bootstrap Grids .
Пример
<form>
<div class="row">
<div class="col">
<input type="text" class="form-control" id="email" placeholder="Enter email"
name="email">
</div>
<div
class="col">
<input type="password"
class="form-control" placeholder="Enter password" name="pswd">
</div>
</div>
</form>
Если вы хотите меньше полей сетки (переопределить желоба столбцов по умолчанию), используйте .form-rowвместо .row:
Пример
<form>
<div class="form-row">
<div class="col">
<input type="text" class="form-control" id="email" placeholder="Enter email"
name="email">
</div>
<div
class="col">
<input type="password"
class="form-control" placeholder="Enter password" name="pswd">
</div>
</div>
</form>
Проверка формы
Вы можете использовать различные классы проверки, чтобы предоставить пользователям ценную обратную связь. Добавьте .was-validatedили .needs-validationк <form>элементу, в зависимости от того, хотите ли вы предоставить обратную связь о проверке до или после отправки формы. Поля ввода будут иметь зеленую (действительную) или красную (недействительную) границу, чтобы указать, чего не хватает в форме. Вы также можете добавить
.valid-feedbackили .invalid-feedbackсообщение, чтобы явно указать пользователю, что отсутствует или что необходимо сделать перед отправкой формы.
Пример
В этом примере мы используем, .was-validatedчтобы указать, чего не хватает перед отправкой формы:
<form action="/action_page.php" class="was-validated">
<div class="form-group">
<label
for="uname">Username:</label>
<input type="text"
class="form-control" id="uname" placeholder="Enter username" name="uname"
required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
<div class="form-group">
<label
for="pwd">Password:</label>
<input type="password"
class="form-control" id="pwd" placeholder="Enter password" name="pswd"
required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
<div class="form-group form-check">
<label class="form-check-label">
<input
class="form-check-input" type="checkbox" name="remember" required> I agree on
blabla.
<div
class="valid-feedback">Valid.</div>
<div
class="invalid-feedback">Check this checkbox to continue.</div>
</label>
</div>
<button type="submit" class="btn
btn-primary">Submit</button>
</form>
Пример
В этом примере мы используем .needs-validation, который добавит эффект проверки ПОСЛЕ отправки формы (если чего-то не хватает). Обратите внимание, что вам также придется добавить код jQuery, чтобы этот пример работал правильно:
<form action="/action_page.php" class="needs-validation"
novalidate>
<div class="form-group">
<label
for="uname">Username:</label>
<input type="text"
class="form-control" id="uname" placeholder="Enter username" name="uname"
required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
<div class="form-group">
<label
for="pwd">Password:</label>
<input type="password"
class="form-control" id="pwd" placeholder="Enter password" name="pswd"
required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
<div class="form-group form-check">
<label class="form-check-label">
<input
class="form-check-input" type="checkbox" name="remember" required> I agree on
blabla.
<div
class="valid-feedback">Valid.</div>
<div
class="invalid-feedback">Check this checkbox to continue.</div>
</label>
</div>
<button type="submit" class="btn
btn-primary">Submit</button>
</form>
<script>
//
Disable form submissions if there are invalid fields
(function() {
'use strict';
window.addEventListener('load', function() {
// Get the
forms we want to add validation styles to
var forms =
document.getElementsByClassName('needs-validation');
//
Loop over them and prevent submission
var validation =
Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
},
false);
});
}, false);
})();
</script>