Los formularios son el sistema utilizado en HTML para permitir que el usuario envíe información al servidor.

Para definir un formulario utilizamos la marca cerrada <FORM></FORM>.
Las marcas <TEXTAREA>, <SELECT> e <INPUT> se utilizan para crear los campos del formulario. En un formulario pueden crearse tantos campos como se desee.

<TEXTAREA> </TEXTAREA>

Define un campo en el que el usuario puede introducir un texto, que puede ser de más de una línea.

<SELECT> </SELECT>

Crea una lista de opciones, en forma de menú o lista, para que el usuario realice su selección.

<INPUT> </INPUT>

Permite crear campos para una línea de texto, botones de radio, cuadros de selección y los botones para borrar o enviar el contenido del formulario al servidor.

Definición de un formulario

Al definir un formulario debemos especificar cómo enviará la información al servidor y de qué manera será tratada.
Para ello incluimos los elementos ACTION y METHOD en la marca de inicio <FORM>.

ACTION

Especifica un URL en el que se realizará el tratamiento de la información del formulario. Si no se incluye el elemento ACTION la información se envía a la dirección de la que procede la página.
El URL no tiene porqué ser exclusivamente del tipo 'http://...'. Podemos utilizar un URL como el siguiente: 'mailto:nombre@hots.dominio'. En este caso el resultado será que el formulario se enviará por correo a la dirección idicada.

METHOD

Especifica la forma en la que se enviará la información al servidor. Existen dos posibilidades: POST y GET.
POST envía la información de forma independiente al URL.
GET envía la información al final del URL. Añade la información al URL especificado en ACTION utilizando el símbolo '?' como separador. El cgi (programa utilizado para realizar el tratamiento de la información) recibe los datos como parámetros.
Al crear un formulario se recomienda utilizar el método POST, sobre todo para aquellos casos en los que se desconoce el tamaño de la respuesta o ésta puede ser larga. El motivo de esta recomendación está en que los URL tienen definida un longitud máxima que no pueden exceder y como hemos visto, el método GET añade la respuesta al URL.

En una página HTML podemos incluir tantos formularios como deseemos, pero debemos tener en cuenta que los formularios no pueden anidarse. Es decir, no podemos crear un formulario dentro de otro.
Si abrimos un nuevo formulario (marca <FORM>) antes de cerrar el anterior, esta marca es ignorada y todas las entradas que creemos para este segundo formulario serán asigandas al primero.

TEXTAREA

Mediante esta marca se crea un área de texto en la que se pueden introducir mltiples líneas.
Por defecto TEXTAREA muestra cuatro líneas de 40 caracteres de anchura. Este tamaño puede variarse mediante los atributos ROWS (filas) y COLS (anchura en n caracteres).
El atributo NAME define el nombre del área de texto. Es imprescindible.
El texto introducido entre las marcas de inicio y final se visualiza como texto por defecto del área. Las otras marcas HTML introducidas entre <TEXTAREA> y </TEXTAREA> son ignoradas.

El siguiente ejemplo activaría un cgi denominado 'script.cgi' desde la carpeta 'cgi' del servidor 'fyl.unizar.es' para tratar la información contenida en el campo llamado 'Campo_texto'.

<FORM METHOD="POST" ACTION="http://fyl.unizar.es/cgi/script.cgi">
<TEXTAREA NAME="Campo_texto" ROWS=6 COLS=25>
Texto por defecto
</TEXTAREA>
</FORM>
Texto por defecto

SELECT

Esta marca muestra una lista de opciones como menú o como lista de desplazamiento.

Las opciones de SELECT son:

• NAME: Imprescindible. Define el nombre de la lista.
• SIZE: Determina el número de opciones que se mostrarán. Si se omite esta opción o se le asigna un valor 1, se muestra como menú. Si el valor asignado es 2 o superior la lista aparece como lista de desplazamiento.
  Si el valor SIZE es superior al nmero de opciones disponibles, la lista se completará con líneas en blanco.
• MULTIPLE: Permite hacer selecciones mltiples. Al indicar esta opción aparecerá una lista desplazable, independientemente del número de opciones seleccionables y del valor especificado mediante SIZE.
  Para seleccionar varias opciones contiguas hacemos click sobre la primera, pulsamos la tecla de maysculas (shift) y hacemos click sobre la última opción deseada. Si queremos seleccionar varias opciones alternas lo hacemos manteniendo pulsada la tecla de control.

Para definir cada una de las opciones que se presentarán al usuario se utiliza la marca <OPTION>. Esta marca puede llevar dos atributos:

• VALUE: Define el valor que será asignado a esa opción.
  <OPTION VALUE="A">Primera opción.
  Cuando el usuario seleleccione 'Primera opción' el servidor recibirá el valor 'A'.
• SELECTED: Hace que la opción en la que se incluye este atributo sea la que aparezca seleccionada por defecto.

Ejemplos:

1. Menú.

   <FORM METHOD="post" ACTION="script.cgi">
   Selecciona una opción.......
   <SELECT NAME="Ejemplo">
   <OPTION VALUE="A">1 opción
   <OPTION SELECTED VALUE="B">2 opción. Aparece seleccionada
   <OPTION VALUE="C">3 opción
   </SELECT>
   </FORM>

   El resultado es:
   Selecciona una opción....... 1ª opción 2ª opción. Aparece seleccionada 3ª opción

2. Lista.

   <FORM METHOD="post" ACTION="script.cgi">
   Selecciona una opción<BR>
   <SELECT NAME="Ejemplo" SIZE=4>
   <OPTION VALUE="A">1 opción
   <OPTION SELECTED VALUE="B">2 opción. Aparece seleccionada
   <OPTION VALUE="C">3 opción
   </SELECT>
   </FORM>

   El resultado es:
   Selecciona una opción
   1ª opción 2ª opción. Aparece seleccionada 3ª opción

3. Lista para selección mltiple.

   <FORM METHOD="post" ACTION="script.cgi">
   Selecciona una o varias opciones<BR>
   <SELECT NAME="Ejemplo" MULTIPLE>
   <OPTION VALUE="A">1 opción
   <OPTION SELECTED VALUE="B">2 opción. Aparece seleccionada
   <OPTION VALUE="C">3 opción
   </SELECT>
   </FORM>

   El resultado es:
   Selecciona una o varias opciones
   1ª opción 2ª opción. Aparece seleccionada 3ª opción

    

INPUT

• NAME: Define el nombre del campo. Este dato es imprescindible, excepto para los botones SUBMIT y CLEAR.
• SIZE: Tamaño visible del campo en número de caracteres.
• MAXLENGTH: Máximo número de caracteres que aceptará el campo.
• VALUE: Texto por defecto del campo. Si se trata de botones de radio o cuadros de selección define el dato que enviará al servidor si el botón o el cuadro es seleccionado.
  Si el campo es un botón representa el texto que aparecerá en su interior.
• CHECKED: Selecciona un botón de radio o cuadro de selección.
• TYPE: Define el tipo de campo. Existen seis posibilidades:
  • TEXT: Tipo por defecto. Muestra una entrada para un línea de texto.
    Este tipo de campo acepta los siguientes atributos en la marca INPUT: NAME, SIZE, MAXLENGTH y VALUE.

    <FORM>
    Introduce tus iniciales....
    <INPUT TYPE="TEXT" NAME="iniciales" SIZE="8" MAXLENGTH="3">
    </FORM>

    Introduce tus iniciales....

  • PASSWORD: Para realizar lecturas de palabras clave. En lugar de mostrar (en pantalla) los caracteres que el usuario teclea muestra el típico bolo negro, o el asterisco, utilizado en estos casos.
    Este tipo de campo acepta los siguientes atributos en la marca INPUT: NAME, SIZE, MAXLENGTH y VALUE.

    <FORM>
    Introduce una clave de acceso....
    <INPUT TYPE="PASSWORD" NAME="acceso" SIZE="8" MAXLENGTH="8">
    </FORM>

    Introduce una clave de acceso....

  • CHECKBOX: Muestra un cuadro de selección.

    <FORM>
    Selecciona una o más opciones<BR>
    <INPUT TYPE= "CHECKBOX"NAME="caja1"VALUE="1">Primera opción
    <INPUT TYPE= "CHECKBOX"NAME="caja2"VALUE="2">Segunda opción
    <INPUT TYPE= "CHECKBOX"NAME="caja3"VALUE="3" CHECKED>Tercera opción
    </FORM>

    Selecciona una o más opciones
    Primera opción Segunda opción Tercera opción

    Incluyendo la marca <BR> o <P> al final de cada línea INPUT las opciones aparecerán una debajo de la otra.

    Selecciona una o más opciones
    Primera opción
    Segunda opción
    Tercera opción

    Este tipo de campo acepta los siguientes atributos en la marca INPUT: NAME, CHECKED y VALUE.

  • RADIO: Crea una entrada en forma de botón de radio.
    Los botones que pertenecen a una opción se agrupan mediante NAME.

    <FORM>
    Elige una opción para cada grupo, A y B:<P>
    <INPUT TYPE="RADIO" NAME="A" VALUE="1"> Primera opción de A
    <INPUT TYPE="RADIO" NAME="A" VALUE="2"> Segunda opción de A
    <INPUT TYPE="RADIO" NAME="A" VALUE="3"> Tercera opción de A<P>
    <INPUT TYPE="RADIO" NAME="B" VALUE="1"> Primera opción de B<BR>
    <INPUT TYPE="RADIO" NAME="B" VALUE="2"> Segunda opción de B<BR>
    <INPUT TYPE="RADIO" NAME="B" VALUE="3" CHECKED> Tercera opción de B
    </FORM>

    
    Elige una opción para cada grupo, A y B:

    Primera opción de A Segunda opción de A Tercera opción de A

    Primera opción de B
    Segunda opción de B
    Tercera opción de B

    Este tipo de campo acepta los siguientes atributos en la marca INPUT: NAME, CHECKED y VALUE.

  • RESET: Crea un botón que permite borrar el contenido introducido en el formulario y restaurar sus datos originales.
    VALUE permite cambiar el texto "Reset" definido por defecto para este botón. Es el único atributo aceptado en la marca INPUT

    <FORM>
    <INPUT TYPE="TEXT" VALUE="Escribe algo y pulsa 'Borrar'" SIZE=30>
    <INPUT TYPE="RESET" VALUE="Borrar">
    </FORM>

  • SUBMIT: Crea un botón para enviar los datos al servidor. Igual que en el caso anterior, mediante VALUE, podemos cambiar el texto que aparecerá en su interior.