<input type="radio">

Gli elementi <input> di tipo radiosono generalmente utilizzati nei gruppi radio : raccolte di pulsanti di opzione che descrivono un insieme di opzioni correlate.

È possibile selezionare un solo pulsante di opzione in un determinato gruppo alla volta. I pulsanti di opzione sono in genere visualizzati come piccoli cerchi, che vengono riempiti o evidenziati quando vengono selezionati.

Gli attributi di questo elemento includono gli attributi globali.

Valore

L'attributo value è una stringa contenente il valore del pulsante di opzione. Il valore non viene mai mostrato all'utente dal suo programma utente . Viene invece utilizzato per identificare quale pulsante di opzione in un gruppo è selezionato.

Definizione di un gruppo "radio"

Un gruppo radio è definito assegnando lo stesso a ciascuno dei pulsanti radio nel gruppo name. Una volta stabilito un gruppo radio, la selezione di qualsiasi pulsante di opzione in quel gruppo deseleziona automaticamente qualsiasi pulsante di opzione attualmente selezionato nello stesso gruppo.

Puoi avere tutti i gruppi radiofonici che vuoi su una pagina, purché ognuno abbia il suo unico name.

Ad esempio, se il modulo deve richiedere all'utente il metodo di contatto preferito, è possibile creare tre pulsanti di opzione, ciascuno con la proprietà name impostata su contactuno solo con il valore email, uno con il valore phone e uno con il valore mail. L'utente non vede mai value o il name(a meno che non si aggiunga espressamente il codice per visualizzarlo).

<form>
  <p>Inserisci il metodo di contatto che preferisci:</p>
    <div>
      <input type="radio" id="contactChoice1"
      name="contact" value="email">
      <label for="contactChoice1">Email</label>
      <input type="radio" id="contactChoice2"
      name="contact" value="phone">
      <label for="contactChoice2">Phone</label>
      <input type="radio" id="contactChoice3"
      name="contact" value="mail">
      <label for="contactChoice3">Mail</label>
    </div>
    <div>
      <button type="submit">Invia</button>
    </div>
</form>

Qui puoi vedere i tre pulsanti di opzione, ognuno con l'impostazione name contact e ciascuno con un unico value che identifica in modo univoco quel singolo pulsante di opzione all'interno del gruppo. Ognuno di essi ha anche un univoco id, che viene utilizzato dall'attributo for dell'elemento <label> per associare le etichette ai pulsanti di opzione.

Attributi aggiuntivi

Oltre agli attributi comuni condivisi da tutti gli elementi <input>, gli input radio supportano i seguenti attributi.

checked

Un attributo booleano che, se presente, indica che questo pulsante di opzione è quello selezionato di default nel gruppo.

value

L'attributo value è condiviso da tutti gli <input>; tuttavia, ha uno scopo speciale per input di tipo radio: quando viene inviato un modulo, solo i pulsanti di opzione attualmente selezionati vengono inviati al server e il valore riportato è il valore dell'attributo value. Se value non è altrimenti specificato, è la stringa on per impostazione predefinita.

Utilizzo degli input radio

Per fare in modo che un pulsante di opzione sia selezionato per impostazione predefinita, includi l' attributo checked, come mostrato in questa versione rivista dell'esempio precedente:

<form>
    <p>Inserisci il metodo di contatto che preferisci:</p>
  <div>
    <input type="radio" id="contactChoice1"
    name="contact" value="email" checked>
    <label for="contactChoice1">Email</label>
    <input type="radio" id="contactChoice2"
    name="contact" value="phone" checked>
    <label for="contactChoice2">Phone</label>
    <input type="radio" id="contactChoice3"
    name="contact" value="mail" checked>
    <label for="contactChoice3">Mail</label>
  </div>
  <div>
    <button type="submit">Invia</button>
  </div>
</form>

Convalida

I pulsanti di opzione non partecipano alla convalida dei vincoli; non hanno alcun valore reale da vincolare.

Liste utili