Checkbox

Da Wikipedia, l'enciclopedia libera.
Jump to navigation Jump to search
Esempio di checkbox, con i tre possibili stati, selezionato, indeterminato, non selezionato

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.

Descrizione[modifica | modifica wikitesto]

Magnifying glass icon mgx2.svgLo stesso argomento in dettaglio: Form.

Sintassi HTML[modifica | modifica wikitesto]

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 indeterminato[modifica | modifica wikitesto]

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[modifica | modifica wikitesto]

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[modifica | modifica wikitesto]

Magnifying glass icon mgx2.svgLo stesso argomento in dettaglio: CSS e HTML5.

HTML:

Esempi di checkbox
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 | modifica wikitesto]

Magnifying glass icon mgx2.svgLo stesso argomento in dettaglio: Accessibilità (web), Accessibilità (design) e Wai-aria.

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

Supporto per tastiera[modifica | modifica wikitesto]

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[modifica | modifica wikitesto]

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:

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

Note[modifica | modifica wikitesto]

  1. ^ How To Create a Custom Checkbox and Radio Buttons, su www.w3schools.com. URL consultato il 22 febbraio 2021.
  2. ^ a b Cesare Lamanna, Checkbox CSS e radio button personalizzati e responsive, su HTML.it. URL consultato il 22 febbraio 2021.
  3. ^ - HTML: HyperText Markup Language | MDN, su developer.mozilla.org. URL consultato il 22 febbraio 2021.
  4. ^ ARIA: form role - Accessibility | MDN, su developer.mozilla.org. URL consultato il 16 febbraio 2021.
  5. ^ Checkbox Example (Two State) | WAI-ARIA Authoring Practices 1.1, su www.w3.org. URL consultato il 22 febbraio 2021.

Voci correlate[modifica | modifica wikitesto]

Altri progetti[modifica | modifica wikitesto]

Informatica Portale Informatica: accedi alle voci di Wikipedia che trattano di informatica