Controles: Casillas o botones

Si queremos definir opciones que el usuario debe elegir o escoger, en muchos casos lo más apropiado suele ser utilizar casillas de verificación o botones de opción (botones de radio). La diferencia principal entre estos dos tipos de botones es la siguiente:

  • Las casillas de verificación se marcan para establecer una opción como activada (verdadero).
  • Los botones de radio se marcan para elegir sólo una opción de varias posibles.
Tipo de información a obtener Etiqueta a utilizar Ejemplo
Casilla de verificación (activado o desactivado) <input type="checkbox">
Botón radio (casilla de opción única) <input type="radio">

Casillas de verificación

Las casillas de verificación permiten mostrar al usuario la posibilidad de marcar una opción como activada, verdadera o afirmativa, o dejarla sin marcar, lo que representa una opción desactivada, falsa o negativa.

Se puede añadir el atributo checked para forzar que esa casilla esté activada inicialmente.

Botones de radio

Los botones de radio se suelen utilizar cuando el usuario debe elegir sólo una opción específica de varias disponibles. Si las opciones son demasiadas, se suele optar por una lista de selección.

Para tener varios botones radio en un mismo grupo, y que sólo se active uno de ellos, el truco está en colocarle el mismo nombre en el atributo name a cada opción. Luego, en el atributo value le colocamos el valor que habrá seleccionado el usuario de haber marcado esa opción.

Un ejemplo de ambos tipos de botones:

<form name="formulario" method="post" action="http://pagina.com/send.php">
  <!-- Botones de opción -->
  Sexo: <input type="radio" name="sexo" value="H"> Hombre
        <input type="radio" name="sexo" value="M"> Mujer
  <!-- Casillas de verificación (marcada por defecto) -->
  <input type="checkbox" name="empresa" checked>
  ¿Eres autónomo o empresa?
</form>

De la misma forma que en las casillas de verificación, si queremos que un botón de radio se encuentre marcado por defecto, le añadimos el atributo checked.

Si el usuario no marca una casilla de verificación o alguna de las opciones de un botón radio, esos datos del formulario no se envían.

Manz
Publicado por Manz

Docente, divulgador informático y freelance. Escribe en Emezeta.com, es profesor en la Oficina de Software Libre de la Universidad de La Laguna y dirige el curso de Programación web FullStack de EOI en Tenerife (Canarias). En sus ratos libres, busca GIF de gatos en Internet.