Jak tworzyć formularze Bootstrap 5?
Zadowolony
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:
- Bootstrap 5 klas form
- Formularz synchronizacji kuchni
- Formularze wbudowane
- Korzystanie z grupy formularzy
- Formularz z wykorzystaniem układu siatki
- Zmiana rozmiaru i dodawanie tekstu pomocy
- Inne odmiany
- 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:
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.
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”.
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:
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.
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.
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