Bootstrap 5 forme classi | Spiegato
In questo articolo hai una conoscenza dettagliata su
- Come creare una forma di base
- Tipi di forme bootstrap
- Componenti delle forme bootstrap
Come creare una forma
Per creare un modulo Uso Tag, all'interno di questo modulo Tag Utilizzo Tag con la classe .label di forma Per il titolo di un campo di testo, quindi utilizzare Tag per la creazione di campi di modulo diversi come requisito. I campi del modulo sono specificati da type = "*" attributo con la classe .forma di controllo Per applicare l'impostazione del modulo predefinito da bootstrap.
- Testo
- Parola d'ordine
- Data
- Appuntamento
- File
- Numero
- Radio
- Casella di controllo
- Invia
- Ripristina
- Allineare
Sostituisci uno di questi con * per creare diversi campi.
Codice
Ecco come viene creata una forma semplice.
Tipi
Esistono tre tipi di forme in bootstrap.
- Forme verticali
- Forme orizzontali
- Forme in linea
Forme verticali
In questi tipi di forme etichetta e campi di testo sono impilati verticalmente.
Codice
Ecco come vengono create le forme verticali.
Forme orizzontali
In questi tipi di forme etichetta e campi di testo sono impilati orizzontalmente.
Codice
Ecco come vengono create le forme orizzontali.
Forme in linea
In questi tipi di forme ogni campo di forma è impilato orizzontale di fila. Queste forme sono utili dove lo spazio è limitato o dove vuoi rendere le cose compatte.
Codice
Ecco come vengono create i moduli in linea.
Componenti
Di seguito sono riportati i componenti utilizzati in una forma. Questi componenti funzionano correttamente solo all'interno di a etichetta.
Campi di testo
Il campo di testo è dove digiti alcune informazioni come nome, password, e-mail, numero, indirizzo.
Codice
I campi di testo vengono creati utilizzando tagga e imposta il suo tipo attribuire a "testo" con la classe .forma di controllo. Utilizzo .forma-controllo-lg classe per il campo di testo di grandi dimensioni, .forma di controllo classe per il campo di testo predefinito e .forma-controllo-sm per piccolo campo di testo. Un'altra cosa che voglio menzionare qui è che per la creazione di un uso solo per il campo di testo .forma-controllo-plaintext classe con una parola chiave sola lettura in un etichetta.
Tasti della radio
I pulsanti di opzione sono i pulsanti arrotondati che vengono utilizzati dove è necessario selezionare due o tre opzioni.
Codice
I radio-buttoni vengono creati utilizzando tag, quindi imposta il suo tipo attribuire a "Radio" con la classe .modulo-check-input e dare lo stesso valore a nome attributo a ogni pulsante di opzione. Se si desidera attivare qualsiasi pulsante per impostazione predefinita, usa controllato parola chiave o se si desidera disabilitare qualsiasi pulsante, quindi utilizzare Disabilitato Parola chiave nel tag di input.
Casella di controllo
Le caselle di controllo sono piccole scatole utilizzate in cui è necessario selezionare da più opzioni.
Codice
Le caselle di controllo vengono create utilizzando tag, quindi imposta il suo tipo attribuire a "Casella di controllo" con la classe .modulo-check-input. Se si desidera attivare qualsiasi pulsante per impostazione predefinita, usa controllato parola chiave o se si desidera disabilitare qualsiasi pulsante, quindi utilizzare Disabilitato Parola chiave nel tag di input.
Textrea
TextArea è dove si digitano informazioni descrittive come messaggio, feedback.
Codice
TextArea è creata usando il Tag con la classe .forma di controllo.
Menu di selezione
I menu di selezione vengono utilizzati dove si desidera che l'utente seleziona un'opzione da un menu a discesa.
Il menu di selezione viene creato utilizzando Tag con la classe .forma di controllo e avvolgendolo tag. Utilizzo .forma-controllo-lg Classe per menu di selezione di grandi dimensioni, .forma di controllo Classe per menu di selezione delle dimensioni predefinite e .forma-controllo-sm Per il menu di selezione delle piccole dimensioni.
Largonio
Le etichette galleggianti sono la combinazione di segnaposto ed etichette
Codice
Le etichette galleggianti sono create mediante avvolgimento E tagga all'interno di un div con la classe .flottante E la cosa importante è che le etichette galleggianti funzionino correttamente, segnaposto e etichetta è obbligatorio.
Conclusione
Per creare un tag di utilizzo del modulo, tag del modulo interno per creare un campo di testo Utilizzare, per creare una casella di controllo Utilizzo, per creare pulsanti di radio Utilizzare, per creare TEXTAREA Usa Tag e creare menu Selezione Usa Tag e avvolgerlo Tag. Nell'articolo di cui sopra ogni cosa importante sulla forma bootstrap è coperta.