MANUAL
JSP

Formularios HTML

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.

Etiqueta <FORM></FORM>

Estas etiquetas son las que delimitan el comienzo y el final de un formulario. Sus principales atributos o parámetros son:

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.

: 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 <INPUT/>

Esta etiqueta va a definir la mayoría de los diferentes elementos que va a contener el formulario. Sus principales atributos o parámetros son:

type="button | checkbox | hidden | image | password | radio | text | reset | submit":

button: Define un botón estándar. Este botón puede ser usado para diferentes acciones, pero normalmente se le da utilidad mediante JavaScript, mediante el evento "OnClick". Algunos de sus parámetros son:

name="nombre", asigna un nombre al botón, que nos puede servir para acciones con lenguaje de script.
value="valor", que define el texto que va a figurar en el botón.
disabled, desactiva el botón, de tal forma que no se produce ninguna acción cuando se pulsa, pues permanece inactivo.

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. Algunos de sus parámetros son:

name="nombre", asigna un nombre identificador único a la variable definida por el elemento. Este identificador debe ser el mismo para todos los elementos conjunto de casillas.
value="valor", define un valor posible de la variable para cada uno de casillas de verificación.
checked, marca por defecto una o varias casillas del grupo.
disabled, desactiva la casilla de verificación, por lo que el usuario no podrá marcarla.

hidden: Define un campo invisible, por lo que no se verá por pantalla. Algunos de sus parámetros son:

name="nombre", asigna un nombre identificador único al campo oculto.
value="valor", es el valor fijo que se le va a pasar al programa del servidor, ya que el usuario no puede modificarlo.
checked, marca por defecto una o varias casillas del grupo.
disabled, desactiva la casilla de verificación, por lo que el usuario no podrá marcarla.

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ó. Admite los parámetros:

name="nombre", asigna un nombre al botón para identificarlo de forma única.
src="ruta imagen", establece la ruta donde localizar la imágen. Puede ser con la url de la imagen de internet o una imagen del PC con la ruta absoluta o relativa.
width="numero", establece la anchura del botón de imágen.
heigth="numero",establece la altura del botón de imágen.

password: Define una caja de texto para contener una contraseña, por lo que el texto que introduzca el usuario aparecerá como círculos. Sus parámetros son los mismos que los explicados anteriormente con el type text.

radio: Define un conjunto de elementos de formulario de tipo circular, en el que el usuario sólo podrá marcar una de las opciones. Sus parámetros son los mismos que los explicados anteriormente con el type checkbox.

text: Sirve para introducir una caja de texto simple. Algunos de sus atributos son:

name="nombre", asigna un nombre identificador a la variable que se introduzca en la caja de texto.
maxlenght="numero", fija el número máximo de caracteres que el usuario podrá introducir en la caja de texto.
value="texto", establece el valor por defecto del texto que aparecerá inicialmente.
disabled, desactiva la caja de texto, con lo cual el usuario no podrá escribir nada dentro.
readonly, el texto que se introduzca no podrá ser borrado.
alt, asigna una pequeña descripción al texto.

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

value="valor", es el texto que aparecerá en el botón de envío.
disabled, desactiva el botón, por lo que el usuario no podrá hacer clic en él.

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. Sus atributosson los mismos que los explicados anteriormente con el type reset.

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