HTML Casella di controllo e pulsanti di opzione

Esempio

Panoramica

Caselle di controllo e pulsanti radio sono scritti con il tag HTML <input> e il loro comportamento è definito nelle specifiche HTML .

La casella di controllo o il pulsante di opzione più semplice è un elemento <input> con un attributo type di checkbox o radio , rispettivamente:

<input type="checkbox">
<input type="radio">

Un singolo elemento di casella di controllo stand-alone viene utilizzato per una singola opzione binaria come una domanda sì o no. Le caselle di controllo sono indipendenti, il che significa che l'utente può selezionare tutte le opzioni che desidera in un gruppo di caselle di controllo. In altre parole, il controllo di una casella di controllo non deseleziona le altre caselle di controllo nel gruppo di caselle di controllo.

I pulsanti di opzione vengono di solito in gruppi (se non sono raggruppati con un altro pulsante di opzione, probabilmente si intende utilizzare una casella di controllo) identificati utilizzando lo stesso attributo del name su tutti i pulsanti all'interno di quel gruppo. La selezione dei pulsanti di opzione si escludono a vicenda , il che significa che l'utente può selezionare solo una scelta tra un gruppo di pulsanti di opzione. Quando viene selezionato un pulsante di opzione, qualsiasi altro pulsante di opzione con lo stesso name precedentemente selezionato viene deselezionato.

Esempio:

<input type="radio" name="color" id="red" value="#F00">
<input type="radio" name="color" id="green" value="#0F0">
<input type="radio" name="color" id="blue" value="#00F">

Se visualizzati, i pulsanti di opzione appaiono come un cerchio (deselezionato) o un cerchio pieno (selezionato). Le caselle di controllo appaiono come un quadrato (deselezionato) o un quadrato pieno (selezionato). A seconda del browser e del sistema operativo, il quadrato a volte ha angoli arrotondati.

attributi

caselle di controllo e pulsanti di opzione hanno un numero di attributi per controllare il loro comportamento:

value

Come qualsiasi altro elemento di input, l'attributo value specifica il valore stringa da associare al pulsante in caso di invio del modulo. Tuttavia, le caselle di controllo e i pulsanti di opzione sono speciali in quanto quando il valore viene omesso, viene impostato su on quando viene inviato, anziché inviare un valore vuoto. L'attributo value non si riflette nell'aspetto del pulsante.

checked

L'attributo checked specifica lo stato iniziale di una casella di controllo o di un pulsante di opzione. Questo è un attributo booleano e può essere omesso.

Ognuno di questi sono modi equivalenti validi per definire un pulsante di opzione selezionato:

<input checked>
<input checked="">
<input checked="checked">
<input checked="ChEcKeD">

L'assenza dell'attributo checked è l'unica sintassi valida per un pulsante non controllato:

<input type="radio">
<input type="checkbox">

Quando si ripristina un <form> , le caselle di controllo e i pulsanti di opzione tornano allo stato dell'attributo checked .

Accessibilità

etichette

Per dare un contesto ai pulsanti e mostrare agli utenti a cosa serve ciascun pulsante, ognuno di essi dovrebbe avere un'etichetta. Questo può essere fatto usando un elemento <label> per avvolgere il pulsante. Inoltre, rende l'etichetta selezionabile, quindi si seleziona il pulsante corrispondente.

Esempio:

<label>
  <input type="radio" name="color" value="#F00">
  Red
</label>

o con un elemento <label> con un attributo for impostato id del pulsante:

<input type="checkbox" name="color" value="#F00" id="red">
<label for="red">Red</label>

Gruppi di pulsanti

Poiché ciascun pulsante di opzione influisce sugli altri componenti del gruppo, è comune fornire un'etichetta o un contesto per l'intero gruppo di pulsanti di opzione.

Per fornire un'etichetta per l'intero gruppo, i pulsanti radio dovrebbero essere inclusi in un elemento <fieldset> con un elemento <legend> suo interno.

Esempio:

<fieldset>
  <legend>Theme color:</legend>
  <p>
    <input type="radio" name="color" id="red" value="#F00">
    <label for="red">Red</label>
  </p>
  <p>
    <input type="radio" name="color" id="green" value="#0F0">
    <label for="green">Green</label>
  </p>
  <p>
    <input type="radio" name="color" id="blue" value="#00F">
    <label for="blue">Blue</label>
  </p>
</fieldset>

Le caselle di controllo possono anche essere raggruppate in modo simile, con un fieldset e una legenda che identificano il gruppo di caselle di controllo correlate. Tuttavia, tieni presente che le caselle di controllo non devono condividere lo stesso nome perché non si escludono a vicenda. In questo modo il modulo invierà più valori per la stessa chiave e non tutti i linguaggi sul lato server lo gestiranno allo stesso modo (comportamento non definito). Ogni casella di controllo dovrebbe avere un nome univoco o utilizzare un insieme di parentesi quadre ( [] ) per indicare che il modulo deve inviare una matrice di valori per quella chiave. Il metodo scelto dipende dal modo in cui si intende gestire i dati del modulo lato client o lato server. Si dovrebbe anche tenere la leggenda breve, poiché alcune combinazioni di browser e screen reader leggono la legenda prima di ogni campo di input nel fieldset.