Un pulsante di opzione è un elemento interattivo in HTML, che può essere creato usando ""Tag con il tipo di attributo con il valore"Radio". Gli utenti possono selezionare un'opzione dall'elenco fornito. Questo pulsante viene solitamente utilizzato in cui una sola opzione dovrebbe essere selezionata in diversi scenari, come la selezione di genere, la selezione del gruppo di sangue e altro ancora.

Questo articolo ti guiderà nella creazione di un pulsante di opzione HTML con l'aiuto di un esempio pratico.

Come aggiungere un pulsante di opzione in HTML?

Per aggiungere un pulsante di opzione in HTML, seguire la sintassi di seguito:

Ecco la descrizione della sintassi dichiarata:

• "tipo": Questo attributo specifica quale tipo di input si desidera creare come testo, radio, casella di controllo e altro ancora. Per creare un pulsante di opzione, il valore dell'attributo deve essere impostato come "radio".
• "nome": Definisce il nome dell'elemento di input. Questo attributo dovrebbe essere lo stesso per l'elenco dei pulsanti di radio.
• "valore": Ciò specifica il valore che verrà inviato al server quando il pulsante di opzione è contrassegnato come selezionato.

Esempio: aggiunta di un pulsante di opzione in HTML

Questo esempio discuterà la procedura di aggiunta di un pulsante di opzione in HTML utilizzando il pulsante di opzione di input. In

Passaggio 1: creazione del file HTML

Innanzitutto, aggiungi un tag nel file HTML:

All'interno del creato:

• Innanzitutto, aggiungi il “

  "Tag per dare una voce alla pagina.

• Poi un "

  "Tag per un paragrafo o una riga di testo.

• Successivamente, il tag di input viene aggiunto con un attributo "tipo"Avere valore"Radio", Il nome è impostato come selezione e"valore" COME "rosso". Vengono dati diversi valori a ogni pulsante di opzione che ha lo stesso nome. Lo stesso nome rappresenta lo stesso gruppo o elenco.
• Se si desidera aggiungere un pulsante che è predefinito contrassegnato come selezionato, assegna l'attributo "controllato"A quel pulsante.
• Infine, il ""L'elemento su ciascun pulsante di opzione viene utilizzato per aggiungere didascalie. Fornisce inoltre una migliore accessibilità.

Il codice seguente è l'interpretazione dello scenario sopra:

Pulsante di opzione HTML

Qual è il tuo colore preferito?

Rosso



Blu



Verde



Viola



Altri

Si può vedere che i pulsanti di opzione sono creati correttamente:

Puoi anche applicare gli stili al pulsante di opzione sopra creato seguendo il codice CSS di seguito.

Passaggio 2: applicare lo stile su HTML

IL "div"Indica il tag DIV che abbiamo creato nel file HTML:

• Prima il "colore di sfondoLa proprietà "è impostata come"#8197f0".
• "confineLa proprietà "è impostata come"5px punteggiato #13023a", Dove 5px rappresenta la larghezza del bordo, punteggiato indica il tipo di linea e successiva indica il colore del bordo.
• "imbottitura"È impostato come"20px 100px"Dove 20px specifica l'imbottitura dall'alto e in basso e 100px indica l'imbottitura da sinistra e destra.
• Per lo stile del carattere, assegna il "famiglia di font"Valore della proprietà come"corsivo".

CSS

div
Background-color: #8197F0;
Bordo: 5px punteggiato #13023a;
imbottitura: 20px 100px;
Font-size: 20px;
Font-Family: corsivo;

Si può vedere che l'elemento Div è disegnato con successo:

Questo è tutto! Abbiamo spiegato in dettaglio il pulsante di opzione HTML.

Conclusione

Un pulsante di opzione è un input che appare sempre in gruppi di due o più opzioni. Da questo gruppo, l'utente può selezionare solo un'opzione. In HTML, un pulsante di opzione può essere creato utilizzando ""Tag con il tipo di attributo con il valore"Radio". Questo blog ha dimostrato il metodo per l'aggiunta di pulsanti di radio in HTML.