En este tema vamos a ver qu son los formularios, para qu se utilizan, y qu elementos

pueden contener.

Formulario <form>

Un formulario es un elemento que

permite recoger datos introducidos por el
usuario.

Los formularios se utilizan para conocer

las opiniones, dudas, y otra serie de datos
sobre los usuarios, para introducir pedidos
a travs de la red, tienen multitud de
aplicaciones.

Un formulario est formado, entre otras

cosas, por etiquetas, campos de texto,
mens desplegables, y botones.

Es muy recomendable utilizar tablas

para organizar los elementos de los
formularios. Utilizando tablas se consigue
una mejor distribucin de los elementos del
formulario, lo que facilita su comprensin y
mejora su apariencia.

Los formularios se insertan a travs de las etiquetas <form> y </form>. Entre dichas
etiquetas habr que insertar los diferentes objetos que formarn el formulario. la
etiqueta <form>tiene los siguientes atributos:

El atributo action indica una direccin de correo electrnico a la que mandar el formulario, o la
direccin del programa que se encargar de procesar el contenido del formulario.

El atributo enctype indica el modo en que ser cifrada la informacin para su envo. Por
defecto tiene el valor application/x-www-form-urlencoded.

El atributo method indica el metodo mediante el que se transferirn las variables del
formulario. Su valor puede ser get o post.

El valor get se utiliza cuando no se van a producir cambios en ningn documento o programa
que no sea el navegador del usuario que pretende mandar el formulario, como ocurre cuando se
realizan consultas sobre una base de datos.

El valor post se utiliza cuando s se van a producir cambios, como ocurre cuando el usuario
manda datos que deben ser almacenados en una base de datos.

Se recomienda utilizar el valor post.

Por ejemplo, podramos insertar un formulario escribiendo el siguiente cdigo:

<form action="mailto:formularios@aulaclic.com" method="post" enctype="text/plain" >

...
</form>

A continuacin veamos los distintos elementos que se pueden incluir en un formulario.

reas de texto <textarea>

Las reas de texto permiten a los usuarios insertar varias lneas de texto. Por ello, suelen
utilizarse para que incluyan comentarios.

Para insertar un rea de texto es necesario incluir las

etiquetas <textarea> y </textarea> entre las etiquetas <form> y </form> del formulario.

Para que el rea de texto tenga algn valor inicial, habr que insertarlo entre las
etiquetas <textarea> y </textarea>.

El atributo name indica el nombre del rea de texto. Es necesario dar nombres diferentes a
cada uno de los elementos de un formulario, para poder identificarlos a la hora de procesarlos.

El atributo rows indica el nmero de lneas que podrn ser visualizadas en el rea de texto
por lo que determina al alto del rea de texto.

El atributo cols indica el nmero de caracteres por lnea que podrn ser visualizados en el
rea de texto por lo que determina al ancho del rea de texto.

Gracias a las barras de desplazamiento, es posible insertar ms lneas de las especificadas en

el atributo rows, y ms caracteres por lnea de los especificados en el atributo cols.

Por ejemplo, para insertar el rea de texto:

Habra que escribir:

<textarea name="ejemploarea" cols="30" rows="3">Escribe el texto que

quieras</textarea>

Elementos de entrada <input>

 Para insertar un elemento de entrada es necesario incluir la etiqueta <input> entre las
etiquetas <form> y </form> del formulario.

El atributo name indica el nombre que se desea dar al elemento de entrada, mediante el cual
ser evaluado, y el atributo type indica el tipo de elemento de entrada.

Vamos a ver los diferentes tipos de elementos de entrada, y el resto de atributos que pueden
definirse para cada uno de ellos.

Campo de texto:

Para insertar un campo de texto, el atributo type debe tener el valor text.

El atributo size indica el nmero de caracteres que podrn ser visualizados en el campo de
texto, determina el ancho de la caja.

El atributo maxlenght indica el nmero de caracteres que podrn ser insertados en el campo
de texto.

El atributo value indica el valor inicial del campo de texto.

Por ejemplo, para insertar el campo de texto:

Campo de texto

Habra que escribir:

<input name="campo" type="text" value="Campo de texto" size="20" maxlength="15">

Campo de contrasea:

Para insertar un campo de contrasea, el atributo type debe tener el valor password.

El resto de atributos son los mismos que para un campo de texto normal. La nica diferencia
es que todas las letras escritas en el campo de contrasea sern visualizadas como asteriscos.

Por ejemplo, para insertar el campo de contrasea:

**********

Habra que escribir:

<input name="contra" type="password" value="contrasea" size="20" maxlength="15">

Botn:

Para insertar un botn, el atributo type debe tener el valor submit, restore o button.

Si el valor es submit, al pulsar sobre el botn se enviar el formulario.

Si el valor es restore, al pulsar sobre el botn se restablecer el formulario, borrndose todos

los campos del formulario que hayan sido modificados y adquiriendo su valor inicial.
 Si el valor es button, al pulsar sobre el botn no se realizar ninguna accin.

El atributo value indica el texto que mostrar el botn.

Por ejemplo, para insertar el botn:

Habra que escribir:

<input name="boton" type="submit" value="Enviar">

Casilla de verificacin:

Para insertar una casilla de verificacin, el atributo type debe tener el valor checkbox.

El atributo value indica el valor asociado a la casilla de verificacin. Es necesario poner este
atributo, aunque el usuario no pueda ver su valor. Es el valor a enviar.

La aparicin del atributo checked indica que la casilla aparecer activada inicialmente. Este
atributo no toma valores.

Por ejemplo, para insertar la casilla:

Habra que escribir:

<input name="casilla" type="checkbox" value="acepto" checked>

Botn de opcin:

Para insertar un botn de opcin, el atributo type debe tener el valor radio.

El atributo value indica el valor asociado al botn de opcin. Es necesario poner este atributo,
aunque el usuario no pueda ver su valor. Es el valor a enviar.

La aparicin del atributo checked indica que el botn aparecer activado inicialmente. Este
atributo no toma valores.

Los botones de opcin se utilizan cuando se desea que una variable del formulario pueda
tomar un solo valor de entre varios posibles. Para ello, se insertan varios botones de opcin con
el mismo nombre (que indica la variable) y con distintos valores. Slamente uno de estos
botones podr estar activado, el que est activado cuando se envia el formulario, su valor ser el
que tendr la variable.

Por ejemplo, para insertar los botones de opcin:

Habra que escribir:

<input name="prefiere" type="radio" value="estudiar" checked>
<input name="prefiere" type="radio" value="trabajar">

Cuando se enve el formulario, si el primer botn est activado la variable prefiere ser igual
a estudiar, si es el segundo el activado, la variable prefiere valdr trabajar. Observa que lo
que ponemos como valor no aparece escrito en la pgina es un datos interno.

<input name="prefiere" type="radio" value="estudiar" checked>

<input name="prefiere" type="radio" value="trabajar">

Cuando se enve el formulario, si el primer botn est activado la variable prefiere ser igual
a estudiar, si es el segundo el activado, la variable prefiere valdr trabajar. Observa que lo
que ponemos como valor no aparece escrito en la pgina es un datos interno.

Existen otros tipos como el tipo hidden que sirve para definir un campo oculto, campo que no
ve el usuario, en este caso habra que incluir el atributo value para que el formulario pase ese
valor al programa que recoge los datos del formulario.

Para que el usuario envie un fichero suyo a travs del formulario tenemos el tipo file, este tipo
hay que utilizarlo con mucho cuidado ya que si permitimos que cualquier internauta nos envie
cualquier tipo de fichero nos podramos encontrar con sorpresas no siempre agradables.

Campos de seleccin <select> ...

 Los campos de seleccin se utilizan para insertar mens y listas desplegables.

Para insertar uno de estos mens o listas es necesario insertar las

etiquetas <select> y </select> en un formulario.

El atributo name indica el nombre del men o lista ser el nombre de la variable que
contendr el valor seleccionado.

El atributo size indica el nmero de elementos de la lista que pueden ser visualizados al
mismo tiempo, determina el alto de la lista.

La aparicin del atributo multiple indica que el usuario podr seleccionar varios elementos
de la lista al mismo tiempo, ayudndose de la tecla Ctrl. Este atributo no toma valores.

La aparicin del atributo disabled indica que la lista estar desactivada, por lo que el usuario
no podr seleccionar sus elementos. Este atributo tampoco toma valores.

Cada uno de los elementos de la lista ha de insertarse entre las

etiquetas <option> y </option>.

El atributo value indica el valor a enviar si se selecciona el elemento. Si no se especifica este

atributo, se enviar el texto de la opcin, que se encuentra entre las
etiquetas <option> y</option>.

La aparicin del atributo selected indica que el elemento aparecer seleccionado. Este
atributo no toma valores.

Por ejemplo, para insertar el men:

--- Elige mascota ---

Habra que escribir:

<select name="mascota">
<option selected>--- Elige animal ---</option>
<option>Perro</option>
<option>Gato</option>
</select>

Y para insertar la lista:

---Elige animales---
Loro
Perro

Habra que escribir:

<select name="animal" size="3" multiple>

<option selected>---Elige animales---</option>
<option value="ave">Loro</option>
<option>Perro</option>
 <option>Gato</option>
<option>Pez</option>
</select>

Para practicar los distintos aspectos explicados en el tema puedes realizar el Ejercicio paso
a paso Insertar elementos de formulario.

Ejercicios del Tema 8. Prueba evaluativa del Tema 8.