Saltar la navegación

Elementos de selección: casillas de verificación y botones de opción

Los elementos de selección (o _checkable items_, en inglés) son controles cuyo estado puede cambiar cuando se hace clic en ellos o en sus etiquetas asociadas. Hay dos tipos de elementos de selección: las casillas de verificación (o _check boxes_) y los botones de opción (o _radio buttons_). Ambos usan el atributo checked para indicar si el control de formulario está seleccionado por defecto o no.

Vale la pena señalar que estos controles no se comportan exactamente como otros controles de formulario. Para la mayoría de los controles de formulario, cuando se envía el formulario, se envían todos los controles que tienen un atributo name, incluso si en ellos no se ha introducido ningún valor. En el caso de elementos de selección, sus valores se envían solo si están seleccionados. Si no están seleccionados, no se envía nada, ni siquiera su nombre. Si están seleccionados pero no tienen ningún valor asignado, el nombre se envía con el valor on.

Para una usabilidad/accesibilidad óptima, te recomendamos delimitar cada lista de elementos que estén relacionados entre sí dentro de un elemento <fieldset> con un elemento <legend> que proporcione una descripción general de la lista. Cada par individual de elementos <label>/<input> ha de estar contenido en un elemento de lista propio (o similar). El elemento <label> asociado se coloca en general inmediatamente después del botón de opción o la casilla de verificación, con las instrucciones para el grupo de botones de opción o casillas de verificación, que suelen ser el contenido del elemento <legend>. Observa las estructuras de ejemplo en los ejemplos asociados anteriores.