Formularios básicos en HTML

Controles de opción

Estos controles permiten a los usuarios seleccionar una o más opciones de una lista de valores predefinidos. Los controles de opción pueden ser presentados con diferentes estilos y mecanismos de inteacción con el usuario, dependiendo principalmente del elemento utilizado. Una lista de opciones puede declararse de tres formas: con casillas de verificación, con botones de opción y con listas.

Casillas de verificación

Una casilla de verificación es un tipo particular de opción que puede ser seleccionada o deseleccionada mediante la interacción del usuario. Esto permite a los autores recolectar información como preferencias, aceptación de términos y condiciones, categorías, o cualquier otra cosa que pueda ser respondida mediante "sí" y "no". Una cosa que este control tiene de particular es que, aún cuando puede ser declarado como parte de un grupo temático, cada casilla es independiente de todas las demás en el formulario.

Las casillas de verificación son representadas por el elemento input, cuando tiene el valor "checkbox" en el atributo type. Aquí el valor del atributo name también juega un rol, identificando a la opción del lado servidor. En el siguiente ejemplo, unas cuantas casillas de verificación han sido declaradas como parte de un grupo temático de opciones. Recuerda que esta agrupación está hecha únicamente por temática y posición; la selección de las casillas continúa siendo independiente.

<form action="../../form-result.php" target="_blank">
  <p>
    Selecciona tus intereses:<br>
    <input type="checkbox" name="peliculas"> Películas<br>
    <input type="checkbox" name="deportes"> Deportes<br>
    <input type="checkbox" name="videojuegos"> Videojuegos
  </p>
  <p><input type="submit" value="Enviar información"></p>
</form>

Selecciona tus intereses:
Películas
Deportes
Videojuegos

Un par de cosas pueden señalarse del ejemplo anterior. La primera es la falta de asiociación entre las casillas y el texto que las describe o, en otras palabras, la imposibilidad de activar una casilla al hacer click en su texto asociado. Esto es algo que puede ser fácilmente remediado convirtiendo al texto en una etiqueta (label) para el control, un tema que trataremos más adelante en este tutorial.

La segunda es acerca de cómo la información de las casillas de verificación es recivida del lado servidor. Si envías el formulario, verás que sólo las casillas seleccionadas son enviadas al agente procesador. Su valor, que depende mucho del lenguaje utilizado en el lado servidor, es irrelevante considerando que la mera presencia de la información de la casilla está indicando, por sí sola, su estado de activación.

Botones de opción

Mientras que las casillas de verificación son independientes y pueden ser declaradas por sí mismas, los botones de opción necesitan ser agrupados a fin de tener sentido. Los grupos de botones de opción tienen una particularidad que juega un rol importante en su conducta: sólo una opción puede ser seleccionada por vez en todo el grupo. Esto significa, entre otras cosas, que cuando seleccionas una opción, la opción que estaba anteriormente seleccionada se deselecciona.

Un botón de opción también se declara con el elemento input, pero con el valor "radio" en su atributo type. Aquí las cosas se vuelven un poco diferentes a como eran con las casillas de verificación, debido a que el valor del atributo name necesita ser compartido por todas las opciones en un mismo grupo. En otras palabras, este es el mecanismo que se requiere utilizar para crear un grupo de botones de opción.

Pero entonces, ¿dónde está el valor que le dice al agente procesador qué opción ha sido seleccionada? La respuesta a esta pregunta está en el atributo value. Ya que el propósito de este atributo es identificar a las opciones de un grupo, su valor debe ser diferente para cada opción.

En el siguiente ejemplo un grupo de botones de opción ha sido declarado para conformar un grupo donde sólo una opción puede ser elegida, algo que tiene mucho sentido en este contexto. Para este propósito, todos los botones comparten el mismo nombre (name) y tienen, cada uno, un valor diferente (value).

<form action="../../form-result.php" target="_blank">
  <p>
    Ingresos:<br>
    <input type="radio" name="ingresos" value="menosde1000"> Menos de than $1,000.00<br>
    <input type="radio" name="ingresos" value="de1000a5000"> De $1,000.00 a $5,000.00<br>
    <input type="radio" name="ingresos" value="masde5000"> Más de $5,000.00
  </p>
  <p><input type="submit" value="Enviar información"></p>
</form>

Ingresos:
Menos de than $1,000.00
De $1,000.00 a $5,000.00
Más de $5,000.00

Aquí puedes ver nuevamente la falta de interacción entre el texto y los botones de opción. Este problema será resuelto más adelante en este tutorial.

Listas

Una lista de opciones es un control que puede asemejarse, en cuanto a su mecánica, a cada uno de los controles analizados previamente, dependiendo de la presencia del atributo booleano multiple. Este atributo cambia radicalmente la conducta de una lista, haciendo posible la selección de una sola opción a la vez o de muchas.

La estructura de una lista está compuesta, principalmente, por dos elementos: select, que actúa como contenedor para las opciones; y option, que representa una de las muchas opciones que el control puede presentar.

Cuando el atributo multiple se encuentra ausente, un control de lista se comporta como un grupo de botones de opción, donde sólo una opción puede ser seleccionada por vez. El próximo ejemplo refleja esta conducta, lo que encaja perfectamente con el propósito del campo.

Si el atributo size tiene un valor de "1" y el atributo multiple se encuentra ausente, los navegadores habitualmente muestran a este control como una lista desplegable. En cualquier otro caso, el control toma la forma de una caja desplazable.

<form action="../../form-result.php" target="_blank">
  <p>
    Género:
    <select name="genero">
      <option>Masculino</option>
      <option>Femenino</option>
    </select>
  </p>
  <p><input type="submit" value="Enviar información"></p>
</form>

Género:

En el ejemplo anterior, puedes ver que lo que se envía al servidor es el contenido de la opción seleccionada. Pero los autores pueden cambiar esta conducta si lo creen necesario, declarando el atributo value para la opción (option). Cuando este atributo está presente, su valor es enviado al agente procesador en lugar del contenido del elemento.

Ahora, cuando el atributo multiple está presente, la lista se comporta como un conjunto de casillas de verificación, donde no solamente una sino muchas opciones pueden ser seleccionadas al mismo tiempo. Esta configuración requiere que un par de corchetes sea anexado al valor que el autor elija para el atributo name. Si este requerimiento no se cumplimenta, los agentes procesadores sólo recibirán la primera opción seleccionada.

El siguiente ejemplo muestra una lista de opciones que pueden ser seleccionadas sin restricciones. También hace uso del atributo value en las opciones, para evitar el uso de valores innecesariamente largos durante el procesamiento de datos en el lado servidor.

Cuando el atributo multiple está presente, la mayoría de los navegadores cambian la representación del control a una caja deslizable, independientemente del valor que el atributo size contenga.

Para seleccionar más de una opción en una lista de opciones múltiple, los usuarios pueden hacer click sobre sus opciones mientras mantienen presionada la tecla CTRL. Un rango también puede ser seleccionado utilizando la tecla SHIFT.

<form action="../../form-result.php" target="_blank">
  <p>
    Selecciona categorías:<br>
    <select multiple name="categorias[]">
      <option value="arte">Arte y entretenimiento</option>
      <option value="tv">Televisión y películas</option>
      <option value="ninos">Niños y adolescentes</option>
      <option value="hazlotu">Hazlo tu mismo</option>
    </select>
  </p>
  <p><input type="submit" value="Enviar información"></p>
</form>

Selecciona categorías:

Prev1234Próx