htmpafrugell - Formularios

formularios

Formularios

¿Cómo se hace un formulario?

He aquí los elementos básicos para la realización de un formulario

Abrir y cerrar un formulario

<FORM ACTION="mailto:hicham.code@hotmail.fr" METHOD="post" ENCTYPE="text/plain">

...

</FORM>

Entre las etiquetas anteriores deben ir todas las etiquetas que generan los botones, casillas, campos, etc. y también todas las etiquetas de HTML que permitan dar forma al formulario (tablas, colores, etc)

El atributo ACTION nos indica la dirección de correo a la cual se van a enviar los datos del formulario. Así pues debes sustituir tulogin@tuservidor.pntic.mec.es por tu dirección de correo.

Los atributos METHOD y ENCTYPE indican cómo se transferirán los datos (post, correo) y la codificación del texto

El atributo HIDDEN no mostrará el campo en la página web, aunque sí enviará su contenido.

Entrada de texto de una línea

<INPUT TYPE="text" SIZE="25" NAME="Nombre">

Esta etiqueta produce un campo similar al que se muestra debajo, para introducir texto (en este caso el nombre), de una longitud de 25 caracteres.

Cuando nos llegue al buzón de correo el texto de este campo aparecerá asociado a la palabra que pongamos en NAME (en este caso a Nombre)
Puede incluirse otro atributo opcional VALUE="Pon aquí tu nombre", en este caso aparecería Pon aquí tu nombre dentro del campo

Entrada de texto de varias líneas

<TEXTAREA NAME="comentario" ROWS=3 COLS=50>
Introduzca aquí sus comentarios
</TEXTAREA>

Este código produciría el siguiente resultado:

Introduzca aquí sus comentarios

Lista de opciones o menú desplegable

<SELECT NAME="estudios"> <OPTION SELECTED> ESO <OPTION> Bachillerato <OPTION> Ciclos Formativos <OPTION> Garantía Social </SELECT>

Que produciría un campo similar al siguiente:

donde ESO aparece seleccionada por defecto.

Una variante de las listas de opciones son los menús con barras de desplazamiento

<SELECT NAME="americanos" SIZE=6> <OPTION>España <OPTION>México <OPTION>Argentina <OPTION>Costa Rica <OPTION>Panamá <OPTION>Belice <OPTION>Honduras <OPTION>Bolivia <OPTION>Chile <OPTION>Paraguay </SELECT>

que da como resultado una entrada del tipo

Si en la etiqueta <SELECT ...> introducimos el atributo MULTIPLE: nos está permitido efectuar selecciones múltiples.

<SELECT NAME="menu" SIZE=6 MULTIPLE>

Casillas de verificación o Checkboxes

<INPUT TYPE="checkbox" NAME="nivel" VALUE="eso"> ESO <BR> <INPUT TYPE="checkbox" NAME="nivel" VALUE="bachiller"> Bachillerato <BR> <INPUT TYPE="checkbox" NAME="nivel" VALUE="primaria"> Primaria <BR

Nos permite elegir entre varias posibilidades una o más casillas. Recibiremos como dato el valor de la casilla señalada, asociada en este caso a nivel. Produciría un resultado como el siguiente:

ESO
Bachillerato
Primaria

Botones de radio o de opción

<INPUT TYPE="radio" NAME="sexo" VALUE="hombre" CHECKED>Hombre <INPUT TYPE="radio" NAME="sexo" VALUE="mujer">Mujer

Similar al anterior, con la diferencia de que solo nos permite seleccionar una de las opciones mostradas, se utiliza para mostrar opciones excluyentes entre si. Luce como:

Hombre
Mujer

Botones envío y borrado

Se utilizan las siguientes etiquetas para hacer los botones de Enviar y Borrar

< INPUT TYPE="submit" VALUE="Enviar"> < INPUT TYPE="reset" VALUE="Borrar">

Producirán uno botones como estos:

Cuando presionemos "Enviar" se transferirá el contenido de los campos a la dirección de correo indicada, por lo que necesitamos estar conectados a Internet para comprobarlo.
Si presionamos Borrar se borrará el contenido de los campos

Ejemplo

Sustituye los campos necesarios para colocarlo en tu página

<form action="mailto:hicham.code@hotmail.fr" method="post" enctype="text/plain">
<center><table bgcolor="#cccccc" border="0" cellpadding="6"
cellspacing="0" width="400">
<tr>
<td align="right" valign="top"><b>Nombre</b></td>
<td><input type="text" size="25" name="Nombre"> </td>
</tr>
<tr>
<td align="right" valign="top"><b>E-mail</b></td>
<td><input type="text" size="25" name="e-mail"> </td>
</tr>
<tr>
<td align="right" valign="top"><b>Especialidad</b></td>
<td><input type="text" size="25" name="Especialidad"> </td>
</tr>
<tr>
<td align="right" valign="top"><b>Centro de destino</b></td>
<td><input type="text" size="25" name="Centro"> </td>
</tr>
<tr>
<td align="right" valign="top"><b>Provincia</b></td>
<td><input type="text" size="25" name="Provincia"> </td>
</tr>
<tr>
<td align="right" valign="top"><b>Pulsa una vez</b>  <b>></b> </td>
<td align="center">  <input
type="submit" name="Enviar datos" value=" Enviar "><input type="reset" value="Borrar" name="B1"> </td>
</tr>
</table>
</center>
</form>

Pulsa aquí para ver cómo queda