Come selezionare un pulsante di opzione per impostazione predefinita?
Per impostazione predefinita ' controllato L'attributo ” viene utilizzato per selezionare il pulsante di opzione. Se questo attributo viene utilizzato su più pulsanti di opzione, per impostazione predefinita viene selezionato il pulsante di opzione più recente. Segui il blog passo dopo passo per selezionare il pulsante di opzione per impostazione predefinita:
Passaggio 1: crea pulsanti di opzione
Nel file HTML, crea tre pulsanti di opzione e allega loro delle etichette:
< centro >
< h3 > Seleziona il tuo livello di esperienza: < / h3 >
< div >
< ingresso tipo = 'Radio' id = 'principiante' nome = 'esperienza' valore = 'principiante' >
< etichetta per = 'principiante' > Principiante < / etichetta >
< / div >
< div >
< ingresso tipo = 'Radio' id = 'intermedio' nome = 'esperienza' valore = 'intermedio' >
< etichetta per = 'intermedio' > Intermedio < / etichetta >
< / div >
< div >
< ingresso tipo = 'Radio' id = 'avanzare' nome = 'esperienza' valore = 'avanzare' >
< etichetta per = 'avanzare' > Avanzare < / etichetta >
< / div >
< / centro >
Nello snippet di codice sopra:
- Il pulsante di opzione è formato creando semplici ' ” e impostandone il tipo su “ Radio ”.
- Assegna a ciascun pulsante di opzione il 'nome', 'id' e 'valore'.
- Alla fine, usa il ' id ” del campo di input per allegare il “
” utilizzando il “ per 'attributo.
Dopo aver eseguito lo script, l'output è il seguente:
La figura rappresenta che i pulsanti di opzione sono visualizzati ma nessuno di essi è selezionato per impostazione predefinita.
Passaggio 2: selezionare Per impostazione predefinita
IL ' controllato L'attributo ” viene utilizzato per selezionare automaticamente il pulsante di opzione. Seleziona solo un'opzione. Ecco perché è un approccio migliore selezionare un pulsante di opzione per impostazione predefinita. Limita l'utente a selezionare l'opzione giusta:
< div >
< ingresso tipo = 'Radio' id = 'principiante' nome = 'esperienza' valore = 'principiante' controllato>
< etichetta per = 'principiante' >Principiante< / etichetta >
< / div >
Nel codice sopra, il controllato viene utilizzato l'attributo ed è assegnato solo al primo campo di input.
Ora, dopo aver eseguito il codice sopra, la pagina web ha questo aspetto:
L'output illustra che il primo pulsante di opzione è selezionato per impostazione predefinita a ogni aggiornamento della pagina.
Suggerimento bonus: utilizzo di JavaScript per selezionare il pulsante di opzione per impostazione predefinita
Per selezionare un pulsante di opzione per impostazione predefinita utilizzando JavaScript, accedi al pulsante di opzione utilizzando id. Quindi, seleziona il suo attributo verificato e imposta il suo valore booleano impostato su 'vero' come nel codice seguente:
< copione >document.getElementById ( 'principiante' ) . controllato = VERO;
< / copione >
In questo codice, il ' principiante ' è l'id del pulsante di opzione selezionato per impostazione predefinita.
Dopo aver compilato lo script, l'output è il seguente:
Nell'istantanea sopra, il primo pulsante di opzione è selezionato per impostazione predefinita utilizzando JavaScript.
Conclusione
Per selezionare un pulsante di opzione, gli utenti possono utilizzare il ' controllato 'attributo. Se l'attributo verificato viene utilizzato in più di un pulsante di opzione, il pulsante di opzione ottiene il valore dell'attributo 'selezionato' più recente. Per selezionare un pulsante di opzione per impostazione predefinita utilizzando JavaScript, accedi al pulsante di opzione utilizzando id. Questo blog ha dimostrato con successo come selezionare il pulsante di opzione per impostazione predefinita.