Aquest article us guiarà per crear un botó d'opció HTML amb l'ajuda d'un exemple pràctic.
Com afegir un botó de ràdio a HTML?
Per afegir un botó d'opció en HTML, seguiu la sintaxi que s'indica a continuació:
< entrada tipus = 'ràdio' nom = '' valor = '' >
Aquí teniu la descripció de la sintaxi indicada:
- “ tipus ”: aquest atribut especifica quin tipus d'entrada voleu crear, com ara text, ràdio, casella de selecció i més. Per crear un botó d'opció, el valor de l'atribut s'ha d'establir com a 'ràdio'.
- “ nom ”: defineix el nom de l'element d'entrada. Aquest atribut hauria de ser el mateix per a la llista de botons d'opció.
- “ valor ”: Això especifica el valor que s'enviarà al servidor quan el botó d'opció estigui marcat com a marcat.
Exemple: afegir un botó de ràdio en HTML
Aquest exemple tractarà el procediment d'afegir un botó d'opció en HTML mitjançant el botó d'entrada d'opció. En
Pas 1: Creació d'un fitxer HTML
Primer, afegiu una etiqueta
Dins del
- Primer, afegiu el ' ” etiqueta per donar un encapçalament a la pàgina.
- Llavors, un ' ” per a un paràgraf o una línia de text.
- Després d'això, s'afegeix l'etiqueta d'entrada amb un atribut ' tipus 'tenint valor' ràdio ”, el nom es defineix com a selecte i “ valor ' com ' vermell ”. Es donen valors diferents a cada botó d'opció que té el mateix nom. El mateix nom representa el mateix grup o llista.
- Si voleu afegir un botó marcat per defecte com a marcat, assigneu l'atribut ' comprovat ” a aquest botó.
- Finalment, el '
L'element ” de cada botó d'opció s'utilitza per afegir subtítols. També ofereix una millor accessibilitat.
El codi següent és la interpretació de l'escenari anterior:
< h1 > Botó de ràdio HTML h1 >< pàg > Quin és el teu color preferit? pàg >
< entrada tipus = 'ràdio' nom = 'selecciona el color' valor = 'vermell' comprovat >
< etiqueta per = 'ràdio1' > Vermell etiqueta >
< br >
< entrada tipus = 'ràdio' nom = 'selecciona el color' valor = 'blau' >
< etiqueta per = 'ràdio1' > Blau etiqueta >
< br >
< entrada tipus = 'ràdio' nom = 'selecciona el color' valor = 'verd' >
< etiqueta per = 'ràdio1' > Verd etiqueta >
< br >
< entrada tipus = 'ràdio' nom = 'selecciona el color' valor = 'porpra' >
< etiqueta per = 'ràdio1' > Porpra etiqueta >
< br >
< entrada tipus = 'ràdio' nom = 'selecciona el color' valor = 'altres' >
< etiqueta per = 'ràdio1' > Altres etiqueta >
Es pot veure que els botons d'opció s'han creat correctament:
També podeu aplicar estils al botó d'opció creat anteriorment seguint el codi CSS esmentat a continuació.
Pas 2: aplicació d'estil a HTML
El ' div ” indica l'etiqueta div que hem creat al fitxer HTML:
- En primer lloc, el ' color de fons La propietat s'estableix com a #8197f0 ”.
- “ frontera La propietat s'estableix com a 5 píxels amb punts #13023a ”, on 5px representa l'amplada de la vora, els punts indica el tipus de línia i, a continuació, el color de la vora.
- “ farciment ' s'estableix com ' 20px 100px ” on 20px especifica el farciment de dalt i baix i 100px indica el farciment d'esquerra i dreta.
- Per a l'estil de tipus de lletra, assigneu el ' família de tipus de lletra 'valor de la propietat com a' cursiva ”.
CSS
div {color de fons: #8197f0;
vora: 5 píxels amb punts #13023a;
farciment: 20px 100px;
mida de la lletra: 20px;
família de tipus de lletra: cursiva;
}
Es pot veure que l'element div s'ha dissenyat correctament:
Això és! Hem explicat detalladament el botó d'opció HTML.
Conclusió
Un botó d'opció és una entrada que sempre apareix en grups de dues o més opcions. D'aquest grup, l'usuari només pot seleccionar una opció. En HTML, es pot crear un botó d'opció utilitzant el '