Menu
Coddy logo textTech

Pulsanti di opzione

Fa parte della sezione Fondamenti del percorso HTML di Coddy. Lezione 41 di 60.

In HTML, i pulsanti di opzione vengono usati per creare un insieme di opzioni mutuamente esclusive, in cui l’utente può selezionare una sola opzione del gruppo. I pulsanti di opzione si creano usando il tag <input> con l’attributo type impostato su "radio".

Ecco la sintassi di base per creare un pulsante di opzione in HTML:

<input type="radio" id="option1" name="radiogroup" value="option1">
<label for="option1">Option 1</label>
  • <input>: Il tag che definisce il campo di input.
  • type="radio": Un attributo che specifica che il tipo di input è un pulsante di opzione.
  • id: Un attributo che assegna un identificatore univoco al pulsante di opzione.
  • name: Un attributo che raggruppa i pulsanti di opzione. Tutti i pulsanti di opzione con lo stesso nome appartengono allo stesso gruppo e, alla volta, è possibile selezionare una sola opzione all'interno di un gruppo.
  • value: Un attributo che specifica il valore associato al pulsante di opzione. Questo valore viene inviato al server quando il modulo viene inviato.
  • <label>: Un tag che fornisce un'etichetta cliccabile per il pulsante di opzione. L'attributo for dell'etichetta deve corrispondere all'attributo id del pulsante di opzione.

Ecco un esempio di come creare un gruppo di pulsanti di opzione:

<form>
	<input type="radio" id="option1" name="mygroup" value="option1">
	<label for="option1">Option 1</label>
	<br>
	
	<input type="radio" id="option2" name="mygroup" value="option2">
	<label for="option2">Option 2</label>
	<br>
	
	<input type="radio" id="option3" name="mygroup" value="option3">
	<label for="option3">Option 3</label>
	<br>
</form>

In questo esempio, abbiamo un modulo con tre pulsanti di opzione, tutti appartenenti allo stesso gruppo perché condividono lo stesso attributo name ("mygroup"). Ogni pulsante di opzione ha un id e un value univoci e un'etichetta corrispondente. Quando l'utente seleziona una di queste opzioni e invia il modulo, il valore del pulsante di opzione selezionato verrà inviato al server.

challenge icon

Sfida

Facile

Crea un documento HTML che includa un modulo con un gruppo di pulsanti di opzione. Il modulo dovrebbe avere i seguenti elementi:

  1. Un gruppo di tre pulsanti di opzione con il nome "color".
  2. Il primo pulsante di opzione dovrebbe avere l'id "red", il valore "red" e un'etichetta con il testo "Red".
  3. Il secondo pulsante di opzione dovrebbe avere l'id "green", il valore "green" e un'etichetta con il testo "Green".
  4. Il terzo pulsante di opzione dovrebbe avere l'id "blue", il valore "blue" e un'etichetta con il testo "Blue".
  5. Aggiungi un tag <br> dopo ogni etichetta per creare un'interruzione di riga.

Provalo tu

<!DOCTYPE html>
<html>
    <body>
        <!-- Scrivi il codice qui -->
    </body>
</html>
quiz iconMettiti alla prova

Questa lezione include un breve quiz. Inizia la lezione per rispondere e tenere traccia dei tuoi progressi.

Tutte le lezioni di Fondamenti

Esercitati da solo: Playground Web