<
div itemprop=»articleBody»>
Формы — важная и неизбежная часть любого веб-сайта. Bootstrap 4 использует стандартные элементы формы HTML5 для добавления различных элементов в форму. В этой статье давайте рассмотрим, как создавать различные стили форм в Bootstrap 5. Помните, что Bootstrap — это интерфейсный фреймворк. Он позволяет создавать только готовые компоненты с предварительно скомпилированными CSS и скриптами. Вы должны найти способ обрабатывать входные данные формы, полученные на вашем сервере.
В этом руководстве рассматриваются следующие темы:
Bootstrap 5 классов форм Форма синхронизации кухни Встроенные формы Использование группы форм Форма с использованием макета сетки Размер и добавление текста справки Другие варианты Проверка формы Форма — это более крупный компонент по сравнению со многими другими компонентами, такими как кнопки, значки и предупреждения. Он содержит следующие базовые классы CSS:
CSS-класс Описание Замечания .form-group Используется для группировки элементов управления формы .form-контроль Текстовые вводы Это может быть текст, пароль, дата, время и т. Д. .form-control-файл Файл загружен .form-check Флажок и переключатель .form-check-input Класс входного элемента Для флажка и переключателя .form-check-label Класс текстовой метки Для флажка и переключателя .form-control-lg Элементы формы большего размера .form-control-sm Меньшие элементы формы .form-Control-открытый текст Ввод обычного текста Используется для элементов ввода только для чтения
Формы могут содержать различные типы элементов, такие как ввод текста, пароль, одиночный выбор, множественный выбор, текстовое поле, загрузка файла, флажок, переключатели и кнопка отправки. Каждый элемент сгруппирован внутри
с классом «.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 и скрипты. Во всех приведенных ниже примерах мы указали только блок кода для компонента формы. Вы можете заменить блок кода между началом и концом формы следующими кодами для создания различных стилей форм.
Если вы заметили в приведенном выше примере, все элементы выровнены под меткой или легендой. Вы также можете сделать элементы выровненными встроенными, используя класс «.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>
Результат будет показан ниже, когда все три элемента выровнены по горизонтали в одну строку.
Вы можете легко сгруппировать похожие элементы в форме, используя класс «.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».
Группировка элементов в форме Если вам нужны разные столбцы и ширина для разных элементов формы, используйте сетку по умолчанию для выравнивания элементов по мере необходимости. Ниже приведен пример формы с разметкой сетки:
<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.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 (Индекс)
Навигация по записям Прокрутить вверх
Прокрутить вверх