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 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.

Etiqueta FORM

 

action="Ruta": La manera en la que se va a manipular el formulario HTML se establece empleando el atributo action para el elemento de formulario. El atributo action se fija generalmente a una URL del programa que manipulará los datos del formulario.

method="get | post": Es también necesario especificar cómo se va a enviar el formulario a la dirección especificada por el atributo action. El atributo method indica cómo se enviarán los datos. Hay dos valores aceptables para el atributo method: get y post. Con el valor post, la información se enviara por la entrada estándar STDIO (la mas segura, pues no se pueden visualizar los datos que se envían) y con el valor get, se enviará a través de la URL.

enctype="application/x-www-form-urlencoded | multipart/form-data | text/plain": Indica el tipo de documento en formato MIME. El más usado para que lleguen el contenido a través de un mail con el método post sería "text/plain". Especifica el tipo de encriptación que se va a realizar con los datos que se van a enviar. Este atributo solamente se aplica si method es post.

target="_blank | _parent | _self | _top": Este atributo funciona igual que el homónimo de las etiquetas <A> y <FRAME> , e indica en qué ventana de una página con frames se debe mostrar el resultado del proceso de datos.

Etiqueta 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. Sus atributos son:

<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.

Etiqueta TEXTAREA

 

 Esta pareja de 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. Los atributos y valores son:

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.

wrap="valor": Justifica automáticamente el texto en el interior de la caja. Este atributo es de uso complicado.

 Según las recomendaciones si su valor es VIRTUAL se enviará todo el texto seguido, en una línea, mientras que si vale PHYSICAL el texto se enviará separado en líneas físicas, pero así como se define no lo admiten los navegadores. Usemos cual usemos de los dos el resultado es el mismo: justificación por líneas físicas, y así y todo se producen saltos de línea indeseados.

disabled: Desactiva la caja de texto.

readonly: Impide que el contenido de la caja sea modificado por el usuario.

Etiqueta 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 que obtendremos utilizando 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.