Как создавать формы в Bootstrap 5?

div itemprop=»articleBody»>

Формы — важная и неизбежная часть любого веб-сайта. Bootstrap 4 использует стандартные элементы формы HTML5 для добавления различных элементов в форму. В этой статье давайте рассмотрим, как создавать различные стили форм в Bootstrap 5. Помните, что Bootstrap — это интерфейсный фреймворк. Он позволяет создавать только готовые компоненты с предварительно скомпилированными CSS и скриптами. Вы должны найти способ обрабатывать входные данные формы, полученные на вашем сервере.

Учебник Bootstrap 5 Forms

В этом руководстве рассматриваются следующие темы:

Bootstrap 5 классов форм
Форма синхронизации кухни
Встроенные формы
Использование группы форм
Форма с использованием макета сетки
Размер и добавление текста справки
Другие варианты
Проверка формы

1. Классы CSS начальной формы

Форма — это более крупный компонент по сравнению со многими другими компонентами, такими как кнопки, значки и предупреждения. Он содержит следующие базовые классы CSS:

CSS-класс	Описание	Замечания
.form-group	Используется для группировки элементов управления формы
.form-контроль	Текстовые вводы	Это может быть текст, пароль, дата, время и т. Д.
.form-control-файл	Файл загружен
.form-check	Флажок и переключатель
.form-check-input	Класс входного элемента	Для флажка и переключателя
.form-check-label	Класс текстовой метки	Для флажка и переключателя
.form-control-lg	Элементы формы большего размера
.form-control-sm	Меньшие элементы формы
.form-Control-открытый текст	Ввод обычного текста	Используется для элементов ввода только для чтения

2. Форма Kitchen Sync с использованием различных элементов

Формы могут содержать различные типы элементов, такие как ввод текста, пароль, одиночный выбор, множественный выбор, текстовое поле, загрузка файла, флажок, переключатели и кнопка отправки. Каждый элемент сгруппирован внутри

с классом «.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&nbsp;-->
<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>

Проверка покажет результат ниже, если пользователь нажмет кнопку отправки, не заполнив обязательные поля.

Проверка формы с помощью пользовательского JavaScript

8.2. Проверка браузера

Вы можете просто удалить настраиваемый сценарий в приведенном выше коде формы, чтобы браузер мог остановить отправку формы. Проверка по умолчанию выполняется всеми современными браузерами, такими как Chrome, Safari и Firefox.

Вы увидите следующее сообщение об ошибке, если пользователь не заполнил обязательное поле и не отправил форму.

Проверка формы с настройками браузера по умолчанию

Заключение

Формы являются важным компонентом любой веб-страницы для сбора пользовательских данных. Bootstrap 4 позволяет создавать простые и сложные формы для отображения различных полей ввода с группировкой. Но для сложной проверки и обработки собранных данных на стороне сервера требуется язык сценариев, такой как PHP. Итак, вы должны интегрировать формы в PHP для получения и обработки пользовательских данных.

Изучите Bootstrap 5 (Индекс)