Bootstrap4 Формы
В этой главе мы узнаем, как создавать формы с помощью Bootstrap. Bootstrap позволяет создавать формы разных стилей с помощью некоторых простых тегов HTML и расширенных классов.
Элементы формы<input>, <textarea>, и<select>элементы
При использовании.form-controlв случае этого класса ширина устанавливается на 100%.
Макеты форм Bootstrap4
- Вертикальная форма (на всю ширину экрана): вертикальное направление
- Встроенная форма: горизонтальное направление
Bootstrap предоставляет два типа макетов форм:
Вертикальная форма
В следующем примере используются два поля ввода, один флажок и одна кнопка отправки для создания вертикальной формы:
Пример
<form action="">
<div class="form-group">
<label for="email">Адрес электронной почты:</label>
<input type="email" class="form-control" placeholder="Введите адрес электронной почты" id="email">
</div>
<div class="form-group">
<label for="pwd">Пароль:</label>
<input type="password" class="form-control" placeholder="Введите пароль" id="pwd">
</div>
<div class="form-group form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"> Запомнить меня
</label>
</div>
<button type="submit" class="btn btn-primary">Отправить</button>
</form>
Попробуйте сами »
Эффект отображения:
Встроенная форма
Все элементы встроенной формы выровнены по левому краю.
Примечание: когда ширина экрана меньше 576px, элементы располагаются вертикально; если ширина экрана больше или равна 576px, элементы формы будут отображаться на одной горизонтальной линии.
Для встроенных форм необходимо добавить<form>к элементу.form-inlineкласс.
В следующем примере используются два поля ввода, один флажок и одна кнопка отправки для создания встроенной формы:
Пример
<form class="form-inline">
<label for="email">Адрес электронной почты:</label>
<input type="email" class="form-control" id="email">
<label for="pwd">Пароль:</label>
<input type="password" class="form-control" id="pwd">
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"> Запомнить меня
</label>
</div>
<button type="submit" class="btn btn-primary">Отправить</button>
</form>
Попробуйте сами »
Эффект отображения:
Расположение элементов в приведенном выше примере выглядит очень компактно; вы можете использовать класс.mr-sm-2для установки правого отступа, использовать класс.mb-2для установки нижнего отступа:
Пример
<form class="form-inline" action="">
<label for="email" class="mr-sm-2">Адрес электронной почты:</label>
<input type="email" class="form-control mb-2 mr-sm-2" placeholder="Введите адрес электронной почты" id="email">
<label for="pwd" class="mr-sm-2">Пароль:</label>
<input type="password" class="form-control mb-2 mr-sm-2" placeholder="Введите пароль" id="pwd">
<div class="form-check mb-2 mr-sm-2">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"> Запомнить меня
</label>
</div>
<button type="submit" class="btn btn-primary mb-2">Отправить</button>
</form>
Попробуйте сами »
Эффект отображения:
Строка/сетка формы
Мы также можем использовать класс.colдля управления шириной и выравниванием элементов формы; нет необходимости использовать классы отступов..colФормы, управляемые этим классом, должны быть помещены в.rowcontainer.
Следующий пример отображает две колонки рядом:
Пример
<form>
<div class="row">
<div class="col">
<input type="text" class="form-control" id="email" placeholder="Введите email" name="email">
</div>
<div class="col">
<input type="password" class="form-control" placeholder="Введите пароль" 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="Введите email" name="email">
</div>
<div class="col">
<input type="password" class="form-control" placeholder="Введите пароль" name="pswd">
</div>
</div>
</form>
Попробуйте сами »
Проверка формы
Мы можем использовать различные классы валидации, чтобы настроить функциональность валидации форм.
.was-validatedили.needs-validationДобавьте его к элементу <form>, и поля ввода получат зеленую (валидную) или красную (невалидную) рамку, используемую для указания, нужно ли заполнять форму.
.valid-feedbackили.invalid-feedbackКласс используется, чтобы сообщить пользователям, какая информация отсутствует или что нужно заполнить перед отправкой формы.
Пример
Используйте класс .was-validated, чтобы отобразить содержимое, которое нужно заполнить перед отправкой формы:
<form action="" class="was-validated">
<div class="form-group">
<label for="uname">Имя пользователя:</label>
<input type="text" class="form-control" id="uname" placeholder="Введите имя пользователя" name="uname" required>
<div class="valid-feedback">Проверка прошла успешно!</div>
<div class="invalid-feedback">Пожалуйста, введите имя пользователя!</div>
</div>
<div class="form-group">
<label for="pwd">Пароль:</label>
<input type="password" class="form-control" id="pwd" placeholder="Введите пароль" name="pswd" required>
<div class="valid-feedback">Проверка прошла успешно!</div>
<div class="invalid-feedback">Пожалуйста, введите пароль!</div>
</div>
<div class="form-group form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="remember" required>Согласен с условиями<div class="valid-feedback">Проверка прошла успешно!</div>
<div class="invalid-feedback">Вы должны согласиться с условиями перед отправкой.</div>
</label>
</div>
<button type="submit" class="btn btn-primary">Отправить</button>
</форма>
Попробуйте сами »
Пример
Используйте .needs-validation; он проверит недостающее содержимое после отправки формы. Вам нужно добавить немного кода JavaScript, чтобы код работал правильно:
<form action="" class="needs-validation" novalidate>
<div class="form-group">
<label for="uname">Имя пользователя:</label>
<input type="text" class="form-control" id="uname" placeholder="Введите имя пользователя" name="uname" required>
<div class="valid-feedback">Проверка прошла успешно!</div>
<div class="invalid-feedback">Пожалуйста, введите имя пользователя!</div>
</div>
<div class="form-group">
<label for="pwd">Пароль:</label>
<input type="password" class="form-control" id="pwd" placeholder="Введите пароль" name="pswd" required>
<div class="valid-feedback">Проверка прошла успешно!</div>
<div class="invalid-feedback">Пожалуйста, введите пароль!</div>
</div>
<div class="form-group form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="remember" required>Согласен с условиями<div class="valid-feedback">Проверка прошла успешно!</div>
<div class="invalid-feedback">Вы должны согласиться с условиями перед отправкой.</div>
</label>
</div>
<button type="submit" class="btn btn-primary">Отправить</button>
</form>
<script>// Предотвратить отправку формы, если проверка не пройдена
(function() {
'use strict';
window.addEventListener('load', function() {
// Получить стили проверки формы
var forms = document.getElementsByClassName('needs-validation');
// Пройти в цикле и предотвратить отправку
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>
Попробуйте сами » Другие расширения