Curso HTML 9.3 Checkbox y radio buttons

9.3 Checkbox y radio buttons

En este apartado veremos en profundidad los checkboxes y radio buttons en HTML: su sintaxis, atributos más relevantes, agrupación, comportamiento por defecto, accesibilidad y algunos ejemplos comentados.

1. Checkboxes (<input type=’checkbox’>)

Los checkboxes son controles de formulario que representan valores booleanos (activado/desactivado) y permiten selecciones múltiples si comparten el mismo name.

type=’checkbox’: define el control.
name: nombre de la variable en el envío del formulario. Si hay varios con el mismo name, se envía un array de valores.
value: valor que se envía si está marcado. Por defecto, ‘on’.
checked: atributo booleano que marca el estado por defecto.
disabled: atributo booleano que deshabilita el control.
indeterminate (solo JS): estado visual intermedio (ni marcado ni desmarcado).

Ejemplo básico con comentarios:



  
    Elige tus aficiones

    
    
      
      Deporte
    

    
    
      
      Música
    

    
    
      
      Cine (no disponible)

Indeterminate state: no existe directamente como atributo HTML, pero puede aplicarse mediante JS:


Marcar todo

2. Radio buttons (<input type=’radio’>)

Los radio buttons permiten una única selección dentro de un grupo. Su agrupación se basa en el atributo name. Sólo uno de ellos puede estar checked a la vez.

type=’radio’: define el control.
name: identifica el grupo. Todos los radios con el mismo name forman un conjunto excluyente.
value: valor que se envía cuando ese radio está marcado.
checked: marca el estado inicial del radio. Solo uno por grupo.
disabled: deshabilita ese botón.
required: obliga a elegir uno del grupo antes de enviar.

Ejemplo de grupo de radios con fieldset y legend:


  
    Selecciona tu nivel de experiencia

    
      
      Principiante
    

    
      
      Intermedio
    

    
      
      Avanzado

3. Agrupación y comportamiento

Checkboxes y radios siguen estas reglas en el envío de formularios:

Si no están marcados, no se envían.
Checkboxes con mismo name → array de valores.
Radios con mismo name → valor único según el marcado.
required en radios: se asegura al menos uno marcado.

4. Accesibilidad

Para mejorar la accesibilidad:

Usar siempre <label for='id'> o envolver el input dentro de la etiqueta <label>.
Para grupos de radios: <fieldset> y <legend> describen el conjunto.
Agregar roles ARIA si se necesita más semántica (por ejemplo role='group', aria-labelledby).
El teclado:
- Checkboxes: Tab para foco y barra espaciadora para alternar.
- Radios: Tab para entrar/salir del grupo, flechas arriba/abajo o izquierda/derecha para cambiar selección.

5. Atributos y propiedades destacados

Atributo/Propiedad	Tipo	Descripción
checked	Booleano (HTML)	Determina el estado inicial marcado.
defaultChecked	Booleano (JS)	Valor inicial del atributo `checked`.
indeterminate	Booleano (JS)	Estado visual intermedio (solo JS).
disabled	Booleano	Deshabilita el control.
required	Booleano	Obliga a marcar antes de enviar (radios o cualquier input).
value	Cadena	Valor enviado cuando está marcado.
name	Cadena	Agrupa inputs y nombre en el envío del formulario.

6. Ejemplo combinado avanzado

Formulario con checkboxes y radios, validaciones y estados diversos:


  
    Datos personales

    
    
      
      Deseo recibir novedades por email
    

    
    
      Género
      
        
        Mujer
      
      
        
        Hombre
      
      
        
        Otro

Con esto dispones de un conocimiento exhaustivo sobre cómo usar, configurar y agrupar checkboxes y radio buttons en HTML, garantizando buena accesibilidad y comportamiento en formularios.