TechBlogSD - Wszystko do WordPressa i tworzenia stron internetowych
Instrukcje WEB i WordPress, nowości, recenzje motywów i wtyczek

Jak tworzyć formularze Bootstrap 5?

135

Formularze są ważną i nieuniknioną częścią każdej witryny. Bootstrap 4 wykorzystuje standardowe elementy formularzy HTML5 do dodawania różnych elementów w formularzu. W tym artykule przyjrzyjmy się, jak tworzyć różne style formularzy w Bootstrap 5. Pamiętaj, Bootstrap to framework frontendowy. Pozwala tylko na tworzenie gotowych komponentów z prekompilowanymi CSS i skryptami. Powinieneś znaleźć sposób na przetworzenie danych wejściowych formularzy otrzymanych na twoim serwerze.

Samouczek dotyczący formularzy Bootstrap 5

Ten samouczek obejmuje następujące tematy:

  1. Bootstrap 5 klas form
  2. Formularz synchronizacji kuchni
  3. Formularze wbudowane
  4. Korzystanie z grupy formularzy
  5. Formularz z wykorzystaniem układu siatki
  6. Zmiana rozmiaru i dodawanie tekstu pomocy
  7. Inne odmiany
  8. Walidacje formularzy

1 Klasy CSS w formularzu Bootstrap

Formularz jest większym komponentem w porównaniu do wielu innych komponentów, takich jak przycisk, odznaki i alerty. Zawiera następujące podstawowe klasy CSS:

Klasa CSS Opis Uwagi
.form-grupa Służy do grupowania kontrolek formularza  
.form-kontrola Wprowadzanie tekstu Może to być tekst, hasło, data, godzina itp.
.plik-kontrolny-formularza Udostępnianie pliku  
.sprawdzanie formularza Pole wyboru i przycisk opcji  
.form-check-input Klasa elementu wejściowego  Dla pola wyboru i przycisku radiowego
.formularz-czek-etykieta Klasa etykiety tekstowej Dla pola wyboru i przycisku radiowego
.form-control-lg Większe elementy formy  
.form-kontrola-sm Mniejsze elementy formy  
.form-kontrola-zwykły tekst Wprowadzanie zwykłego tekstu Używany do elementów wejściowych tylko do odczytu

2 Formularz synchronizacji kuchennej przy użyciu różnych elementów

Formularze mogą zawierać różne typy elementów, takie jak wprowadzanie tekstu, hasło, wybór pojedynczy, wybór wielokrotny, obszar tekstowy, przesyłanie pliku, pole wyboru, przyciski opcji i przycisk przesyłania. Każdy element jest zgrupowany wewnątrz a

z klasą „.form-group". Możesz również użyć

do grupowania podobnych elementów, takich jak przyciski radiowe i pola wyboru. Stwórzmy formularz synchronizacji kuchni z różnymi elementami, aby lepiej zrozumieć.

<!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>

Wynik będzie wyglądał jak poniżej w przeglądarce:

Jak tworzyć formularze Bootstrap 5?

Elementy formularza są identyfikowane za pomocą liczb, a odpowiadający im kod jest oznaczony sekcją komentarzy w celu zrozumienia. Powyższy formularz synchronizacji kuchennej zawiera kompletny kod, w tym Bootstrap CSS i skrypty. We wszystkich poniższych przykładach podaliśmy tylko blok kodu dla komponentu formularza. Blok kodu między początkiem a końcem formularza można zastąpić następującymi kodami, aby utworzyć różne style formularzy.

3 formularze wbudowane

Jeśli zauważyłeś w powyższym przykładzie, wszystkie elementy są wyrównane poniżej etykiety lub legendy. Możesz także ustawić elementy wyrównane w linii za pomocą klasy „.form-inline”, jak poniżej:

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

A wynik zostanie pokazany jak poniżej, ze wszystkimi trzema elementami wyrównanymi poziomo w jednym rzędzie.

Jak tworzyć formularze Bootstrap 5?

4 Grupowanie elementów formularza za pomocą grupy formularzy

Możesz łatwo pogrupować podobne elementy w formularzu za pomocą klasy „.form-group”, jak poniżej:

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

Grupowanie doda dół obramowania, jak pokazano poniżej, nie zobaczysz żadnych innych widocznych zmian w klasie „.form-group”.

Jak tworzyć formularze Bootstrap 5?

Grupowanie elementów w formularzu

5 Formularz z systemem siatki

Jeśli potrzebujesz różnych kolumn i szerokości dla różnych elementów formularza, użyj domyślnego systemu siatki, aby odpowiednio wyrównać elementy. Poniżej przykład formularza z układem siatki:

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

W przeglądarce wygeneruje następujący wynik:

Jak tworzyć formularze Bootstrap 5?

Formularz Bootstrap 4 przy użyciu układu siatki

6 Zmiana rozmiaru i dodawanie tekstu pomocy dla pól

W powyższym przykładzie zastosowaliśmy jeszcze dwie dodatkowe klasy:

  • „.form-control-lg”, aby powiększyć elementy. Użyj klasy „.form-control-sm”, aby ją zmniejszyć.
  • Klasa „.form-text” służy do dodawania tekstu pomocy w wyciszonej formie za pomocą klasy „.text-muted”.

7 innych odmian

Poniżej przedstawiamy kilka prostych sposobów dostosowania formularza Bootstrap 4:

  • Domyślnie elementy formularza zajmują pełną szerokość, którą można ograniczyć umieszczając ją w kontenerze lub używając dodatkowego CSS.
  • Możesz również umieścić formularze wewnątrz klas siatki, aby kontrolować rozmiar i czas reakcji formularza.
  • Możliwe jest również posiadanie wyłączonych elementów za pomocą klasy „.disabled”.

8 Walidacji formularzy

Ważną częścią korzystania z formularzy jest walidacja obowiązkowych danych wejściowych wprowadzonych przez użytkownika. Istnieją dwa sposoby walidacji danych wejściowych – użyj niestandardowego skryptu do walidacji lub pozostaw część walidacji w przeglądarce.

8.1. Walidacja za pomocą skryptu niestandardowego

Poniżej znajduje się kod do tworzenia formularza z niestandardowym skryptem walidacji. Skrypt sprawdzi, czy wszystkie wymagane pola formularza zostały wprowadzone przez użytkownika po kliknięciu przycisku przesyłania.

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

Walidacja pokaże poniższy wynik, jeśli użytkownik kliknie przycisk Prześlij bez wypełniania obowiązkowych pól.

Jak tworzyć formularze Bootstrap 5?

8.2. Walidacja przeglądarki

Możesz po prostu usunąć niestandardowy skrypt w powyższym kodzie formularza, aby umożliwić przeglądarce zatrzymanie przesyłania formularza. Domyślna walidacja jest wykonywana przez wszystkie nowoczesne przeglądarki, takie jak Chrome, Safari i Firefox.

Pojawi się następujący komunikat o błędzie, gdy użytkownik nie wypełnił wymaganego pola i przesłał formularz.

Jak tworzyć formularze Bootstrap 5?

Zawijanie

Formularze są ważnym elementem na każdej stronie internetowej do zbierania danych wejściowych użytkownika. Bootstrap 4 pozwala tworzyć proste do złożonych formularzy, aby pokazać różne pola wejściowe z grupowaniem. Jednak złożona walidacja i przetwarzanie zebranych danych po stronie serwera wymaga języka skryptowego takiego jak PHP. Dlatego powinieneś zintegrować formularze w PHP, aby uzyskać i przetworzyć dane użytkownika.


Dowiedz się o Bootstrapie 5 (Indeks )


Źródło nagrywania: www.webnots.com
Leave A Reply

Ta strona korzysta z plików cookie, aby poprawić Twoje wrażenia. Zakładamy, że nie masz nic przeciwko, ale możesz zrezygnować, jeśli chcesz. Akceptuję Więcej szczegółów