Bootstrap - Checkbox e Radio: Una Guida per Principianti

Ciao a tutti, futuri sviluppatori web! Oggi esploriamo il mondo emozionante dei controlli dei form di Bootstrap, in particolare le caselle di controllo (checkbox) e i pulsanti di opzione (radio button). Questi piccoli elementi interattivi possono sembrare semplici, ma sono incredibilmente potenti per raccogliere input dagli utenti. Allora, mettiamo le maniche su e cominciamo!

Introduzione ai Controlli dei Form Bootstrap

Prima di immergerci nei dettagli, prendiamo un momento per apprezzare perché stiamo imparando su Bootstrap. Immagina di costruire una casa. Potresti fare ogni mattonella da zero, o potresti usare componenti pre-fatti. Bootstrap è come un scrigno di componenti pre-fatti per il tuo sito web. Fa risparmiare tempo e garantisce coerenza. Ora, esploriamo il nostro primo componente!

Checkbox: La Meraviglia a Scelta Multipla

Casella di Controllo di Base

Le caselle di controllo sono come piccoli quadrati che gli utenti possono cliccare per selezionare più opzioni. Sono perfette quando vuoi che gli utenti scelgano più di un elemento da un elenco. Creiamo la nostra prima casella di controllo:

<div class="form-check">
<input class="form-check-input" type="checkbox" id="flexCheckDefault">
<label class="form-check-label" for="flexCheckDefault">
Casella di controllo predefinita
</label>
</div>

In questo esempio, stiamo usando le classi di Bootstrap per stilizzare la nostra casella di controllo. La classe form-check crea un wrapper, mentre form-check-input stila la casella di controllo stessa. L'attributo for nell'etichetta corrisponde all'id dell'input, collegandoli.

Stato Selezionato

A volte, vuoi che una casella di controllo sia pre-selezionata. È facile come aggiungere l'attributo checked:

<div class="form-check">
<input class="form-check-input" type="checkbox" id="flexCheckChecked" checked>
<label class="form-check-label" for="flexCheckChecked">
Casella di controllo selezionata
</label>
</div>

Stato Indeterminato

Ora, ecco un fatto divertente: le caselle di controllo possono avere un terzo stato chiamato "indeterminato". È come quando il tuo adolescente pulisce la sua stanza - non è completamente pulita, ma non è nemmeno del tutto disordinata. Non possiamo impostare questo stato in HTML, ma possiamo farlo con JavaScript:

<div class="form-check">
<input class="form-check-input" type="checkbox" id="flexCheckIndeterminate">
<label class="form-check-label" for="flexCheckIndeterminate">
Casella di controllo indeterminata
</label>
</div>

<script>
document.getElementById('flexCheckIndeterminate').indeterminate = true;
</script>

Casella di Controllo Disabilitata

A volte, potresti voler mostrare una casella di controllo ma non permettere agli utenti di interagire con essa. È qui che entra in gioco l'attributo disabled:

<div class="form-check">
<input class="form-check-input" type="checkbox" id="flexCheckDisabled" disabled>
<label class="form-check-label" for="flexCheckDisabled">
Casella di controllo disabilitata
</label>
</div>

Radio: I Campioni della Scelta Singola

Pulsanti di Opzione di Base

I pulsanti di opzione sono come i cugini delle caselle di controllo. Sembrano simili ma si comportano diversamente. Mentre le caselle di controllo permettono selezioni multiple, i pulsanti di opzione impongono una sola scelta all'interno di un gruppo. Creiamo un set di pulsanti di opzione:

<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
<label class="form-check-label" for="flexRadioDefault1">
Radio predefinito
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked>
<label class="form-check-label" for="flexRadioDefault2">
Radio predefinito selezionato
</label>
</div>

Notate come entrambi i pulsanti di opzione hanno lo stesso attributo name? Questo li raggruppa, assicurando che solo uno possa essere selezionato alla volta.

Pulsante di Opzione Disabilitato

Come le caselle di controllo, possiamo disabilitare i pulsanti di opzione:

<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDisabled" id="flexRadioDisabled" disabled>
<label class="form-check-label" for="flexRadioDisabled">
Radio disabilitato
</label>
</div>

Interruttori: Il Toglimento Moderno

Gli interruttori sono un'alternativa stilosa alle caselle di controllo. Sono perfetti per le impostazioni on/off. Creiamo uno:

<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
<label class="form-check-label" for="flexSwitchCheckDefault">Checkbox interruttore predefinito</label>
</div>

La classe form-switch trasforma la nostra casella di controllo in un interruttore elegante.

Opzioni di Layout

Predefinito (Stackato)

Per impostazione predefinita, le caselle di controllo e i pulsanti di opzione sono disposti verticalmente:

<div class="form-check">
<input class="form-check-input" type="checkbox" id="stackedCheck1">
<label class="form-check-label" for="stackedCheck1">Casella di controllo stackata 1</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="stackedCheck2">
<label class="form-check-label" for="stackedCheck2">Casella di controllo stackata 2</label>
</div>

Inline

Vuoi le tue opzioni una accanto all'altra? Usa la classe form-check-inline:

<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
<label class="form-check-label" for="inlineCheckbox1">1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
<label class="form-check-label" for="inlineCheckbox2">2</label>
</div>

Invertito

Vuoi l'etichetta prima della casella di controllo? Usa form-check-reverse:

<div class="form-check form-check-reverse">
<input class="form-check-input" type="checkbox" id="reverseCheck1">
<label class="form-check-label" for="reverseCheck1">Casella di controllo invertita</label>
</div>

Senza Etichette

A volte, potresti voler una casella di controllo o un pulsante di opzione senza etichetta:

<div>
<input class="form-check-input" type="checkbox" id="checkboxNoLabel" value="" aria-label="...">
</div>

Ricorda di usare aria-label per l'accessibilità!

Pulsanti Toglimento

I pulsanti togliimento sono un modo elegante di usare caselle di controllo e pulsanti di opzione. Sembrano come pulsanti normali ma si comportano come caselle di controllo o radio:

<input type="checkbox" class="btn-check" id="btn-check" autocomplete="off">
<label class="btn btn-primary" for="btn-check">Toglimento singolo</label>

Stili Contornati

Vuoi un aspetto più sottile? Usa gli stili contornati:

<input type="checkbox" class="btn-check" id="btn-check-outlined" autocomplete="off">
<label class="btn btn-outline-primary" for="btn-check-outlined">Toglimento singolo</label>

Conclusione

Complimenti! Hai appena fatto un grand tour dei checkbox e dei radio di Bootstrap. Questi piccoli componenti possono sembrare semplici, ma sono i mattoni dell'interattività dei form. Ricorda, la pratica fa la perfezione. Prova a combinare questi elementi in modi diversi per creare form coinvolgenti per i tuoi utenti.

Ecco una tabella di riepilogo dei metodi che abbiamo coperto:

Metodo	Descrizione
Casella di Controllo di Base	<input class="form-check-input" type="checkbox">
Casella di Controllo Selezionata	Aggiungi attributo checked
Casella di Controllo Indeterminata	Imposta con JavaScript
Casella di Controllo Disabilitata	Aggiungi attributo disabled
Pulsante di Opzione di Base	<input class="form-check-input" type="radio">
Pulsante di Opzione Disabilitato	Aggiungi attributo disabled
Interruttore	Usa la classe form-switch
Layout Inline	Usa la classe form-check-inline
Layout Invertito	Usa la classe form-check-reverse
Senza Etichette	Ometti etichetta, usa aria-label
Pulsanti Toglimento	Usa la classe btn-check
Stili Contornati	Usa le classi btn-outline-*

Continua a sperimentare, a imparare e, soprattutto, a divertirti a costruire form web straordinari!

Credits: Image by storyset