15. Formularios

1. La directiva FORM
2. La directiva INPUT
3. La directiva SELECT
4. La directiva TEXTAREA

Hasta el momento se han presentado características de HTML que permiten al lector visualizar en su browser documentos multimedia y navegar por ellos, aunque el lector no tenia posibilidad de interactuar con ellos. El siguiente paso consiste en definir dicha posibilidad: Los formularios.

El principio del formulario es bien sencillo: el usuario rellena una serie de campos y los envia a un programa de tratamiento, denominado genéricamente CGI (Common Gateway Interface). Los campos pueden ser de diversa naturaleza, como campos de edición, menús desplegables, listas de opciones, texto, etc.

Para iniciar un formulario en HTML se utilizará la directiva <FORM> ... </FORM>. Dentro de ella especificaremos todos los campos que intervienen en el formulario:

15.1. La directiva FORM

Con esta directiva especificaremos el tratamiento que se realizará con los campos introducidos por el usuario. Para ello existen dos atributos:

El atributo METHOD

Se especifica la forma de pasar los valores de los campos al programa de tratamiento. Admite los valores GET y POST.

El atributo ACTION

Indicaremos el nombre del programa de tratamiento.
Ej. <FORM METHOD=post ACTION="cgi-bin/respuesta"> ... </FORM>

15.2. La directiva INPUT

Es una de las directivas que permite especificar algunas clases de campos de entrada, dependiendo de los atributos asociados:

El atributo NAME

Indicaremos el nombre asociado al campo de entrada, debe ser único dentro de un mismo formulario.

El atributo VALUE

Dependiendo del tipo o clase de campo indicará una cosa u otra:

• Campo de texto: Predefine el contenido del campo.
• Campo submit o reset: Texto que aparecerá en el botón.
• Campo checkbox o radio: Valor asociado a la opción.

El atributo TYPE

Indicaremos el tipo o clase de campo. Los valores que puede tomar son:

Texto no específico

Cuando a la directiva INPUT no le asociamos ningún tipo, estamos indicando una entrada de texto simple con desplazamineto horizontal. Podemos especificar el tamaño de visualización en número de caracteres; para ello utilizaremos el atributo SIZE .

<FORM> <INPUT NAME=nombre SIZE=30> </FORM>
Se visualizará:

SUBMIT

Es el botón que realiza el envio de la información al programa de tratamiento. Ejemplo:
Todo este capítulo es un formulario, si hacemos click en enviar, ejecutará un programa de tratamiento que mostrará los valores de todos los campos de este formulario.

<FORM> <INPUT TYPE=submit VALUE="enviar"> </FORM> Se visualizará:

RESET

Botón de borrado de todos los datos introducidos en el formulario. Ejemplo:
<FORM> <INPUT TYPE=reset VALUE="borrar"> </FORM> Se visualizará:

CHECKBOX

Es un campo multivalor ya que permite asignar uno o varios valores a una misma variable. Ejemplo:
<FORM>
<INPUT TYPE=checkbox NAME="so" VALUE="msdos">MS-DOS<br>
<INPUT TYPE=checkbox NAME="so" VALUE="os2">OS/2<br>
<INPUT TYPE=checkbox NAME="so" VALUE="unix">UNIX<br>
</FORM>

Se visualizará:
MS-DOS
OS/2
Unix

RADIO

Es un campo multivalor excluyente, permite escoger una y sólo una opción de un conjunto de valores. Ejemplo:
<FORM>
<input type=radio name="sexo" value="hombre">Hombre
<input type=radio name="sexo" value="mujer">Mujer
</FORM>

Se visualizará: Hombre Mujer

PASSWORD

Es una zona de texto donde los caracteres se reemplazan por asteriscos.Ejemplo:
<FORM>
<input type=password name="passwd">
</FORM>

Se visualizará:

HIDDEN

Permite ocultar al usuario un campo en el formulario dando un valor a la variable asociada.

15.3. La directiva SELECT

Se utiliza para definir listas de opciones dentro de un formulario. El atributo NAME, comentado en la directiva INPUT, se utiliza de la misma forma. Para especificar cada elemento de la lista u opción se utiliza la directiva <OPTION> indicando a continuación el texto de la opción.
Existen dos tipos de listas:

Menús desplegables

Es un botón que muestra la opción seleccionada. Si se hace click sobre el botón se desplegará la lista de opciones. Como atributo de la directiva OPTION se puede especificar SELECTED, de esta forma especificaremos la opción seleccionada por defecto. Ejemplo:
<FORM>
<SELECT name="pueblo">
<OPTION>Berrueces
<OPTION SELECTED>Ceinos de Campos
<OPTION>Laguna de Duero
<OPTION>Villalón
</SELECT>
</FORM>

Se visualizará:

BerruecesCeinos de CamposLaguna de DueroVillalón

Listas con ventana virtual

Son listas que aparecen en una ventana con una barra de desplazamiento. Se especifican igual que las anteriores, añadiendo el atributo SIZE para indicar el numero de elementos de la ventana física. Si se desean seleccionar varias opciones se debe especificar el atributo MULTIPLE en la directiva SELECT. Ejemplo:
<FORM>
<SELECT name="lugar" size=3 multiple>
<OPTION>Berrueces
<OPTION>Ceinos de Campos
<OPTION>Cuenca de Campos
<OPTION>Laguna de Duero
<OPTION>Valladolid
<OPTION>Villalón
</SELECT> </FORM>

Se visualizará:

BerruecesCeinos de CamposCuenca de CamposLaguna de DueroValladolidVillalón

15.4. La directiva TEXTAREA

Permite crear una zona de texto especificando el número de filas (atributo ROWS) y de columnas (atributo COLS) de la ventana. Si se desea especificar un texto, se hará entre la directiva de apertura y la de cierre. Ejemplo:
<FORM>
<TEXTAREA NAME="opinion" ROWS=5 COLS=60>
Introduzca la opinión de esta introducción a HTML:
</TEXTAREA>
</FORM>

Se visualizará:
Introduzca la opinión de esta introducción a HTML: