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)^[1]^[2].

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

DescrizioneModifica

Sintassi HTMLModifica

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

<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 indeterminatoModifica

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.

DisabilitatoModifica

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.

EsempioModifica

HTML:

Esempi di checkbox formattati con CSS

<label class="container">1
  <input type="checkbox" checked="checked">
  <span class="checkmark"></span>
</label>

<label class="container">2
  <input type="checkbox">
  <span class="checkmark"></span>
</label>

<label class="container">3
  <input type="checkbox">
  <span class="checkmark"></span>
</label>

<label class="container">4
  <input type="checkbox">
  <span class="checkmark"></span>
</label>

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

.container {
    max-width: 640px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 13px;
}
ul.ks-cboxtags {
    list-style: none;
    padding: 20px;
}
ul.ks-cboxtags li{
  display: inline;
}

ul.ks-cboxtags li label {
    padding: 8px 12px;
    cursor: pointer;
}
ul.ks-cboxtags li label::before {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 12px;
    padding: 2px 6px 2px 2px;
    content: "\f067";
    transition: transform .3s ease-in-out;
}

ul.ks-cboxtags li input[type="checkbox"]:checked + label::before {
    content: "\f00c";
    transform: rotate(-360deg);
    transition: transform .3s ease-in-out;

}
ul.ks-cboxtags li input[type="checkbox"] {
  position: absolute;
  opacity: 0;
}
ul.ks-cboxtags li input[type="checkbox"]:focus + label {
  border: 2px solid #e9a1ff;
}

AccessibilitàModifica

Esempio di codice con tag appositi WAI-ARIA per l'accessibilità^[4]^[5]:

Supporto per tastieraModifica

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 tabindexModifica

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'elemento`h3` per definire il nome accessibile per il gruppo di caselle di controllo.
`checkbox`		`div`	Identifica l'elemento `div` come un file`checkbox`. Il contenuto di testo figlio di questo `div`fornisce 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 è selezionata`checkbox` . 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:

<h3 id="id-group-label">
Condimenti per Sandwich
</h3>
<div role="group" aria-labelledby="id-group-label">
  <ul class="checkboxes">
    <li>
      <div role="checkbox"
           aria-checked="false"
           tabindex="0">
      Lattuga
      </div>
    </li>
    <li>
      <div role="checkbox"
           aria-checked="true"
           tabindex="0">
Pomodoro      </div>
    </li>