Checkbox
# Checkbox

In informatica, un checkbox (casella di spunta, check box, tickbox, o tick box) è un controllo grafico con cui l'utente può effettuare selezioni multiple. Solitamente, i checkbox sono mostrati sullo schermo come dei quadrati che possono contenere spazio bianco (quando non sono selezionati), segno di spunta (quando sono selezionati) o un quadrato (indeterminato).

Adiacente al checkbox è solitamente mostrata una breve descrizione. Per invertire lo stato (selezionato/non selezionato) del checkbox è sufficiente cliccare sul riquadro o sulla descrizione.

## Descrizione

### Sintassi HTML

Nel linguaggio HTML il checkbox è un sottoelemento del form ed ha la seguente sintassi:

**<form>...</form>**


    Crea un modulo dove all'interno è contenuto (annidati) i seguenti sottoelementi tra cui il checkbox.

**<method=post action=url>**


    L'attributo method specifica con il suo valore che i dati saranno inviati al server col metodo Post dell'HTTP puntando, tramite l'attributo action, alla rispettiva pagina di elaborazione di URL specificato; questo elemento è tipicamente sempre presente.

**<input type=checkbox>**


    Crea una casella di spunta (checkbox).

### Stato indeterminato

Lo stato indeterminato è solitamente usato in checkbox che determinano la selezione/deselezione di un gruppo di checkbox (selezionando/deselezionando il checkbox 'padre' l'intero gruppo di checkbox viene selezionato/deselezionato), per indicare che il gruppo di checkbox è parzialmente selezionato. Le caselle possono quindi essere attivate contemporaneamente.

### Disabilitato

Come tutti i controlli, anche il checkbox può essere disabilitato per impedire all'utente di cambiarne lo stato; quando disabilitato tutto il controllo risulterà in grigio.

## Esempio

HTML:

CSS (con effetto transizione del checkbox quando viene cliccato dall'utente e cambia stato):

## Accessibilità

Esempio di codice con tag appositi WAI-ARIA per l'accessibilità:

### Supporto per tastiera

| Chiave | Funzione |
| - | - |
| Tab | Sposta lo stato attivo della tastiera su checkbox. |
| Space | Alterna gli stati selezionati e deselezionati della casella di controllo. |

### Attributi di ruolo, proprietà, stato e tabindex

| Ruolo | Attributo | Elemento | Utilizzo |
| - | - | - | - |
| | | h3 | Fornisce un'etichetta di raggruppamento per il gruppo di caselle di controllo. |
| group | | div | Identifica l'elemento div come contenitore group per le caselle di controllo. |
| | aria-labelledby | div | L'attributo aria-labelledby fa riferimento all'attributo id dell'elementoh3 per definire il nome accessibile per il gruppo di caselle di controllo. |
| checkbox | | div | Identifica l'elemento div come un filecheckbox. Il contenuto di testo figlio di questo divfornisce il nome accessibile della casella di controllo. |
| | tabindex="0" | div | Include la casella di controllo nella sequenza di schede della pagina. |
| | aria-checked="false" | div | Indica che non è selezionatacheckbox . I selettori di attributi CSS (ad esempio [aria-checked="false"]) vengono utilizzati per sincronizzare gli stati di visualizzazione con il valore dell'attributo aria-checked. Per supportare le impostazioni del sistema operativo e del browser ad alto contrasto, l'elemento pseudo CSS ::before e la proprietà content vengono utilizzati per generare gli indicatori visivi dello stato della casella di controllo. |
| | aria-checked="true" | div | Indica che è selezionato checkbox. I selettori di attributi CSS (ad esempio [aria-checked="true"]) vengono utilizzati per sincronizzare gli stati di visualizzazione con il valore dell'attributo aria-checked. Per supportare le impostazioni del sistema operativo e del browser ad alto contrasto, l'elemento CSS ::before e la proprietà content vengono utilizzati per generare gli indicatori visivi dello stato della casella di controllo. |

Esempio:

