Cómo crear un botón de radio en un formulario HTML5

Cómo crear un botón de radio en un formulario HTML5 - Dummies

Para incluir botones de opción en su página web HTML5, ayuda saber qué son y cómo usarlos. En la superficie, los botones de radio se parecen mucho a las casillas de verificación, pero son diferentes en varios aspectos importantes:

  • Los botones de opción se producen solo en grupos. Puede tener una casilla de verificación en un formulario, pero los botones de opción solo tienen sentido cuando se colocan en grupos.

  • Solo se puede seleccionar un elemento. Seleccionar un botón de radio deselecciona los demás. Es como la radio de un automóvil, donde al hacer clic en uno de los botones preestablecidos se deseleccionan los demás. (En realidad, es como en las radios de los automóviles viejos, si el botón de la estación seleccionada se insertaba físicamente, los otros botones salían. Aunque ese tipo de radio ya no existe, el nombre sigue vivo).

  • El id de cada botón de opción es único. Cada identificación en una página web debe ser única, y los elementos de identificación de cada botón de radio siguen esas reglas.

  • Cada elemento de radio también tiene un atributo name . El atributo de nombre se usa para especificar todo el grupo de objetos de radio.

  • Todos los botones de opción de un grupo tienen el mismo nombre. HTML usa el atributo de nombre para descubrir en qué grupo se encuentra el botón de opción y para garantizar que solo se seleccione un botón en un grupo.

Esta figura muestra un formulario que contiene un grupo de botones de opción para seleccionar Pequeño, Medio o Grande:

Consulte el siguiente código para ver la configuración de una página web con botones:

 formDemo. html 

Formulario de demostración

Seleccionar elementos

Botones de opción pequeño

Para crear un grupo de botones de opción, siga estos pasos:

  1. Comience por crear un elemento de entrada que sirva como base básica.

  2. Configure el tipo a radio .

  3. Proporcione a cada botón de opción una ID única .

  4. Use el atributo de nombre para identificar todos los botones de un grupo.

  5. Considere la agrupación visual también.

    El usuario no podrá decir qué botones son parte de un grupo solo mediante el formato HTML. Puede usar conjuntos de campo u otros trucos de formato para ayudar al usuario a saber qué botones están en cada grupo. Todos los botones en un grupo deben estar físicamente cerca uno del otro.

  6. Marque uno de los botones (seleccionado) de manera predeterminada.

    Aplicar el atributo checked = "checked" (provisto por el departamento de departamento de redundancia) a uno de los elementos para que comience a verificarse.

    Si no preselecciona un botón de opción, los programas adjuntos a su formulario se confundirán.