Bootstrap semplifica la creazione di moduli attraenti e adattabili offrendo una raccolta di classi e componenti per il controllo dei moduli. Queste classi di controllo possono essere utilizzate per stilizzare campi di input, caselle di controllo, pulsanti di opzione, menu a discesa, selettori e aree di testo in modo coerente su tutto il sito web.

Classi comuni di controllo dei moduli

classe form-control

Questa classe viene utilizzata per stilizzare vari elementi del modulo, inclusi i campi di input, le aree di testo e i menu a discesa select. Quando applicata, garantisce che gli elementi del modulo siano reattivi e visivamente coerenti su diversi dispositivi e dimensioni dello schermo.

Caratteristiche principali della classe form-control

• Design reattivo: Gli elementi del modulo stilizzati con form-control si adattano automaticamente in larghezza per riempire lo spazio disponibile all'interno del loro contenitore;
• Stile uniforme: Applicando form-control, gli elementi del modulo ricevono uno stile coerente, inclusi bordi, spaziatura interna e proprietà dei caratteri;
• Stati di focus e hover: form-control fornisce un feedback visivo agli utenti modificando l'aspetto degli elementi del modulo quando vengono passati sopra con il mouse o messi a fuoco.

classi form-check

• form-check: Questa classe stilizza gli input di tipo checkbox e radio button per visualizzarli in linea e applicare uno stile coerente;
• form-check-input: Applicata agli elementi di input checkbox e radio button all'interno di un contenitore form-check. Questa classe garantisce uno stile coerente degli elementi di input;
• form-check-label: Utilizzata per stilizzare l'etichetta associata agli input checkbox e radio button. Garantisce uno stile coerente delle etichette e aiuta a mantenere l'allineamento con i relativi elementi di input.

Sistema a griglia per il layout dei moduli

Il sistema a griglia di Bootstrap offre uno strumento potente per organizzare gli elementi dei moduli in layout a più colonne. Sfruttando le classi della griglia come col-md-6, col-lg-4 e altre, gli sviluppatori possono disporre gli elementi dei moduli in layout reattivi e flessibili che si adattano perfettamente a diverse dimensioni di schermo e dispositivi.

Caratteristiche principali:

• Colonne reattive: Le classi della griglia consentono agli sviluppatori di definire la larghezza degli elementi del modulo in base ai diversi breakpoint. Ad esempio, col-md-6 specifica che la colonna deve occupare metà della larghezza del contenitore su schermi di dimensioni medie e superiori. Allo stesso modo, col-lg-4 indica una larghezza di un terzo su schermi grandi;
• Flessibilità: È possibile combinare le classi della griglia per creare layout di moduli complessi;
• Ottimizzato per dispositivi mobili: Il sistema a griglia di Bootstrap è progettato con un approccio mobile-first, garantendo che i layout dei moduli siano ottimali anche su schermi di piccole dimensioni di default.

Risultato del comportamento della griglia del form reattivo

Stili di validazione dei form

Gli stili di validazione dei form forniscono un feedback visivo agli utenti sulla validità dei loro input. Questi stili includono indicatori per stati di successo, errore e avviso, facilitando la comprensione da parte degli utenti se il loro input soddisfa i criteri richiesti.

Nell'esempio fornito:

• La classe needs-validation viene aggiunta per abilitare gli stili di validazione di Bootstrap;
• L'attributo novalidate viene utilizzato per disabilitare la validazione nativa del browser;
• Il campo di input per l'indirizzo email ha l'attributo required, rendendolo obbligatorio;
• Le classi valid-feedback e invalid-feedback vengono utilizzate per fornire messaggi di feedback rispettivamente per input validi e non validi;
• Inoltre, viene utilizzato JavaScript per impedire l'invio del modulo se sono presenti campi non validi e per applicare la classe was-validated al modulo.