Formularios con JavaScript

Tal vez sean los formularios el ámbito donde con más frecuencia se usa JavaScript y por ello le dedicamos estas líneas.

En una página web, los formularios nos permiten solicitar información al visitante y procesarla. La solicitud de esa información se hace mediante campos, cada uno de los cuales tiene asociada una variable. Es decir, cada dato que obtenemos con un formulario, se compone de la pareja campo/variable.

Cumplimentados esos datos por el visitante, las parejas de campo/variable son enviadas a una dirección URL donde se procesan. Para su proceso suele usarse un programa externo en algún lenguaje de programación como PERL, C++ o Visual Basic, son los denominados CGI (Common Gateway Interface). Los datos también pueden enviarse a una dirección de correo electrónico.

Todas las etiquetas y directivas de estas explicaciones y sus ejemplos han sido adaptadas en su formato al estándar XHTML 1.0

Aplicaciones para los formularios

Los formularios se pueden usar ante cualquier necesidad de comunicación entre el responsable de una página web y el visitante o usuario de la misma.

Se pueden crear formularios para:
- Solicitar presupuestos o realizar compras.
- Cumplimentar fichas de admisión o suscripción.
- Solicitud de todo tipo de información.
- Envío de comentarios, sugerencias, opiniones.
- Libros de Visitas.
- Votaciones, enviar anuncios, tramitar "currículos", etc.

Los ejemplos más cotidianos los tenemos en buscadores como Google, Altavista, Yahoo, etc., en los que indicamos el término o frase a buscar y, opcionalmente, el idioma, la zona geográfica, tipo de documento,... Toda esa información es tratada por el motor de búsqueda que nos facilitará las páginas existentes en su base de datos que se ajusten a nuestra petición.

Los formularios incluidos en esta página lo son a título de ejemplo y su único efecto es provocar el regreso al inicio de página.

Declaración de un formulario

La inclusión o declaración de un formulario se realiza entre las directivas
<form></form>
y en su interior se indican el resto de objetos (campos, variables) que componen el formulario. Una misma página web puede contener diferentes formularios con propósitos diferentes, pero no se pueden incluir formularios dentro de otros formularios ni cruzarse las directivas.

La sintaxis básica de un formulario es:
<form action="URL" method="transmisión"> objetos </form>

action="URL"
Obligatorio. URL del CGI o un programa del servidor que tratará las variables enviadas con el formulario. En los ejemplos de este artículo, se supone que las variables se enviarán por correo, por lo que action="mailto:correo@electronico.net"

method="post" o "get"
Obligatorio. Método, formato o protocolo de envío de las variables al programa que las tratará. Puede ser:

get . Método por defecto. Efectúa peticiones de información por lo que no se producen cambios en el documento destino (p.e.: consulta a una base de datos). El envío se hace incluido en la URL de petición en forma de variable de entorno (QUERY_STRING). No se pueden enviar más de 255 caracteres.

post [enctype=" ... "]. Envía información, produciendo la modificación del documento de destino (p.e.: al enviar por correo las variables).
Con post el envío se hace por la entrada estándar (stdin). Tanto el contenido de QUERY_STRING como el de stdin (STandarD INput) es la lista de variables (los campos del formulario) y los valores introducidos por el usuario. Puede transmitir grandes cantidades de datos. La cadena de caracteres enviada se codifica como "application/x-www-form-urlencoded".

[enctype] es el mecanismo o sistema utilizado para codificar el contenido del formulario.

name="nombre del formulario"
Recomendado si se utiliza JavaScript. Permite asignar un nombre al formulario para someterlo a alguna función de JavaScript. Por ejemplo comprobar que los campos necesarios están cumplimentados y mostrar un mensaje en caso contrario.

En páginas con doctype XHTML 1.0 o XHTML1.1 debe sustituirse name= por id= y todas las etiquetas (action, ...) deben escribirse en minúsculas.

Campos de entrada/captura de datos

Para la entrada/captura de datos en las variables se utiliza la directiva
<input type="tipo">
siendo type uno de los diversos tipos de elementos aceptados por un formulario.

El único obligatorio es type="submit" que muestra el botón de enviar. Aunque no es obligatorio, sí es recomendable type="reset" que permite borrar los datos introducidos y corregir errores antes de enviar el formulario.

Dentro de input pueden indicarse bastantes parámetros (ver más abajo). El único obligatorio (salvo para type="submit" y type="reset") es el parámetro name que guarda el nombre de la variable asociada a cada campo, y es que sin variables no hay campos y sin campos no hay formulario.

Atendiendo a sus prestaciones o funcionalidades, los campos de entrada pueden clasificarse en:

Cajas de texto
Contraseñas
Campos ocultos
Casillas de verificación
Botones de selección (radio)
Botones (submit / reset )
Imágenes
Áreas de texto
Listas. Normales y desplegables

Cajas de texto (text)

<input type="text" name="nombre_campo" />
Crea un campo de texto de una sola línea.
- El texto introducido se puede cambiar o editar antes de enviarlo.
- De no indicarse ningún otro, es el elemento por defecto para type.
- Cuando el formulario tiene un único campo de texto, pulsado la tecla [Enter] se provoca su envío, como si pulsásemos el botón de "enviar".

* Cláusulas:
maxlength="número"
Número máximo de caracteres que aceptará el campo. Por defecto ilimitado.
size="número"
Número máximo de caracteres que se mostrarán en pantalla. Obviamente "size" (el tamaño del campo) será igual o menor que "maxlength" (el tamaño del contendido del campo).
value="texto"
Valor o texto por defecto del campo. Normalmente será " " (campo vacío).

* Ejemplo 1
Usuario: <input type="text" name="usuario" size="10" maxlength="20" value="" />

* Ejemplo 2 (campo value con un valor por defecto)
Usuario: <input type="text" name="usuario" size="10" maxlength="20" value="Escriba su nombre" />

Contraseñas (password)

<input type="password" name="nombre_campo" />
El campo será una palabra de paso, mostrando asteriscos (*) en lugar de los caracteres escritos.
Si se envía un formulario con contraseñas con el método GET, el contenido de la contraseña es visible en la parte que acompaña a la dirección de envío (seguido al carácter ?). Para mantener la confidencialidad, debe utilizarse el método POST.
Pueden usarse las mismas cláusulas opcionales que para type="text".

* En el siguiente ejemplo, escribe lo que quieras (máximo 10 caracteres) para ver los asteriscos.
Palabra de paso: <input type="password" name="pp" size="10" maxlength="10" />

Campos ocultos (hidden)

<input type="hidden" name="nombre_campo" value="valor" />
Campo oculto y no modificable por el usuario. Siempre se envía conteniendo el valor asignado en value.
Suele usarse para el mantenimiento de información de control, no accesible ni modificable por el usuario pero que se remite al servidor, pudiendo ser utilizada en los procesos de tratamiento en el navegador (con JavaScript) o en el servidor.

* Cláusulas:
value="texto"
Valor o texto por defecto, que aparece rellenando el campo al ser presentado.

* En el siguiente ejemplo observa la última línea, se envía un campo oculto con el valor "Página 6085".

Introduzca sus datos personales:
Nombre <input type="text" name="nombre" size="30" maxlength="30" />
Dirección <input type="text" name="direccion" size="30" maxlength="30" />
Teléfonos <input type="text" name="telefono1" size="13" maxlength="15" />
<input type="text" name="telefono2" size="13" maxlength="15" />
<input type="hidden" name="control" value="Página 6085" />

Casillas de verificación (checkbox)

<input type="checkbox" name="nombre" value="valor" [checked="checked"] />
Las casillas de verificación son unos pequeños cuadros, a la izquierda del texto o etiqueta, que el usuario puede marcar o desmarcar. Pueden marcarse una o varias casillas.

De las casillas sin marcar no se envía información al servidor. Si está marcada, se envía tanto el nombre de la variable como el valor capturado. Se pueden utilizar varias casillas formando un grupo, para lo que pondremos a todas ellas el mismo nombre en name. De esta manera es posible enviar la misma variable con varios valores (p.e.: variable "pais" con varios valores: España, USA,...).

* Cláusulas:
value=" "
Valor o texto que tendrá el campo al ser marcado. Si no se especifica, o la casilla no se marca, se asume " " (campo vacío).
checked="checked"
Establece la casilla como marcada por defecto.

* Ejemplo:
Sistemas operativos que conoce:
<input type="checkbox" name="unix" />Unix,
<input type="checkbox" name="dos" checked="checked" />MS-DOS,
<input type="checkbox" name="mac" />MacOS

Botones de selección (radio)

<input type="radio" name="nombre" value="texto" [checked=checked] />
Los botones de selección son unos pequeños círculos a la izquierda de un texto o etiqueta, que el usuario puede marcar o desmarcar. Sólo puede estar marcado uno de estos botones.

Normalmente son dos o más ya que son auto excluyentes. Se marca uno u otro. Si deseamos disponer de varios botones con respuestas a una misma pregunta (p.e.: sistema operativo: unix, dos, mac,...), le pondremos el mismo nombre en name.

* Cláusulas:
value="texto"
Se ha de establecer un value diferente para cada botón, aunque el name de los botones sea el mismo para todos ellos (formando un mismo grupo).
checked="checked"
Establece el botón como marcado por defecto.

* Ejemplo:
Sistema Operativo que mejor conoce:
<input type="radio" name="so" value="unix" />Unix 
<input type="radio" name="so" value="dos" />MS-DOS o Windows 
<input type="radio" name="so" value="mac" checked="checked" />MacOS 

Botones (submit / reset )

<input type="submit" value="Pulsar para enviar el formulario" />
<input type="reset" value="Borrar el contenido de los campos" />
Los botones no son campos de información, sino que, al pulsarlos, provocan la ejecución de determinadas operaciones.

Existen tres tipos de botones: SUBMIT, RESET y de usuario.
- submit envía la información de todos los campos al programa indicado en el atributo action de la directiva <form>.
- reset borra o elimina el contenido de todos los campos
- Las acciones de los botones de usuario son las establecidas por el diseñador de la página.

* Cláusulas:
type=" "
Debe indicarse submit o reset
value="título del botón"

* Ejemplo:
Ya puede <input type="submit" value="Enviar" /> o
<input type="reset" value="Borrar" /> el formulario

Imágenes (image)

<input type="image" name="nombre" src="fichero_imagen" />
Provoca que el navegador muestre una imagen sensible al ratón. Al pulsar sobre la imagen se envía la información del formulario al destino indicado, de forma análoga al botón submit por lo que éste ya no es necesario en el formulario.

Junto con la información del formulario, se añaden las coordenadas "x" e "y" con la posición exacta del ratón cuando se ha pulsado sobre la imagen.

* Cláusulas:
align=" "
Alineación de la imagen (bottom, top, left, right o middle).
src=" "
Ruta y nombre del fichero de la imagen a mostrar.

* Ejemplo:
<input type="image" src="6086-formularios.gif" name="imagen" />
Pulsar sobre la imagen para ir al inicio de página

Áreas de texto

<textarea name="nombre" cols="columnas" rows="filas" />Texto inicial</textarea>
Inserta en el formulario un campo de texto de múltiples líneas, habitualmente para comentarios o texto libre. Por defecto son 4 líneas de 40 caracteres cada una de ellas.

* Cláusulas:
name=" "
Nombre del campo o área de texto.
cols=" "
Número de columnas de texto (caracteres) visibles por cada línea.
rows=" "
Número de filas (líneas) de texto visibles.

* Ejemplo:
¿Desea efectuar algún comentario?
<textarea name="comentarios" cols="40" rows="3">Sus comentarios ...</textarea>

Listas. Normales y desplegables

<select name=" " size=" " align=" " width=" " height=" " multiple="multiple">
<option selected="selected">Opción seleccionada por defecto</option>
<option>Texto de la opción 2</option>
</select>

Las listas son campos que despliegan un conjunto de opciones, para elegir una o varias de entre ellas. Se diferencian de las casillas de verificación o de los botones de selección, en que las listas agrupan las opciones en un solo cuadro.

Las listas pueden ser:
Listas normales
Muestran un recuadro con la lista de opciones en su interior.
Listas desplegables
Muestran una caja de texto con un botón a la derecha que al pulsarse despliega la lista.

Al servidor que trate el formulario, se envía el par de valores constituido por el nombre indicado en select y el valor de la option seleccionada por el usuario. Con el atributo multiple se envían tantos pares de valores como opciones haya seleccionadas.

* Cláusulas:
size="numero"
Con size="1" se genera una lista desplegable, en la que sólo se ve una opción. Es preciso desplegar la lista para tener acceso a las restantes.
Con size="x" se genera una lista normal, con x opciones visibles. Si el número de las opciones así visibles es inferior al total de opciones de la lista, se dispone de una barra de desplazamiento vertical a la derecha para acceder a las restantes.

multiple="multiple"
Permite la selección simultánea de varias opciones de la lista, pulsando la tecla [Control] y marcando cada una de las opciones interesadas. Puede ser interesante dar a size un valor mayor que uno, para facilitar esta selección múltiple.

selected="selected"
Establece que una opción quede seleccionada por defecto. De no especificarse ninguna, se marcará por defecto la primera opción de la lista.
En las listas con el atributo multiple, pueden haber varias option marcadas como selected.

value="valor"
Establece que valor tomará el campo si se selecciona esta opción. Sin este atributo, como value se toma el contenido del elemento option. Así, en el siguiente ejemplo, si el usuario selecciona Andorra recibiremos AND, si selecciona Barcelona recibiremos Barcelona.

* Ejemplo de desplegable con una línea visible:
Seleccione un destino para sus vacaciones:
<select name="lista_desplegable" size="1">
<option value="AND"> Andorra </option>
<option> Baix Llobregat </option>
<option> Barcelona </option>
<option> Begues </option>
<option> Castelldefels </option>
<option> Catalunya </option>
<option> Gavà </option>
<option selected="selected"> Lista desplegable </option>
</select>

* Ejemplo de desplegable con 3 líneas visibles:
Seleccione un destino para sus vacaciones:
<select name="lista_normal" size="3">
<option selected="selected"> Lista normal </option>
<option value="AND"> Andorra </option>
<option> Baix Llobregat </option>
<option> Barcelona </option>
<option> Begues </option>
<option> Castelldefels </option>
<option> Catalunya </option>
<option> Gavà </option>
</select>