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

Як створити форми Bootstrap 5?

2

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

Підручник з Bootstrap 5 Forms

Цей підручник охоплює такі теми:

  1. Bootstrap 5 класів форм
  2. Форма синхронізації кухні
  3. Вбудовані форми
  4. Використання групи форм
  5. Форма за допомогою макета сітки
  6. Розмір і додавання тексту довідки
  7. Інші варіації
  8. Перевірка форм

1 Завантажувальна форма CSS Класи

Форма є більшим компонентом у порівнянні з багатьма іншими компонентами, такими як кнопки, значки та сповіщення. Він містить такі основні класи CSS:

Клас CSS Опис Зауваження
.form-group Використовується для групування елементів керування формою  
.form-control Введення тексту Це може бути текст, пароль, дата, час тощо.
.form-control-файл Завантаження файлу  
.form-check Прапорець і перемикач  
.form-check-input Клас вхідних елементів  Для прапорця та перемикача
.form-check-label Клас текстової мітки Для прапорця та перемикача
.form-control-lg Більші елементи форми  
.form-control-sm Менші елементи форми  
.form-control-відкритий текст Звичайний спосіб введення тексту Використовується для елементів введення, призначених лише для читання

2 Форма синхронізації кухні з використанням різних елементів

Форми можуть містити різні типи елементів, такі як введення тексту, пароль, одноразовий вибір, множинне виділення, текстове поле, завантаження файлів, прапорець, перемикачі та кнопка надсилання. Кожен елемент згруповано всередині a

з класом .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-muted”.

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 (індекс )


Джерело запису: webnots.com
Залиште відповідь

Цей веб -сайт використовує файли cookie, щоб покращити ваш досвід. Ми припустимо, що з цим все гаразд, але ви можете відмовитися, якщо захочете. Прийняти Читати далі