Formularios en HTML

-->

Los formularios son elementos de HTML que permiten recoger información del usuario. Disponemos de una gran variedad de elementos de formulario que nos permiten interactuar de forma rica y eficiente con los usuarios. De todas maneras, cabe destacar que los formularios no procesan la información introducida por los usuarios, sino que debemos procesarla nosotros por otros medios (CGI, JSP, Servlets, etc.).

Un ejemplo de cómo crear un formulario es el siguiente:

<FORM ACTION=“url proceso” METHOD=“POST”>

... Elementos

..

</FORM>

La etiqueta FORM nos proporciona algunos atributos:

• ACTION: este atributo nos permite especificar a qué URL se enviarán los datos que el usuario haya introducido en el formulario. Podemos especificar como URL una dirección de correo electrónico, de la forma: mailto:direccion@correo.electron podemos especificar una URL de http: http://www.uoc.edu/proceso.cgi
• METHOD: el método especifica de qué forma se envían los datos. Disponemos de dos opciones: GET y POST.
• ENCTYPE: especifica el tipo de codificación usada. Generalmente sólo se usa para especificar en caso de enviar el resultado del formulario por correo para cambiar la codificación a text/plain.
• NAME: sirve para asignar un nombre al formulario, necesario pasa usarlo posteriormente desde “Javascript”.

10.1.- Elementos del formulario

HTML proporciona una gran variedad de elementos de entrada para los formularios. Estos elementos permiten desde introducir texto hasta enviar ficheros.

•   Elemento <INPUT>

El elemento INPUT es quizás el más conocido y usado de los elementos de los formularios. Actúa como un campo de entrada, disponiendo de diversos tipos de elementos  INPUT en función del valor del atributo TYPE:

– TYPE=RADIO: permite escoger entre múltiples opciones, pero sólo una de las del mismo nombre.

– TYPE=RESET: pone en blanco todo el formulario.

– TYPE=TEXT: permite la entrada de una línea de texto.

– TYPE=PASSWORD: permite la entrada de una línea de texto mostrando en lugar de éste caracteres como “*”, usado generalmente para entrada de contraseñas.

– TYPE=CHECKBOX: permite escoger una o varias opciones múltiples.

– TYPE=SUBMIT: acepta los datos entrados en el formulario y ejecuta la acción especificada.

– TYPE=HIDDEN: campo de texto no visible para el usuario. Usado para conservar valores.

El elemento INPUT dispone, además, de otros atributos opcionales:

– NAME: da nombre al campo. Es importante ponerlo para después poder procesarlo desde nuestros programas.

– VALUE: otorga un valor inicial al campo.

– SIZE: tamaño en el caso de los campos TEXT y PASSWORD.

– MAXLENGTH: longitud máxima aceptada de la entrada del usuario (campos TEXT y PASSWORD).

– CHECKED: en caso de RADIO o CHECKBOX si ésta está mar- cada o no por defecto.

•   Elemento SELECT

El elemento SELECT nos permite seleccionar una o varias de las opciones presentadas.

Un ejemplo de elemento SELECT sería:

<SELECT name=“destino”>

<option> África

<option> Antártida

<option> América

<option> Asia

<option> Europa

<option> Oceanía

</SELECT>

Los atributos que ofrece el elemento SELECT son:

– SIZE: el tamaño en pantalla del elemento SELECT. Si es uno, sólo nos mostrará una opción y el elemento SELECT actuará como una lista desplegable. Si es mayor que uno, veremos una lista de selección.

– MULTIPLE: si lo indicamos, podremos elegir más de una opción.

El elemento OPTION dispone de dos atributos:

– VALUE: el valor que se asignará a la variable al seleccionar esta opción.

– SELECTED: qué opción quedará seleccionada por defecto.

• Elemento TEXTAREA

El elemento TEXTAREA nos permite recoger del usuario elementos de texto de múltiples líneas. El formato es el siguiente:

<TEXTAREA name=“comentarios” cols=30 rows=6> Introduzca comentarios sobre la página

</TEXTAREA>

Cabe destacar que el contenido encerrado entre <TEXTAREA> y </TEXTAREA> será considerado el valor inicial del campo. Los atributos que nos ofrece TEXTAREA son:

– ROWS: filas que ocupará la caja de texto.

– COLS: columnas que ocupará la caja de texto.

 

CODIGO DE FORMULARIOS:

<HTML>

<HEAD>

<TITLE>Título del documento</TITLE>

</HEAD>

<BODY>

<H1>Prueba de formulario</H1>

<FORM METHOD=GET>

Nombre:<INPUT TYPE=TEXT NAME=NOMBRE SIZE=10><BR>

Apellidos:<INPUT TYPE=TEXT NAME=APELL SIZE=30><BR>

Clave: <INPUT TYPE=PASSWORD NAME=PASS SIZE=8><BR>

<HR>

Sexo: <BR>

<INPUT TYPE=”RADIO” NAME=“SEXO”>Hombre

<INPUT TYPE=”RADIO” NAME=“SEXO”>Mujer

<BR> Aficiones:<BR>

<INPUT TYPE=”CHECKBOX” NAME=“DEPORTES”>Deportes

<INPUT TYPE=”CHECKBOX” NAME=“MUSICA”>Música

<INPUT TYPE=”CHECKBOX” NAME=“LECTURA”>Lectura

<BR> Procedencia:<BR>

<SELECT name=“PROCEDENCIA”>

<option> África

<option> Antártida

<option> América

<option> Asia

<option> Europa

<option> Oceanía

</SELECT>

<HR>

Dónde le gustaría viajar:<BR>

<SELECT name=“destino” MULTIPLE SIZE=4>

<option> África

<option> Antártida

<option> América

<option> Asia

<option> Europa

<option> Oceanía

</SELECT>

<BR> Opine:

<BR>

<TEXTAREA COLS=25 ROWS=10 NAME=“OPINA”>

¡Escriba aquí su opinión!

</TEXTAREA>

<HR>

<INPUT TYPE=SUBMIT> <INPUT TYPE=RESET>

</FORM>

</BODY>

</HTML>

Podemos ver a continuación un ejemplo de este formulario básico construido con los elementos presentados anteriormente.