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'attributofordell'etichetta deve corrispondere all'attributoiddel 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.
Sfida
FacileCrea un documento HTML che includa un modulo con un gruppo di pulsanti di opzione. Il modulo dovrebbe avere i seguenti elementi:
- Un gruppo di tre pulsanti di opzione con il nome "color".
- Il primo pulsante di opzione dovrebbe avere l'id "red", il valore "red" e un'etichetta con il testo "Red".
- Il secondo pulsante di opzione dovrebbe avere l'id "green", il valore "green" e un'etichetta con il testo "Green".
- Il terzo pulsante di opzione dovrebbe avere l'id "blue", il valore "blue" e un'etichetta con il testo "Blue".
- 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>Questa lezione include un breve quiz. Inizia la lezione per rispondere e tenere traccia dei tuoi progressi.
Tutte le lezioni di Fondamenti
1Fondamenti di HTML
Che cos’è HTML?Struttura di base di un documento HTMLTag ed elementiAnnidamento e tag di chiusuraCommenti in HTML7Pagina del profilo personale
Panoramica del progettoSezione intestazione2Testo e formattazione
IntestazioniParagrafiInterruzioni di rigaTesto in grassetto e corsivoAncora grassetto e corsivoRiepilogo - formattazione5Aggiungere contenuti
Attributi HTMLCollegamentiCollegamenti a nuove pagineImmaginiAttributi delle immagini8Moduli e campi di input - Parte 1
Nozioni di base sui moduliCampi di testoAttributi degli inputCampo passwordEtichette per gli inputRiepilogo - modulo di base11Pagina di registrazione all'evento
Panoramica del progettoSezione intestazione9Moduli e input - Parte 2
Pulsanti di opzioneCaselle di controlloMenu a discesaPulsantiPulsanti nei moduliRiepilogo - Moduli #1Riepilogo - Moduli #2Esercitati da solo: Playground Web