La base del formulario es el elemento
<FORM>, y es el que
define una zona de la página como formulario. En una página puede haber
varias zonas definidas como formulario, en cuyo caso es conveniente
darles distintos nombres a cada uno. Dentro de este elemento, que es un
objeto, se insertan otros elementos, que a su vez son sub-objetos del
objeto FORM, que son los que realmente dibujan en pantalla los
componentes del formulario. Se verá con detalle el concepto de objeto en
las secciones de programación de esta guia, ya que ahora no lo
necesitamos. Hay tres clases de estos sub-objetos:
- <INPUT>
- Campos de entrada por teclado.
- Botones de selección.
- Casillas de marca.
- Botones de proceso.
- Botones de inicialización (reset).
- Imágenes sensibles al ratón.
- <SELECT>
- Listas desplegables de valores.
- Listas fijas de valores.
- <TEXTAREA>
- Ventanas de escritura libre.
Este sería el más elemental de los formularios, con sólo un campo y un botón de envío:
Analicemos cómo se escribe:
<FORM NAME="MI_FORMULARIO" METHOD="POST"
ACTION="http://miserver.midominio.mipais/cgi-bin/test2-cgi">
<INPUT NAME="campo1">
<INPUT TYPE="submit" VALUE="Procesar"></FORM>
En la primera línea vemos el elemento de definición de formulario:
<FORM>. Va acompañado de tres atributos:
NAME, METHOD y
ACTION.
NAME, evidentemente, se refiere al nombre que se le asigne al
formulario. No es obligatorio, pero si el formulario va a ser utilizado
en páginas ASP, PHP, o simplemente en VBScript o JavaScript, se
necesitará un nombre, ya que el formulario será considerado como un
objeto.
METHOD se refiere al método que emplearemos para enviar los datos al servidor, y pueden ser dos:
POST y
GET.
El optar por uno u otro obedece a complejas cuestiones de programación
basadas en la máxima longitud de registro que puede enviarse; cada uno
usa un canal de salida distinto. El que soporta más longitud es POST, y
será el que utilicemos en casi todos los ejemplos. Si el formulario
solamente se utiliza para llamar a otras páginas, se utiliza el método
GET, y si se trata de envio de datos POST.
Echale un vistazo a la respuesta del programa
test2-cgi de la página anterior. Fíjate en las variables
QUERY_STRING e
INPUT. Por la primera llegarán los datos cuando se utilice
METHOD=GET y por la segunda cuando es
POST el método elegido.
ACTION se refiere a la acción que queremos que ejecute el formulario en un servidor http o en local. Con el valor del ejemplo
ACTION="http://miserver.midominio.mipais/cgi-bin/test2-cgi" se le está indicando que ejecute un programa llamado
test2-cgi que está en el directorio
/cgi-bin del servidor http
miserver.midominio.mipais cuya respuesta será similar a la que hemos visto en la página de
introducción a los formularios.
Además de enviar datos a un servidor,
ACTION también puede realizar una acción en local, por ejemplo traer una página:
Se escribe:
<FORM METHOD="POST" ACTION="indice.htm">
......
</FORM>
En este caso el formulario funcionaría igual que un link.
Otra cosa que puede hacer
ACTION, y que además tiene la ventaja
de que no sería preciso diseñar un CGI, es enviar un e-mail (correo
electrónico) a un usuario o a una lista de usuarios. Los datos enviados
por el formulario, tendrán la forma que ya conocemos, pero una vez
recibidos por esta vía, pueden ser tratados con programas de edición de
texto, y convertidos al formato que se quiera.
Se escribe:
<FORM METHOD="POST" ACTION="mailto:mi-usuario@miservidor-e-mail">
......
</FORM>
Si no quieres complicarte la vida con descodificaciones (depende de lo
que se vaya a hacer con los datos recibidos), el navegador puede
remitirlos con un formato más sencillo y ya descodificado. Para ello
sólo hay que añadir el parámetro
ENCTYPE con el valor
TEXT/PLAIN. Se escribe así:
<FORM METHOD="POST" ACTION="mailto:mi-usuario@miservidor-e-mail"
ENCTYPE="TEXT/PLAIN">
......
</FORM>
Resumiendo: sin poner ningun parámetro al elemento
ACTION los datos te llegarán así:
CAMPO1=Esto+es+una&CAMPO2=demostracion+de+formularios
y poniendo
ENCTYPE="TEXT/PLAIN" así:
CAMPO1=Esto es una
CAMPO2=demostracion de formularios
Al igual que con el elemento <A> es posible hacer que el asunto
(subject) del e-mail se reciba con el texto que quieras, pero omitiendo
la parte correspondiente al cuerpo (body) del mismo, ya que en este caso
el contenido del e-mail son los campos del formulario:
<FORM METHOD="POST" ACTION=
"mailto:mi-usuario@miservidor-e-mail?&subject=asunto de prueba"
ENCTYPE="TEXT/PLAIN">
......
</FORM>
Esto funcionará siempre que en la máquina del cliente haya instalado
algun programa que permita enviar correo electrónico, si no es así hay
que recurrir a un programa CGI o de otro tipo en el servidor que se
encargue de hacerlo. No es buena idea presuponer que todo el mundo tiene
un cliente de correo instalado en su máquina.
El elemento INPUT
INPUT sin ningún atributo define por defecto una ventana de escritura de 20 caracteres de longitud por una línea de ancho:
Se escribe:
<FORM> <INPUT> </FORM>
<INPUT> admite varios atributos:
SIZE define la longitud de la ventana de texto.
MAXLENGTH define la máxima longitud de la cadena que se puede escribir dentro de la ventana.
NAME define el nombre de la ventana (que en realidad es un campo
dentro del registro, que en conjunto, es el formulario). Si escribes:
<FORM> <INPUT SIZE=10 MAXLENGTH=10 NAME="campo1"></FORM>
Como puedes comprobar, sólo se pueden escribir 10 caracteres dentro de
la ventana, que también es de longitud 10. No es obligatorio que
concidan ambos valores, puedes definir la ventana al valor que quieras y
la longitud de la cadena puede ser mayor o menor.
VALUE sirve para que la ventana aparezca con un valor predeterminado, y no vacía como hace por defecto:
Se escribe:
<FORM> <INPUT VALUE="HOLA"> </FORM>
El valor puede ser modificado o barrado por el usuario.
READONLY Sirve para que el valor de la ventana, que contiene un valor predeterminado, no pueda ser modificado por el usuario.
Se escribe:
<FORM> <INPUT VALUE="HOLA" READONLY> </FORM>
No funciona en versiones antiguas de los navegadores.
TYPE=TEXT Es el valor por defecto de TYPE. Puede omitirse.
TYPE=PASSWORD para que el valor predeterminado de la ventana esté en formato oculto:
Se escribe:
<FORM> <INPUT TYPE="PASSWORD" VALUE="HOLA"> </FORM>
TYPE=HIDDEN define que el valor predeterminado de la ventana y la ventana misma estén en formato oculto:
Se escribe:
<FORM> <INPUT TYPE="HIDDEN" VALUE="HOLA"> </FORM>
Esta opción se utiliza cuando es necesario enviar un valor fijo al
servidor, pero no se desea que el usuario intervenga o que lo vea.
CUIDADO, esto no es un formato encriptado, viendo el documento fuente se
puede saber el valor de la ventana.
TYPE=SUBMIT para generar un botón que al ser pulsado cierra la
captura de datos del formulario y procede a ejecutar lo definido en el
atributo ACTION que ya conocemos.
Se escribe:
<FORM METHOD="POST" ACTION="http://miserver.midominio.mipais/cgi-bin/test2-cgi">
<INPUT NAME="campo1">
<INPUT TYPE="SUBMIT" VALUE="Procesar"></FORM>
VALUE puede acompañar a SUBMIT , y en este caso sirve para
definir el texto que queremos que tenga el botón en su interior. Si se
omite, por defecto el visualizador le da el valor "Submit Query".
Existe otro tipo llamado
TYPE=BUTTON que genera un botón igual al
generado por el tipo submit, pero que no realiza ninguna acción; es
simplemente un botón "muerto" en cuanto a acciones directas. Suele
utilizarse para asociarle instrucciones en JavaScript o VBScript
mediante el evento
onClick.
Se escribe:
<FORM METHOD="POST" ACTION="http://miserver.midominio.mipais/cgi-bin/test2-cgi">
<INPUT NAME="campo1">
<INPUT TYPE="BUTTON" VALUE="No hace nada"></FORM>
TYPE=RESET para generar un botón que al ser pulsado inicializa todos los componentes del formulario.
Se escribe:
<FORM METHOD="POST" ACTION="http://miserver.midominio.mipais/cgi-bin/test2-cgi">
<INPUT NAME="campo1">
<INPUT TYPE="RESET" VALUE="Inicializar"></FORM>
VALUE puede acompañar a RESET , y en este caso sirve para
definir el texto que queremos que tenga el botón en su interior. Si se
omite, por defecto el visualizador le da el valor "Reset".
TYPE=FILE
Este es un nuevo tipo que sólo funciona con Netscape 3.0 o superior, y
sirve para enviar un fichero a una máquina remota (hacer FTP), pero no
funciona solo, necesita de ciertos acompañantes que hacen su uso un poco
más complicado:
Aquí hay que echar mano de un atributo parametrizado de <FORM>:
ENCTYPE="multipart/form-data"
para generar un botón que permitirá buscar un fichero en nuestra
máquina, ponerlo en una ventanita de entrada como las ya conocidas (por
tanto tanbién se puede escribir directamente el nombre del fichero en
lugar de buscarlo) y junto con un botón tipo submit enviar el fichero.
Se escribe:
<FORM enctype="multipart/form-data"
ACTION="ftp://miservidor/" METHOD="POST">
Enviar el fichero:
<INPUT NAME="mifichero" TYPE="FILE">
<INPUT TYPE="SUBMIT" VALUE="Enviar fichero"></FORM>
el botón generado aparece con el texto "Browse.." y no sirve de nada
añadirle el parámetro VALUE para darle otro nombre, como se puede hacer
con el botón de tipo submit.
En este ejemplo se haría una conexión al servicio FTP general de la
máquina remota, pero se puede hacer a un directorio en particular de un
usuario concreto. Sólo habría que cambiar la línea
ACTION="ftp://miservidor/" METHOD="POST">
y escribir:
ACTION="ftp://miusuario@miservidor/" METHOD="POST">
Otra forma más directa de hacer un FTP en las dos direcciones, es desde
la ventana "Location" del visualizador. La sintaxis de los parámetros de
ACTION son válidos en esa ventana.
Por supuesto, todo esto si no tienes cuenta y permiso de escritura en la máquina remota, no sirve para nada...
Como ya se ha dicho antes, el atributo
ACTION es capaz de enviar
el contenido del formulario por correo electrónico, pero no sólo es
capaz de enviar el formulario: también puede adjuntar al e-mail un
fichero cualquiera. Lo único que hay que hacer es añadirle un
instrucción como la que acabamos de ver para el FTP. Así:
<FORM enctype="multipart/form-data"
ACTION="mailto:mi-usuario@miservidor-e-mail/" METHOD="POST">
Adjuntar el fichero:
<INPUT NAME="mifichero" TYPE="FILE">
<INPUT TYPE="SUBMIT" VALUE="Adjuntar fichero"></FORM>
TYPE=IMAGE hace que el visualizador presente una imagen que es
sensible al ratón. Lo que el formulario envía al servidor es un registro
cuyos campos son el nombre definido para la imagen seguido de los
parámetros
.x=n .y=n donde
n son los números de las coordenas
x y del punto en el que estaba el ratón en el momento del envío. Para presentar la imagen se utiliza el atributo
SRC del elemento IMG. Este sería un ejemplo de respuesta:
imagen.x=99&imagen.y=15
Prueba a pulsar en cualquier parte de esta imagen:
Se escribe:
<FORM METHOD="POST" ACTION="http://miserver.midominio.mipais/cgi-bin/test2-cgi">
<INPUT TYPE=IMAGE NAME="imagen" SRC="sugeren.gif">
</FORM>
Los formularios que utilicen este tipo de recursos pueden prescindir del
tipo SUBMIT, ya que el formulario se cierra con la imagen.
TYPE=RADIO genera botones circulares que permiten seleccionar un valor predeterminado o activar una opción
Se escribe:
<FORM METHOD="POST" ACTION="http://miserver.midominio.mipais/cgi-bin/test2-cgi">
<INPUT TYPE="SUBMIT" VALUE="Procesar">
<INPUT TYPE="RESET" VALUE="Inicializar">
Clase A
<INPUT TYPE="RADIO" NAME="clase" VALUE="A">
Clase B
<INPUT TYPE="RADIO" NAME="clase" VALUE="B"></form>
En este ejemplo, los botones permiten seleccionar la clase A, la clase B
o ninguna de las dos. Si se desea que por defecto un valor esté
seleccionado, por ejemplo clase B, hay que añadir el parámetro
CHECKED después del valor:
... VALUE="B" CHECKED></form>
TYPE=CHECKBOX genera casillas de marca que permiten seleccionar un valor predeterminado o activar una opción
Se escribe:
<FORM METHOD="POST" ACTION="http://miserver.midominio.mipais/cgi-bin/test2-cgi">
<INPUT TYPE="SUBMIT" VALUE="Procesar">
<INPUT TYPE="RESET" VALUE="Inicializar">
Clase A
<INPUT TYPE="CHECKBOX" NAME="clase" VALUE="A">
Clase B
<INPUT TYPE="CHECKBOX" NAME="clase" VALUE="B"></form>
En este ejemplo, las casillas de marca permiten seleccionar la clase A,
la clase B, ninguna, o las dos. Si se desea que por defecto un valor
esté seleccionado, por ejemplo clase B, hay que añadir el parámetro
CHECKED después del valor:
... VALUE="B" CHECKED></form>
El elemento SELECT
SELECT sin ningún atributo define por defecto una lista desplegable de toda la pantalla de alto y una columna de ancho:
Se escribe:
<FORM> <SELECT> </SELECT> </FORM>
Como evidentemente esto no es muy práctico, hay que parametrizar el
elemento. En primer lugar se le da nombre, ya que éste es un campo más
del formulario, la diferencia es que no hay que escribir en él sino
escoger un valor de los que nos muestre al desplegarlo, se usará el
atributo
NAME, y para entrar valores en la lista se usa el atributo
OPTION.
Se escribe:
<FORM METHOD="POST" ACTION="http://miserver.midominio.mipais/cgi-bin/test2-cgi">
<INPUT TYPE="SUBMIT" VALUE="Procesar">
<INPUT TYPE="RESET" VALUE="Inicializar">
<SELECT NAME="lista1">
<OPTION>Valor 1
<OPTION>Valor 2
<OPTION>Valor 3
</SELECT>
</FORM>
Se deben tener en cuenta varias cosas respecto a SELECT:
La longitud de la ventana de selección se autoajusta al valor más largo de la lista.
La ventana de selección, por defecto, muestra una línea, si se quieren mostrar más se utilizará el atributo
SIZE.
Se debe procurar que los contenidos de los campos sean lo más cortos
posibles; una excesiva longitud implica mayor tráfico por la red, pero
se deben construir las listas de forma clara, y que resulten de fácil
lectura al usuario, lo que puede aumentar la longitud de los valores.
Para enviar un valor diferente del que aparece en la lista, se utiliza
el parámetro
VALUE asociado al atributo
OPTION. Prueba con el valor 5 de la siguiente lista:
Se escribe:
<FORM METHOD="POST" ACTION="http://miserver.midominio.mipais/cgi-bin/test2-cgi">
<INPUT TYPE="SUBMIT" VALUE="Procesar">
<INPUT TYPE="RESET" VALUE="Inicializar">
<SELECT NAME="lista1" SIZE=3>
<OPTION>Valor 1
<OPTION>Valor 2
<OPTION>Valor 3
<OPTION>Valor 4
<OPTION VALUE="Valor 5">Este es el Valor 5
<OPTION>Valor 6
<OPTION>Valor 7
</SELECT>
</FORM>
Esto siginifica que cuando selecciones "Este es el valor 5" en realidad lo que se envía al servidor es "Valor 5".
Con las listas desplegables es obligatorio seleccionar siempre un valor,
y si no hay ninguno seleccionado, por defecto el visualizador enviará
el primer valor de la lista.
Se puede hacer que haya un valor preseleccionado añadiendo el parámetro
SELECTED al atributo OPTION, y si se quiere permitir más de una selección, se pondrá el atributo
MULTIPLE al elemento SELECT. Para seleccionar y deseleccionar hay que atenerse a las normas de Windows.
Se escribe:
<FORM METHOD="POST" ACTION="http://miserver.midominio.mipais/cgi-bin/test2-cgi">
<INPUT TYPE="SUBMIT" VALUE="Procesar">
<INPUT TYPE="RESET" VALUE="Inicializar">
<SELECT NAME="lista1" MULTIPLE SIZE=3>
<OPTION>Valor 1
<OPTION SELECTED>Valor 2
<OPTION>Valor 3
<OPTION>Valor 4
<OPTION>Valor 5
<OPTION>Valor 6
<OPTION>Valor 7
</SELECT>
</FORM>
Puede ocurrir que interese agrupar los valores de la lista desplegable, a
fin de que resulte más fácil encontrar la opción adecuada, sobre todo
si la lista es larga. Para ello se puede utilizar el parámetro
optgroup. Por ejemplo:
Y se escribe:
<select name="coches">
<option selected value="0">Ninguno
<optgroup label="Coches de lujo">
<option value="1">Rolls Royce
<option value="2">Ferrari
<option value="3">Mercedes
</optgroup>
<optgroup label="Coches normales">
<option value="4">Renault
<option value="5">Peugeot
<option value="6">Seat
</optgroup>
</select>
El elemento TEXTAREA
Este elemento, como su nombre indica, permite definir un área de texto
en la pantalla en la que podemos escribir cualquier cosa. Se debe
escribir ya parametrizada en cuanto a dimensiones, con los atributos
ROWS (líneas) y
COLS
(COLUMNAS). No tiene otros atributos o posibles variantes. Por
supuesto, para que sea operativo, deberá ir acompañado de los
componentes necesarios para enviar e inicializar.
Se escribe:
<FORM METHOD="POST" ACTION="http://miserver.midominio.mipais/cgi-bin/test2-cgi">
<INPUT TYPE="SUBMIT" VALUE="Procesar">
<INPUT TYPE="RESET" VALUE="Inicializar">
<TEXTAREA NAME="texto1" ROWS=5 COLS=40 ></TEXTAREA>
</FORM>
Aunque no es habitual, dentro de un área de texto puede haber un
contenido por defecto (que puede ser borrado o modificado por el
usuario). Para ello simplemente se escribirá el texto entre
<TEXTAREA> y
</TEXTAREA>. Así:
<TEXTAREA NAME="texto1" ROWS=5 COLS=40>
Contenido del area de texto
</TEXTAREA>
El tratamiento de los datos recibidos en el servidor desde los
formularios requiere conocer la tabla de conversión hexadecimal que
utilizan la mayoría de visualizadores. Recuerda que las palabras en
destino aparecen separadas por el signo +, y las letras acentuadas y
otros caracteres, por valores hexadecimales precedidos del símbolo %
Se puede proceder a la descodificación en el programa CGI que recibe los
datos, o bien definir macros en programas auxiliares que serán
ejecutados después.
En el índice encontrarás la
tabla de conversiones utilizada con el visualizador Netscape desde Windows.
Estilos en los formularios
En las últimas versiones de los dos navegadores más utilizados, pueden
aplicarse cambios de estilo a los formularios, lo que permite una
presentación más sofisticada.
ATENCION: Hay que tener en cuenta que los estilos no estan
estandarizados, y hay cosas que se ven bien en unos navegadores y no se
ven en otros, y hay solo unos pocos efectos que se vean en todos ellos.
En los elementos de formulario pueden redefinirse casi todos los
parámetros: colores de fondo, tipo y anchura de bordes, color y tipo de
letra del texto, altura y anchura del elemento, alineación del texto
dentro del elemento, etc. Por ejemplo:
Se escribe así:
<FORM METHOD="GET" ACTION="">
<INPUT TYPE="text" STYLE="background:yellow;color:red" NAME="campo1">
<INPUT TYPE="text" STYLE="border:1;background:yellow;color:blue" readonly
NAME="campo2" VALUE="Solo lectura">
<INPUT TYPE="button" STYLE="background:transparent;color:red" VALUE="Procesar">
</FORM>
Problemas de privacidad en los formularios
En las últimas versiones del navegador Internet Explorer de Microsoft,
ha aparecido una nueva prestación consistente en memorizar los datos
introducidos en cualquier formulario de uso habitual. En efecto, muchas
veces se utilizan formularios para tareas repetitivas, en las que casi
siempre hay que introducir los mismos datos. Esto nos puede ahorrar
tener que escribir cada vez lo mismo, y Microsoft pensó que sería buena
idea facilitar la labor del usuario haciendo que el navegador guarde en
una lista desplegable todos los datos que se van escribiendo en cada
transacción, de manera que cuando se accede a la página, cada campo de
texto (<INPUT TYPE="text">) queda convertido en una lista
desplegable (<SELECT>) cuyo contenido son los datos que se han
introducido en ese mismo campo en ocasiones anteriores.
Visto así suena incluso interesante.... a condición de que el usuario
sea siempre el mismo, claro. Porque, ¿qué ocurre si el formulario está
incluido en una página que es utilizada por numerosas personas en una
sala común con máquinas públicas, como una sala de usuarios o un
cibercafé? Pues que si el siguiente usuario se conecta a la misma
página, puede ver los datos que escribió su antecesor en esa máquina.
Para evitarlo, existe un parámetro, poco conocido en general, que debe
incluirse en la definición del formulario, y que no tiene ningún efecto
en los navegadores que no tienen la costumbre de ser tan indiscretos.
Así:
<FORM NAME="MI_FORMULARIO" METHOD="POST" AUTOMPLETE="OFF">
...
...
</FORM>
Orden de tabulación en los formularios
De forma predeterminada, el orden de tabulación es el mismo que el orden
en que los elementos se han escrito. Puede darse el caso de que
necesites que el orden de tabulación de los elementos de un formulario
no sea el mismo en el que estan escritos. Para ello se puede incluir en
todos los elementos el parámetro
TABINDEX=n donde
n es el
número de orden deseado de cada uno. Si se va a alterar el orden natural
de tabulación, conviene hacerlo con todos los elementos del formulario.
En cualquier caso, el navegador hace dos grupos de tabulación, los que
tienen el parámetro
TABINDEX y los que no. Seguirá el orden de
los valores y a continuación pasará a los que no tengan numeración,
siguiendo el orden de escritura. He aquí un ejemplo de la sintaxis:
<FORM NAME="MI_FORMULARIO" METHOD="POST">
<INPUT TYPE="text" NAME="Campo1" TABINDEX=2>
<INPUT TYPE="text" NAME="Campo2" TABINDEX=1>
</FORM>
En este caso, "Campo2" sería el primero en recibir el cursor. Todo esto sólo funciona con navegadores de versiones recientes.
Desactivar elementos en los formularios
Con casi todos los navegadores modernos se pueden bloquear los elementos
que forman un formulario, todos o algunos de ellos. Y puede que te
preguntes qué interés tiene bloquear un formulario. Puede ser necesario
en aplicaciones dinámicas en las que interese bloquear partes del
formulario según el usuario cumplimente unos opciones u otras. Para ello
se utiliza el parámetro
DISABLED. Este parámetro es accesible desde JavaScript y VBScript. Se escribe:
<FORM NAME="MI_FORMULARIO" METHOD="POST">
<INPUT TYPE="text" NAME="Campo1" VALUE="Control desactivado" DISABLED>
<INPUT TYPE="text" NAME="Campo2">
</FORM>
Se puede aplicar a cualquier objeto contenido en el formulario. Este sería el resultado:
Como puedes ver, el efecto es parecido al que se consigue con la opción de estilo
readonly,
pero con DISABLED se impide incluso el que se pueda seleccionar el
contenido del control (no se produce el evento onFocus) y con readonly
no.
Linea de texto
Linea de texto
Linea de texto
Linea de texto
Linea de texto
Linea de texto
Linea de texto
Linea de texto
Linea de texto
Linea de texto
Linea de texto
Linea de texto
Linea de texto
Linea de texto
Linea de texto
texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto