Radio HTML: gruppi name, checked e required

HTML <input type="radio"> crea pulsanti radio per scegliere un elemento tra opzioni correlate. I pulsanti con lo stesso name nello stesso form appartengono a un gruppo; assegna a ciascuna opzione un valore diverso. Solo il name e il valore del pulsante selezionato vengono inviati.

Distingui il nome del gruppo dall’id di ciascun pulsante

I pulsanti di un gruppo condividono un nome, ma ogni id utilizzato per associare un'etichetta deve essere unico. Selezionare un altro pulsante con lo stesso nome cancella la selezione precedente. Usa nomi diversi per domande indipendenti. fieldset e legend forniscono un gruppo e la sua domanda, ma fieldset separati da soli non dividono i pulsanti radio con lo stesso nome in gruppi di selezione differenti.

La proprietà del form influisce anche sul raggruppamento: i pulsanti con lo stesso nome in form diversi non formano necessariamente un unico gruppo. L'esempio seguente separa i gruppi frutta e sport all'interno dello stesso form.

Esempio completo: verifica i valori di due domande

Salva il seguente documento come radio-demo.html e aprilo in un browser. È richiesta la scelta di un frutto, mentre il baseball è lo sport predefinito. L'esempio impedisce l'invio e visualizza i valori correnti sulla pagina, quindi non è necessario un gestore lato server.

<!doctype html>
<html lang="it">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Gruppi radio e valori inviati</title>
</head>
<body>
  <h1>Esercizio di preferenze</h1>
  <form id="choices">
    <fieldset>
      <legend>Frutta (obbligatoria)</legend>
      <input type="radio" id="apple" name="fruit" value="apple" required>
      <label for="apple">Mela</label>
      <input type="radio" id="banana" name="fruit" value="banana" required>
      <label for="banana">Banana</label>
    </fieldset>
    <fieldset>
      <legend>Sport</legend>
      <input type="radio" id="soccer" name="sport" value="soccer">
      <label for="soccer">Calcio</label>
      <input type="radio" id="baseball" name="sport" value="baseball" checked>
      <label for="baseball">Baseball</label>
    </fieldset>
    <button type="submit">Mostra valori</button>
    <button type="reset">Ripristina</button>
  </form>
  <pre id="result" aria-live="polite"></pre>
  <script>
    const form = document.getElementById('choices');
    const result = document.getElementById('result');
    form.addEventListener('submit', (event) => {
      event.preventDefault();
      result.textContent = JSON.stringify(Array.from(new FormData(form).entries()), null, 2);
    });
    form.addEventListener('reset', () => { result.textContent = ''; });
  </script>
</body>
</html>

1. Inizialmente nessun frutto è selezionato e il baseball è selezionato. Premi il pulsante di invio: la scelta obbligatoria del frutto impedisce l'invio.
2. Seleziona Mela e invia. L’output contiene fruit=apple e sport=baseball. I dati usano baseball da value, non l’etichetta visualizzata.
3. Seleziona Banana per deselezionare Mela. Seleziona Calcio per deselezionare Baseball; la selezione del frutto rimane invariata.
4. Il reset ripristina nessuna selezione di frutta e la selezione predefinita di Baseball. Il reset ripristina gli stati originari selezionati piuttosto che cancellare ogni selezione.

checked · required

checked è un attributo booleano per la selezione iniziale. checked="false" mantiene comunque l'attributo presente e non è un modo corretto per esprimere falso. Ometterlo per un'opzione inizialmente non selezionata. Leggere o modificare lo stato corrente con la proprietà checked in JavaScript.

Se un qualsiasi pulsante in un gruppo ha required, un pulsante di quel gruppo deve essere selezionato. Il pulsante selezionato non deve necessariamente avere required. Entrambe le opzioni di frutta lo hanno qui per rendere chiaro il requisito.

Un gruppo senza selezione è omesso dai dati inviati. Un’opzione selezionata senza value invia la stringa predefinita on: assegna quindi valori distinti alle opzioni. I pulsanti disabled non possono essere usati e sono esclusi dall’invio. Anche con la validazione del browser, verifica nuovamente i valori consentiti sul server.

Cancellare una scelta e utilizzare la tastiera

Fare clic su un pulsante radio già selezionato non lo cancella come una casella di controllo. Se gli utenti devono scegliere “Nessuno”, progetta questa come opzione separata. Usa le caselle di controllo per una domanda in cui più elementi possono essere attivati o disattivati indipendentemente.

Associa le etichette in modo che cliccando sul loro testo si selezionino le opzioni. Mantieni il comportamento nativo della tastiera: usa Tab per raggiungere il gruppo, poi i tasti freccia per spostarti e selezionare. Il comportamento esatto del focus può differire tra i browser. La MDN reference sugli input radio spiega attributi e regole di invio.