TechBlogSD - Все для WordPress и WEB разработки
WEB и WordPress инструкции, новости, обзоры тем и плагинов

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

417

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

Учебное пособие по Bootstrap 5 Forms

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

  1. Bootstrap 5 классов форм
  2. Форма синхронизации кухни
  3. Встроенные формы
  4. Использование группы форм
  5. Форма с использованием макета сетки
  6. Размер и добавление текста справки
  7. Другие варианты
  8. Проверка формы

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 5?

Элементы формы обозначены номерами, а соответствующий код отмечен разделом комментариев для понимания. Приведенная выше форма синхронизации кухни содержит полный код, включая 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>

Результат будет показан ниже, когда все три элемента выровнены по горизонтали в одну строку.

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

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».

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

Группировка элементов в форме

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 5?

Форма 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>

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

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

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

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

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

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

Заключение

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


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


Источник записи: www.webnots.com

Этот веб-сайт использует файлы cookie для улучшения вашего опыта. Мы предполагаем, что вы согласны с этим, но вы можете отказаться, если хотите. Принимаю Подробнее