Bootstrap 5 Forms Forms | Wyjaśnione
W tym artykule otrzymujesz szczegółową wiedzę
- Jak utworzyć podstawowy formularz
- Rodzaje form bootstrap
- Składniki form bootstrap
Jak utworzyć formularz
Aby utworzyć formularz tag, w tym formularzu Użyj tag z klasą .Forma Aby uzyskać tytuł pola tekstowego, a następnie użyj Tag do tworzenia różnych pól formularzy jako wymagania. Pola formularza są określone przez Type = „*” atrybut z klasą .Kontrola formy Aby zastosować domyślne ustawienie formularza z Bootstrap.
- Tekst
- Hasło
- Data
- Datetime
- Plik
- Numer
- Radio
- Pole wyboru
- Składać
- Resetowanie
- Zakres
Zastąp jeden z nich *, aby utworzyć różne pola.
Kod
W ten sposób tworzona jest prosta forma.
Typy
Istnieją trzy rodzaje form w bootstrapie.
- Formy pionowe
- Formy poziome
- Formularze wbudowane
Formy pionowe
W tego rodzaju formularzach etykieta i pola tekstowe są ułożone w pionie.
Kod
W ten sposób tworzone są formy pionowe.
Formy poziome
W tego rodzaju formularzach etykieta i pola tekstowe są ułożone w stos.
Kod
W ten sposób tworzone są formy poziome.
Formularze wbudowane
W tego rodzaju formach każde pole formy jest ułożone poziomo z rzędu. Te formularze są przydatne tam, gdzie przestrzeń jest ograniczona lub gdzie chcesz, aby wszystko było kompaktowe.
Kod
W ten sposób tworzone są formularze wbudowane.
składniki
Poniżej znajdują się komponenty używane w formie. Te elementy działają tylko poprawnie w etykietka.
Pole tekstowe
Pole tekstowe to miejsce, w którym wpisujesz informacje, takie jak nazwa, hasło, e-mail, numer, adres.
Kod
Pole tekstowe są tworzone przy użyciu tag i ustaw to typ przypisują "tekst" z klasą .Kontrola formy. Używać .forma-control-lg klasa dla pola tekstowego o dużych rozmiarach, .Kontrola formy klasa dla domyślnego pola tekstowego i .formularz-kontrole-SM dla małego pola tekstowego. Jeszcze jedna rzecz, o której chcę tutaj wspomnieć, jest to, że do tworzenia używania tylko pola tekstowego odczytu .formularz-control-glaintext klasa z słowem kluczowym tylko czytać w etykietka.
Przyciski radiowe
Przyciski radiowe to zaokrąglone przyciski, które są używane tam, gdzie musisz wybrać z dwóch lub trzech opcji.
Kod
Radio-buttons są tworzone przy użyciu tag, a następnie ustaw jego typ przypisują "radio" z klasą .Wpisowanie formularza i daj tę samą wartość nazwa atrybut dla każdego przycisku opcji. Jeśli chcesz domyślnie aktywować dowolny przycisk, użyj sprawdzony Słowo kluczowe lub jeśli chcesz wyłączyć dowolny przycisk, użyj wyłączony Słowo kluczowe w znaczniku wejściowym.
Pole wyboru
Pole wyboru to małe pola, które są używane tam, gdzie musisz wybrać z wielu opcji.
Kod
Pole wyboru są tworzone za pomocą tag, a następnie ustaw jego typ przypisują „Pole wyboru” z klasą .Wpisowanie formularza. Jeśli chcesz domyślnie aktywować dowolny przycisk, użyj sprawdzony Słowo kluczowe lub jeśli chcesz wyłączyć dowolny przycisk, użyj wyłączony Słowo kluczowe w znaczniku wejściowym.
TextArea
TextArea to miejsce, w którym wpisujesz informacje opisowe, takie jak wiadomość, informacja zwrotna.
Kod
TextArea jest tworzona za pomocą tag z klasą .Kontrola formy.
Menu wyboru
Menu wyboru są używane tam, gdzie chcesz, aby użytkownik wybrał opcję z menu rozwijanego.
Menu wyboru jest tworzone przy użyciu tag z klasą .Kontrola formy i owijanie go tagi. Używać .forma-control-lg Klasa dla menu wyboru dużych rozmiarów, .Kontrola formy klasa dla domyślnego menu wyboru rozmiaru i .formularz-kontrole-SM Dla menu wyboru małego rozmiaru.
Pływające labilne
Pływające etykiety to połączenie symboli zastępczych i etykiet
Kod
Pływające etykiety powstają przez owijanie I Tag wewnątrz div z klasą .Formowanie Ważne jest to, że pływające etykiety działają prawidłowo, symbol zastępczy i etykiety są obowiązkowe.
Wniosek
Aby utworzyć znacznik, aby utworzyć znacznik formularza, aby utworzyć pole tekstowe, aby utworzyć użycie pola wyboru, aby utworzyć przyciski radiowe, aby utworzyć TEXTAREA Użyj znacznika i utworzyć menu wyboru Użyj znacznika i owinąć wokół znacznika. W powyższym artykule omawiany jest każda ważna rzecz w formie bootstrap.