Bootstrap 5 Formenklassen | Erklärt

Formulare werden verwendet, um Informationen über eine Person, ein Produkt oder ein Unternehmen zu sammeln und sind sehr wichtig für die Durchführung von Umfragen. Bootstrap -Formulare sind die Kombination aus Textfeldern, Textareas, Auswahlfeldern, Optionsfeldern und Kontrollkästchen. Das manuelle Anwenden von CSS auf Formulare ist ein langweiliger und zeitaufwändiger Prozess. Deshalb erleichtert Bootstrap es uns mit Hilfe vordefinierter Bootstrap -Klassen leicht.

In diesem Artikel erhalten Sie ein Detailwissen über

• So erstellen Sie eine grundlegende Form
• Arten von Bootstrap -Formularen
• Komponenten von Bootstrap -Formularen

So erstellen Sie eine Form

Um eine Formulierung zu erstellen Tag in diesem Formular -Tag verwenden Tag mit der Klasse .Formmarke Für den Titel eines Textfelds dann verwenden Sie dann Tag zum Erstellen verschiedener Formularfelder als Anforderung. Formfelder werden durch die angegeben Typ = "*" Attribut mit der Klasse .Formkontrolle So wenden Sie die Standardformulareinstellung aus Bootstrap an.

• Text
• Passwort
• Datum
• Terminzeit
• Datei
• Email
• Nummer
• Radio
• Kontrollkästchen
• Einreichen
• Zurücksetzen
• Bereich

Ersetzen Sie eine davon durch *, um verschiedene Felder zu erstellen.

Code

Vorname



Familienname, Nachname



Adresse



Stadt



Zustände

Punjab
Sindh
KPK
Belutschistan



Reißverschluss



Domizil hochladen



Geschlecht




Männlich



Weiblich



Andere





Einreichen

So wird eine einfache Form erstellt.

Typen

Es gibt drei Arten von Formen in Bootstrap.

• Vertikale Formen
• Horizontale Formen
• Inline -Formulare

Vertikale Formen

In solchen Formularen werden beschriften und Textfelder vertikal gestapelt.

Code

Email



Passwort








Mich erinnern

So werden vertikale Formen erstellt.

Horizontale Formen

In solchen Formularen werden beschriften und Textfelder horizontal gestapelt.

Code

Email







Passwort











Mich erinnern

So werden horizontale Formen erstellt.

Inline -Formulare

In solchen Formen ist jedes Formfeld horizontal in einer Reihe gestapelt. Diese Formen sind nützlich, wenn der Platz begrenzt ist oder wo Sie die Dinge kompakt machen möchten.

Code

So werden Inline -Formulare erstellt.

Komponenten

Im Folgenden finden Sie die Komponenten, die in einer Form verwendet werden. Diese Komponenten funktionieren nur richtig in a Schild.

Textfelder

In Textfeld geben Sie einige Informationen wie Name, Passwort, E-Mail, Nummer, Adresse ein.

Code

Textfelder werden durch Verwendung erstellt Tag und setzen Typ zuschreiben "Text" mit der Klasse .Formkontrolle. Verwenden .Form-Kontroll-LG Klasse für großgröße Textfeld, .Formkontrolle Klasse für Standardtextfeld und .Form-Kontroll-SM Für ein kleines Textfeld. Eine weitere Sache, die ich hier erwähnen möchte, ist, dass zum Erstellen einer Lesung nur Textfeld verwendet wird .Form-Kontroll-PlainText Klasse mit einem Schlüsselwort schreibgeschützt in einem (n Schild.

Radio Knöpfe

Optionsschaltflächen sind die abgerundeten Tasten, die verwendet werden, wo Sie aus zwei oder drei Optionen auswählen müssen.

Code

Männlich



Weiblich

Funk-Buttons werden durch Verwendung erstellt Tag und dann seine festlegen Typ zuschreiben "Radio" mit der Klasse .Form-Check-Input und den gleichen Wert geben Name Attribut für jeden Optionsfeld. Wenn Sie standardmäßig eine Schaltfläche aktivieren möchten, verwenden Sie überprüft Schlüsselwort oder wenn Sie eine Schaltfläche deaktivieren möchten, dann verwenden Sie dann Behinderte Schlüsselwort im Eingabe -Tag.

Kontrollkästchen

Kontrollkästchen sind kleine Kästchen, die verwendet werden, in denen Sie aus mehreren Optionen auswählen müssen.

Code

Männlich



Weiblich

Kontrollkästchen werden durch Verwendung erstellt Tag und dann seine festlegen Typ zuschreiben "Kontrollkästchen" mit der Klasse .Form-Check-Input. Wenn Sie standardmäßig eine Schaltfläche aktivieren möchten, verwenden Sie überprüft Schlüsselwort oder wenn Sie eine Schaltfläche deaktivieren möchten, dann verwenden Sie dann Behinderte Schlüsselwort im Eingabe -Tag.

Textbereich

In der Textea eingeben Sie beschreibende Informationen wie Nachricht, Feedback.

Code

Textarea wird mit der Verwendung der erstellt Tag mit der Klasse .Formkontrolle.

Auswahlmenü

Auswahlmenüs werden verwendet, bei der Ihr Benutzer eine Option aus einem Dropdown -Menü auswählt.

Stata

Punjab
Sindh
KPK
Belutschistan

Das Auswahlmenü wird durch Verwendung erstellt Tag mit der Klasse .Formkontrolle und es umwickeln Stichworte. Verwenden .Form-Kontroll-LG Klasse für große Auswahlmenü, .Formkontrolle Klasse für die Standardmenü der Auswahl von Standardgrößen und .Form-Kontroll-SM Für kleine Auswahlmenü.

Schwimmende Leitungen

Schwimmende Etiketten sind die Kombination von Platzhaltern und Etiketten

Code

Email





Passwort






Mich erinnern

Schwimmende Etiketten werden durch Wickeln erstellt Und Tag in einem DIV mit der Klasse .Formschwankung Und das Wichtigste ist, dass schwimmende Etiketten ordnungsgemäß funktionieren, Platzhalter und Etikett sind obligatorisch.

Abschluss

So erstellen Sie ein Formular. Verwenden Sie das Tag -Tag -Tag, um ein Textfeld zu erstellen, um ein Kontrollkästchen zu erstellen, Optionsschaltflächen zu erstellen, zum Erstellen von textarea -Verwendung und zum Erstellen von Auswahlmenü verwenden und das Tag einwickeln. Im obigen Artikel wird jedes Wichtigste über Bootstrap -Formular abgedeckt.