Как создать формы Bootstrap 5?
Содержание
Формы – важная и неизбежная часть любого веб-сайта. Bootstrap 4 использует стандартные элементы формы HTML5 для добавления различных элементов в форму. В этой статье давайте рассмотрим, как создавать различные стили форм в Bootstrap 5. Помните, что Bootstrap – это интерфейсный фреймворк. Он позволяет создавать только готовые компоненты с предварительно скомпилированными CSS и скриптами. Вы должны найти способ обрабатывать входные данные формы, полученные на вашем сервере.
Учебное пособие по Bootstrap 5 Forms
В этом руководстве рассматриваются следующие темы:
- Bootstrap 5 классов форм
- Форма синхронизации кухни
- Встроенные формы
- Использование группы форм
- Форма с использованием макета сетки
- Размер и добавление текста справки
- Другие варианты
- Проверка формы
1 CSS-классы Bootstrap Form
Форма – это более крупный компонент по сравнению со многими другими компонентами, такими как кнопки, значки и предупреждения. Он содержит следующие базовые классы CSS:
| CSS-класс | Описание | Замечания |
| .form-group | Используется для группировки элементов управления формы | |
| .form-контроль | Текстовые вводы | Это может быть текст, пароль, дата, время и т.д. |
| .form-control-файл | Файл загружен | |
| .form-check | Флажок и переключатель | |
| .form-check-input | Класс входного элемента | Для флажка и переключателя |
| .form-check-label | Класс текстовой метки | Для флажка и переключателя |
| .form-control-lg | Элементы формы большего размера | |
| .form-control-sm | Меньшие элементы формы | |
| .form-Control-открытый текст | Ввод обычного текста | Используется для элементов ввода только для чтения |
2 Кухонная форма синхронизации с использованием различных элементов
Формы могут содержать различные типы элементов, такие как ввод текста, пароль, одиночный выбор, множественный выбор, текстовое поле, загрузка файла, флажок, переключатели и кнопка отправки. Каждый элемент сгруппирован внутри
с классом «.form-group». Вы также можете использовать
чтобы сгруппировать похожие элементы, такие как переключатели и флажки, вместе. Давайте создадим форму синхронизации кухни с различными элементами, чтобы лучше понять.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta Tags for Bootstrap 5 -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
</head>
<body>
<!-- Start of Form -->
<form>
<!-- 1. Text Input -->
<div class="form-group">
<label for="username">Enter Username</label>
<input type="text" class="form-control" id="username" aria-describedby="Username" placeholder="Enter Username">
<small id="Username" class="form-text text-muted">Enter username to login.</small>
</div>
<!-- 2. Password -->
<div class="form-group">
<label for="password">Enter Password</label>
<input type="password" class="form-control" id="password" placeholder="Password">
</div>
<!-- 3. Single Select -->
<div class="form-group">
<label for="singleselect">Single Select from the Dropdown</label>
<select class="form-control" id="singleselect">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
<option>Option 5</option>
</select>
</div>
<!-- 4. Multiple Select -->
<div class="form-group">
<label for="multipleselect">Multiple Select from List</label>
<select multiple class="form-control" id="multipleselect">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
<option>Option 5</option>
</select>
</div>
<!-- 5. Textarea -->
<div class="form-group">
<label for="textarea">Textarea Input</label>
<textarea class="form-control" id="textarea" rows="5"></textarea>
</div>
<!-- 6. File Upload -->
<div class="form-group">
<label for="fileupload">Upload File</label>
<input type="file" class="form-control-file" id="fileupload" aria-describedby="fileupload">
<small id="fileupload" class="form-text text-muted">Choose the file from your computer and the browse screen depends on your operating system.</small>
</div>
<!-- 7. Radio Buttons -->
<fieldset class="form-group">
<legend>Radio Buttons</legend>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="radio" id="radio1" value="Option 1" checked>
Option 1</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="radio" id="radio2" value="Option 2">
Option 2 </label>
</div>
<div class="form-check disabled">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="radio" id="radio3" value="Option 3" disabled>
Option 3</label>
</div>
</fieldset>
<!-- 8. Checkbox -->
<fieldset class="form-group">
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input">
This is a checkbox 1.
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input">
This is a checkbox 2.
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input">
This is a checkbox 3.
</label>
</div>
</fieldset>
<!-- 9. Submit Button -->
<button type="submit" class="btn btn-success">Submit</button>
</form>
<!-- End of Form -->
<!-- Bootstrap 5 Scripts -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>Результат будет выглядеть в браузере, как показано ниже:
Элементы формы обозначены номерами, а соответствующий код отмечен разделом комментариев для понимания. Приведенная выше форма синхронизации кухни содержит полный код, включая Bootstrap CSS и скрипты. Во всех приведенных ниже примерах мы указали только блок кода для компонента формы. Вы можете заменить блок кода между началом и концом формы следующими кодами для создания различных стилей форм.
3 встроенные формы
Если вы заметили в приведенном выше примере, все элементы выровнены под меткой или легендой. Вы также можете сделать элементы выровненными встроенными, используя класс «.form-inline», как показано ниже:
<form class="form-inline">
<label class="sr-only" for="inlineforminput">Username</label>
<div class="input-group mb-2 mr-sm-2 mb-sm-0">
<div class="input-group-addon">@</div>
<input type="text" class="form-control" id="inlineforminput" placeholder="Username">
</div>
<label class="sr-only" for="inlineform">Password</label>
<input type="password" class="form-control mb-2 mr-sm-2 mb-sm-0" id="inlineform" placeholder="Enter Password">
<div class="form-check mb-2 mr-sm-2 mb-sm-0">
<label class="form-check-label">
<input class="form-check-input" type="checkbox">Remember
</label>
</div>
<button type="submit" class="btn btn-info">Login</button>
</form>Результат будет показан ниже, когда все три элемента выровнены по горизонтали в одну строку.
4 Группирование элементов формы с помощью группы форм
Вы можете легко сгруппировать похожие элементы в форме, используя класс «.form-group», как показано ниже:
<form>
<div class="form-group">
<label class="form-control-label" for="formGroup1">First Name</label>
<input type="text" class="form-control" id="formGroup1" placeholder="First Name">
</div>
<div class="form-group">
<label class="form-control-label" for="formGroup2">Last Name</label>
<input type="text" class="form-control" id="formGroup2" placeholder="Last Name">
</div>
</form>Группировка добавит нижнюю границу, как показано ниже, вы не увидите никаких других видимых изменений с классом «.form-group».
Группировка элементов в форме
5 Форма с сеткой
Если вам нужны разные столбцы и ширина для разных элементов формы, используйте сетку по умолчанию для выравнивания элементов по мере необходимости. Ниже приведен пример формы с разметкой сетки:
<form>
<div class="form-row">
<div class="form-group col-md-6">
<label for="Email" class="col-form-label">Email</label>
<input type="email" class="form-control" id="Email" placeholder="Email">
</div>
<div class="form-group col-md-6">
<label for="Password" class="col-form-label">Password</label>
<input type="password" class="form-control" id="Password" placeholder="Password">
</div>
</div>
<div class="form-group">
<label for="Address" class="col-form-label">Address</label>
<input type="text" class="form-control" id="Address" placeholder="Address First Line">
</div>
<div class="form-group">
<label for="Address1" class="col-form-label">Address 2</label>
<input type="text" class="form-control" id="Address1" placeholder="Address Second Line">
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="City" class="col-form-label">City</label>
<input type="text" class="form-control" id="City" placeholder="City">
</div>
<div class="form-group col-md-4">
<label for="State" class="col-form-label">State</label>
<select id="State" class="form-control">Choose</select>
</div>
<div class="form-group col-md-2">
<label for="Zip" class="col-form-label">Zip</label>
<input type="text" class="form-control" id="Zip">
</div>
</div>
<div class="form-group">
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"> Remember me
</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>Это приведет к следующему результату в браузере:
Форма Bootstrap 4 с использованием макета сетки
6 Изменение размера и добавление текста справки для полей
В приведенном выше примере мы использовали еще два дополнительных класса:
- «.Form-control-lg», чтобы увеличить размер элементов. Используйте класс «.form-control-sm», чтобы уменьшить его.
- Класс «.form-text» используется для добавления текста справки в приглушенном виде с помощью класса «.text-mute».
7 других вариаций
Ниже приведены некоторые из простых способов настройки формы Bootstrap 4:
- По умолчанию элементы формы занимают полную ширину, которую можно ограничить, поместив их внутри контейнера или используя дополнительный CSS.
- Также вы можете размещать формы внутри классов сетки, чтобы контролировать размер и отзывчивость формы.
- Также возможно отключение элементов с помощью класса «.disabled».
8 валидаций форм
Важной частью использования форм является проверка того, что пользователь вводит обязательные данные. Есть два способа проверить входные данные: использовать собственный сценарий для проверки или оставить часть проверки браузеру.
8.1. Проверка с помощью специального сценария
Ниже приведен код для создания формы с настраиваемым сценарием проверки. Скрипт проверит, что все обязательные поля формы были введены пользователем при нажатии кнопки отправки.
<form class="container" id="form-validation" novalidate>
<div class="row">
<div class="col-md-6 mb-3">
<label for="validation1">First name</label>
<input type="text" class="form-control" id="validation1" placeholder="First name" value="Jhon" required>
</div>
<div class="col-md-6 mb-3">
<label for="validation2">Last name</label>
<input type="text" class="form-control" id="validation2" placeholder="Last name" value="Doe" required>
</div>
</div>
<div class="row">
<div class="col-md-6 mb-3">
<label for="validation3">City</label>
<input type="text" class="form-control" id="validation3" placeholder="City" required>
<div class="invalid-feedback">
Enter city.
</div>
</div>
<div class="col-md-3 mb-3">
<label for="validation4">State</label>
<input type="text" class="form-control" id="validation4" placeholder="State" required>
<div class="invalid-feedback">
Enter state.
</div>
</div>
<div class="col-md-3 mb-3">
<label for="validation5">Zip</label>
<input type="text" class="form-control" id="validation5" placeholder="Zip" required>
<div class="invalid-feedback">
Enter zip code.
</div>
</div>
</div>
<button class="btn btn-secondary btn-md" type="submit">Submit</button>
</form>
<script>
// Custom JavaScript for Validation
(function() {
"use strict";
window.addEventListener("load", function() {
var form = document.getElementById("form-validation");
form.addEventListener("submit", function(event) {
if (form.checkValidity() == false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add("was-validated");
}, false);
}, false);
}());
</script>Проверка покажет результат ниже, если пользователь нажмет кнопку отправки, не заполнив обязательные поля.
8.2. Проверка браузера
Вы можете просто удалить настраиваемый сценарий в приведенном выше коде формы, чтобы браузер мог остановить отправку формы. Проверка по умолчанию выполняется всеми современными браузерами, такими как Chrome, Safari и Firefox.
Вы увидите следующее сообщение об ошибке, если пользователь не заполнил обязательное поле и не отправил форму.
Заключение
Формы являются важным компонентом любой веб-страницы для сбора пользовательских данных. Bootstrap 4 позволяет создавать простые и сложные формы для отображения различных полей ввода с группировкой. Но для сложной проверки и обработки собранных данных на стороне сервера требуется язык сценариев, такой как PHP. Итак, вы должны интегрировать формы в PHP для получения и обработки пользовательских данных.
Изучите Bootstrap 5 (индекс )
Источник записи: www.webnots.com