Este artículo lo guiará en la creación de un botón de opción HTML con la ayuda de un ejemplo práctico.
¿Cómo agregar un botón de radio en HTML?
Para agregar un botón de radio en HTML, siga la sintaxis dada a continuación:
< aporte escribe = 'radio' nombre = '' valor = '' >
Aquí está la descripción de la sintaxis indicada:
- “ escribe ”: este atributo especifica qué tipo de entrada desea crear, como texto, radio, casilla de verificación y más. Para crear un botón de radio, el valor del atributo debe establecerse como 'radio'.
- “ nombre ”: Define el nombre del elemento de entrada. Este atributo debe ser el mismo para la lista de botones de opción.
- “ valor ”: Esto especifica el valor que se enviará al servidor cuando el botón de opción se marque como marcado.
Ejemplo: agregar un botón de radio en HTML
Este ejemplo discutirá el procedimiento de agregar un botón de opción en HTML usando el botón de opción de entrada. En
Paso 1: crear un archivo HTML
Primero, agregue una etiqueta
Dentro del
- Primero, agregue el ' ” etiqueta para dar un encabezado a la página.
- Entonces un ' ” para un párrafo o línea de texto.
- Después de eso, la etiqueta de entrada se agrega con un atributo ' escribe “tener valor” radio ”, el nombre se establece como select, y “ valor ' como ' rojo ”. Se asignan valores diferentes a cada botón de radio que tiene el mismo nombre. El mismo nombre representa el mismo grupo o lista.
- Si desea agregar un botón que está marcado de manera predeterminada como marcado, entonces asigne el atributo ' comprobado ” a ese botón.
- Por último, el “
El elemento ” en cada botón de radio se utiliza para agregar subtítulos. También proporciona una mejor accesibilidad.
El siguiente código es la interpretación del escenario anterior:
< h1 > Botón de opción HTML h1 >< pags > ¿Cual es tu color favorito? pags >
< aporte escribe = 'radio' nombre = 'seleccionar el color' valor = 'rojo' comprobado >
< etiqueta por = 'radio1' > Rojo etiqueta >
< hermano >
< aporte escribe = 'radio' nombre = 'seleccionar el color' valor = 'azul' >
< etiqueta por = 'radio1' > Azul etiqueta >
< hermano >
< aporte escribe = 'radio' nombre = 'seleccionar el color' valor = 'verde' >
< etiqueta por = 'radio1' > Verde etiqueta >
< hermano >
< aporte escribe = 'radio' nombre = 'seleccionar el color' valor = 'violeta' >
< etiqueta por = 'radio1' > Violeta etiqueta >
< hermano >
< aporte escribe = 'radio' nombre = 'seleccionar el color' valor = 'otros' >
< etiqueta por = 'radio1' > Otros etiqueta >
Se puede ver que los botones de radio se crean con éxito:
También puede aplicar estilos al botón de opción creado anteriormente siguiendo el código CSS mencionado a continuación.
Paso 2: aplicar estilo a HTML
Los ' división ” indica la etiqueta div que hemos creado en el archivo HTML:
- Primero el ' color de fondo La propiedad ” se establece como “ #8197f0 ”.
- “ borde La propiedad ” se establece como “ 5px punteado #13023a ”, donde 5px representa el ancho del borde, el punto indica el tipo de línea y el siguiente indica el color del borde.
- “ relleno ” se establece como “ 20 píxeles 100 píxeles ” donde 20px especifica el relleno de arriba a abajo y 100px indica el relleno de izquierda a derecha.
- Para el estilo de fuente, asigne el ' Familia tipográfica ” valor de la propiedad como “ cursivo ”.
CSS
división {color de fondo: #8197f0;
borde: 5px punteado #13023a;
relleno: 20px 100px;
tamaño de fuente: 20px;
familia de fuentes: cursiva;
}
Se puede ver que el elemento div tiene un estilo exitoso:
¡Eso es todo! Hemos explicado en detalle sobre el botón de opción HTML.
Conclusión
Un botón de opción es una entrada que siempre aparece en grupos de dos o más opciones. De este grupo, el usuario solo puede seleccionar una opción. En HTML, se puede crear un botón de radio usando el '