Un botón de radio es un elemento interactivo en HTML, que se puede crear utilizando el ""Etiqueta que tiene el tipo de atributo con el valor"radio". Los usuarios pueden seleccionar una opción en la lista proporcionada. Este botón generalmente se usa donde solo se debe seleccionar una opción en diferentes escenarios, como selección de género, selección de grupos sanguíneos y más.

Este artículo lo guiará para crear un botón de radio 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:

Aquí está la descripción de la sintaxis establecida:

• "tipo": 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 radio.
• "valor": Esto especifica el valor que se enviará al servidor cuando el botón de opción se marca como se verifica.

Ejemplo: agregar un botón de radio en HTML

Este ejemplo discutirá el procedimiento de agregar un botón de radio en HTML usando el botón de radio de entrada. En

Paso 1: Creación de archivo HTML

Primero, agregue una etiqueta en el archivo HTML:

Dentro del creado:

• Primero, agregue el "

  "Etiqueta para dar un rumbo a la página.

• Entonces un "

  "Etiqueta para un párrafo o línea de texto.

• Después de eso, la etiqueta de entrada se agrega con un atributo "tipo"Tener valor"radio", El nombre se establece como seleccionado y"valor" como "rojo". Se dan diferentes valores 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 por defecto como se verifica, 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:

Botón de radio html

Cual es tu color favorito?

Rojo



Azul



Verde



Púrpura



Otros

Se puede ver que los botones de radio se crean con éxito:

También puede aplicar estilos al botón de radio creado anteriormente siguiendo el código CSS mencionado a continuación.

Paso 2: Aplicar estilo a HTML

El "div"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, punteado indica el tipo de línea, y luego indica el color del borde.
• "relleno"Está configurado como"20px 100px"Donde 20px especifica el relleno de arriba e inferior y 100px indica el relleno de izquierda y derecha.
• Para el estilo de fuentes, asigne el "Familia tipográfica"Valor de propiedad como"cursivo".

CSS

div
Color de fondo: #8197F0;
borde: 5px punteado #13023A;
relleno: 20px 100px;
tamaño de fuente: 20px;
Font-Family: cursiva;

Se puede ver que el elemento Div tiene con éxito:

Eso es todo! Hemos explicado en detalle el botón de radio HTML.

Conclusión

Un botón de radio 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 utilizando el ""Etiqueta que tiene el tipo de atributo con el valor"radio". Este blog demostró el método para agregar botones de radio en HTML.