Con el nombre genérico de formularios se conoce un conjunto de elementos (botones, botones de radio, cajas de texto, cuadros de diálogo, etc.) que permiten transmitir información desde una página Web. Estos elementos son denominados campos de formulario o controles de formulario.
Esta información puede ser enviada al servidor, en este caso necesitaremos de la ayuda de programas especiales para poder utilizarla, a otra página Web, esta página deberá ser una página PHP, ASP, JSP o enviarla directamente al destinatario mediante el correo electrónico
Nosotros solamente vamos a contemplar esta última posibilidad, la información contenida en el formulario es enviada por medio de correo electrónico
Un formulario se define mediante la etiqueta <FORM></FORM>, todo lo que se encuentra contenido entre las etiquetas de apertura y cierre pertenece a la definición del formulario.
La etiqueta <FORM> posee los siguientes atributos:
| ATRIBUTO | FUNCIÓN |
| ACTION | Indica la URL o programa que procesará las entradas. Puede ser cualquier dirección de Internet o de correo electrónico (en este caso precedido de mailto:). Es obligatorio y no tiene valores por defecto. |
| ENCTYPE | Describe el modo en que se enviará la información. Es opcional y su valor por defecto es "TEXT/PLAIN", las entradas se enviarán como texto simple sin codificar. |
| METHOD | Define el modo en que se mandará el formulario. Puede tomar los valores GET, añade la información a la URL indicada en ela tributo ACTION y POST la envía utilizando correo, lógicamente deberemos utilizar este método si la URL es una dirección de correo. Es recomendable escribir estoss valores en mayúsculas |
| NAME | Especifica un nombre para el formulario. |
Para definir los distintos tipos de elementos admitidos en un formulario se utiliza la etiqueta <INPUT> (no tiene etiqueta de cierre).
La estructura genérica de <INPUT> es:
Donde XXX, YYY. ZZZ son los valores de los atributos indicados.
| ATRIBUTO | FUNCIÓN |
| NAME | Define el nombre de la variable en la que se almacenará la entrada del formulario. |
| VALUE | Tiene diferentes funciones según a los atributos que acompañe. Ver los ejemplos de los distintos componentes de los formularios para comprender bien su función |
| TYPE | Indica el tipo de elemento incluido en el
formulario. Puede tomar los valores: TEXT: la entrada consistirá en una línea de texto. PASSWORD: similar al anterior pero el texto introducido será sustituido por asteriscos. HIDDEN: la información no aparece en pantalla aunque es enviada a la URL especificada. CHECKBOX: define la entrada como una casilla de selección. RADIO: define los elementos denominados "botones de radio", Solamente uno de los botones puede ser seleccionado a la vez. RESET: botón que restaura en el formulario los valores originales. SUBMIT: botón que al ser activado envía los datos a la URL especificada. BUTTOM: botón estándar. Para que haga algo es necesario asignarle un evento al bótón y una acción, generalmente mediante un lenguaje de scripts. IMAGE: personaliza el botón con la imagen indicada. Originalmente devolvía, además del contenido del atributo value, las coordenadas del lugar donde se había pulsado, en la actualidad se uso más frecuente para personalizar los botones SUBMIT o RESET. Podemos aplicarle también, como a cualquier elemento HTML, cualquier evento. FILE: envía un archivo. Se mostrará un cuadro de texto y a su derecha un botón denominado EXAMINAR, al pulsar sobre él se abrirá una ventana de exploración para poder seleccionaren nuestro equipo el fichero que queremos enviar. Al seleccionarlo, aparecerán escritos nombre y dirección en el cuadro de texto. |
Vamos a ver a continuación dos elementos más que podemos insertar en un formulario y que no se definen utilizando la etiqueta INPUT, esos elementos son:
Define un área para introducir texto, similar a la definida con TEXT pero permitiendo que el usuario pueda introducir varias filas y columnas. El cuadro contendrá sus barras de desplazamiento.
| <TEXTAREA> Texto por defecto </TEXTAREA> |
El texto contenido entre las dos etiquetas es el que se mostrará en el TEXTAREA.
TEXTAREA admite dos atributos principales:
| ATRIBUTO | FUNCIÓN |
| ROWS | Determina el máximo número de filas que ocupará el texto. |
| COLS | Determina el máximo número de columnas que ocupará el texto |
Nos permite elegir una opción entre varias propuestas. Se generan utilizando las etiquetas <SELECT> </SELECT> y <OPTION>
|
<select size="3"> <option>Block de notas <option>Composer <option>FrontPage </select> |
Seleccione la opción deseada:
|
SELECT admite los atributos:
| ATRIBUTO | FUNCIÓN |
| SIZE | Indica el número de opciones que podremos ver. Si es 1 veremos un menú desplegable. |
| MULTIPLE | Permite seleccionar más de una opción. |
Atributos propios de OPTION son:
| ATRIBUTO | FUNCIÓN |
| VALUE | Define el valor que se transmitirá al enviar el formulario |
| SELECTED | Determina la opción que será seleccionada por defecto. |
Realiza la mismo función que el valor del atributo type en el elemento <input>, es decir, crea un botón genérico. La etiqueta del botón es el texto contenido entre las marcas de apertura y cierre del elemento. Las dos líneas de código escritas a continuación realizan la misma función.
| <input name="Boton1" type="button" value="Borrar"> | |
| <button>Borrar</button> |
Puede admitir el atributo type que admite los valores button, submit y reset. También admite cualquier elemento de bloque o en línea entre las marcas de apertura y cierre dl botón.
Asocia un texto con el control con el que está relacionado. Se define mediante las etiquetas<label>...</label>.
Podemos asociar el elemento con su campo de dos formas diferentes:
|
La primera de ellas consiste en encerrar dentro de las etiquetas <label>...</label> el elemento <input> |
|
|
<label>Nombre: <input type="text" name="Nombre" size="25"> </label> |
|
|
También podemos asociar una etiqueta con su campo mediante el atributo for cuyo valor deberá ser el id del control. |
|
|
<label for="Nombre">Nombre: </label> <input type="text" id="Nombre" size="20"> |
|
Agrupa elementos del formulario para que formen un bloque y poder asociarles formatos de presentación o posicionamiento simultáneamente a todos los elementos agrupados. Se aplica mediante el elemento <fieldset>...</fieldset>, puede incluir la marca <legend> para incluir un título al grupo. Mediante el atributo align podemos indicar la posición de dicho título (top, bottom, left, right).
|
<fieldset> |
Mediante la etiqueta <optgroup>...</optgroup> podemos agrupar elementos de una lista o menú de opciones. Su atributo label nos permite poner un nombre que servirá como título del grupo, éste se presentará en negrita y cursiva mientras que las opciones se presentarán en el tipo de fuente definida y sangradas hacia la derecha. su sintaxis es:
|
<select size="4"> |
|
La mayor parte de los elementos nombrados admiten también los atributos disabled que indica que el elemento está desactivado y por lo tanto no se puede seleccionar. Los elementos textarea e input, cuando type es text o password, admiten el atributo readonly que impide la modificación del texto predeterminado.
HTML 4 admite otros atributos cuya finalidad es mejorar el acceso a los formularios. Tabindex, cuyo valor es un número entero, indica el orden de tabulación de los distintos elementos que componen el formulario, si no se especifica el orden de tabulación es el orden en que se encuentran los elementos. Los controles desactivados no formar parte del índice de tabulación, sí lo hacen aquellos marcados como de sólo lectura. El atributo accesskey permite configurar un caracter del teclado para que active el control de formulario con el que se haya asociado, generalmente la pulsación deberá ser conjunta con la tecla ALT o CTRL. Este atributo es compatible con los elementos <label>, <input>, <legend> y <button>. Explorer es compatible con los elementos <select> y <textarea>, aunque con Explorer 7 funciona también con <input>. La forma de uso más recomendable, para mí, es la siguiente:
|
<label>Datos <u>c</u>liente: |
|
De esta forma podemos indicarle al usuario el caracter que debe de pulsar. En Explorer pulsaremos la tecl ALT + la configurada, mientras que en Firefox deberemos de pulsar ALT + MAYUS + la tecla asociada. Deberemos tener en cuenta que los exploradores poseen combinaciones de teclas previamente configuradas que no podremos utilizar.
El uso de tablas y de los elementos de agrupación (label, fieldset y legend) permiten mejorar la presentación de nuestros formularios. También podemos utilizar con ellos hojas de estilo ya que admiten los atributos class, id y style aunque deberemos comprobar los resultados en varios navegadores porque muchos de ellos solamente admiten parcialmente CSS o sus efectos pueden no ser iguales.