Los formularios son una de las herramientas de que disponemos a la hora de hacer nuestras páginas Web interactivas, en el sentido de que nos permiten recopilar información de la persona que ve la página, procesarla y responder a ella, pudiendo de esta forma responder adecuadamente a sus acciones o peticiones. Los formularios están formados por una serie de controles distintos, cada uno de los cuales está asociado a un tipo concreto de datos o una acción predeterminada: botones de envío y borrado de datos, listas de selección, cajas de entrada de texto, etc. El resultado de cualquier formulario es una lista de variables y valores asignados a las mismas, que tienen todos ellos un atributo en común: el nombre de su variable.

<form>...</form>

Esta etiqueta son las que delimitan el comienzo y el final de un formulario.

<input />

Esta etiqueta va a definir la mayoría de los diferentes elementos que va a contener el formulario.

Atributos:

• button: Define un botón estándar.
• checkbox: Define una o más casillas de verificación, pudiendo marcar el usuario las que desee del conjunto total. Si pinchamos una casilla con el ratón o la activamos con el tabulador y le damos a la barra espaciadora la casilla se marca; si volvemos a hacerlo, la casilla se desmarca.
• hidden: Define un campo invisible, por lo que no se verá por pantalla.
• image: Se usa más para personalizar un botón de envío de datos; es decir, su funcionalidad es análoga a la de submit, pero nos permite personalizar este elemento. Además añadirá como información en el formulario las coordenadas "x" e "y" donde el usuario lo pulsó.
• password: Define una caja de texto para contener una contraseña, por lo que el texto que introduzca el usuario aparecerá como círculos.
• radio: Define un conjunto de elementos de formulario de tipo circular, en el que el usuario sólo podrá marcar una de las opciones.
• text: Sirve para introducir una caja de texto simple.
• reset: Define un botón, que al ser pulsado por el usuario borra todos los datos que hubiera introducido en cualquiera de los campos del formulario.
• submit: Incorpora al formulario un botón de envio de datos. Cuando el usuario pulsa este botón todos los datos son enviados al programa del servidor o a la dirección de correo indicada en action.

<select>...</select>

Esta etiqueta define una entrada de datos en forma de lista despegable. El usuario podrá elegir una o varias opciones de la lista según como se especifique.

Atributos:

• name="nombre": Asigna un nombre identificador al campo. La opción elegida será asociada a este nombre cuando se envíen los datos del formulario.
• size="numero": Es el número de opciones visibles. Si número=1 el campo de selección se muestra como una lista desplegable, mientras que si el valor de número es diferente se verá como una caja con barra de desplazamiento.
• multiple: Permite elegir varias opciones de la lista. Para ello hay que mantener la tecla ctrl. (Control) pulsada mientras se van seleccionando.
• disabled: Desactiva la lista, con lo cual no se podrás seleccionar ninguna opción.

Para introducir cada una de las opciones, se utiliza la etiqueta <option>...</option>, cuyos parámetros son:

• value: Fija el valor que será asociado al parámetro name de <select> cuando se envíe el formulario. Este valor debe ser único para cada opción.
• select: Establece la opción por defecto. Si no se especifica este parámetro en ninguna opción se tomará la primera de ellas por defecto.

<textarea>...</textarea>

Estas etiquetas inserta una caja de texto de múltiples líneas, que a menudo se utiliza para introducir comentarios o datos largos en un formulario. Si no se introduce ningún texto entre ambas etiquetas la caja de texto aparecerá vacía, para que el usuario lo introduzca, pero si introducimos algún texto entre ambas este aparecerá inicialmente en la caja. Si el texto que contiene supera el espacio disponible en la caja aparecerá una barra de desplazamiento vertical.

Atributos:

• name="nombre": Asigna un nombre identificador al campo, que será asociado en el envío del formulario al texto introducido en la caja de texto.
• cols="x": Define el número de columnas visibles de la caja de texto.
• rows="y": Define el número de filas visibles de la caja de texto.
• wrap="valor": Justifica automáticamente el texto en el interior de la caja. Este atributo es de uso complicado.
• disabled: Desactiva la caja de texto.
• readonly: Impide que el contenido de la caja sea modificado por el usuario.

<label>...</label>

La etiqueta label sirve para representar el texto asociado a controles que no tienen implícitamente un valor de texto. En el caso de los botones por ejemplo su texto se saca a partir de su atributo value, que es su label implícito. Los controles que no tienen labels implícitos, como los campos de texto, radios o checkboxes por ejemplo, pueden utilizar etiquetas label para indicar el texto que les corresponde. Cada etiqueta label puede estar asociada únicamente a un control de formulario. Esta asociación se realiza mediante el atributo for, indicando el id del control de formulario al que queremos asociar el label. Es posible asociar un label con un control sin utilizar el atributo for, para ello es suficiente con que el control esté dentro de la etiqueta label. Uno de los beneficios al utilizar etiquetas label será en el manejo de listas de radiobuttons o checkboxes. Mediante la asociación de un label, el usuario no tendrá por obligación que pinchar en el control para marcarlo o desmarcarlo, podrá hacerlo también pulsando sobre el texto del label.