Los Formularios (Form)

Los formularios son el método para recibir datos a través de la página web. Pueden usarse para enviar correo a traves de una página, para recoger cometnarios de los visitantes, para crear un blog o un foro, para buscar. Todos aquellos en que es necesario que el visitatne a nuestra página facilite algún dato a la página apra que esta haga algo. Si estý en una página de búsquedas necesito un formulario para que el visitante me diga que desea buscar.

Un formulario se compone de tres partes: un encabezado y cierre donde se programa que hacer con los datos recibidos (si es una búsqueda enviar las palabras al programa del servidor para que haga la búsqueda) y un cuerpo conteniendo los datos en sí (en el buscador: los términos a buscar) y los botones de control (enviar, cerrar cancelar).

En esencia un elemento FORM necesita un programa para procesar los datos. Recuerda que una página web solo sirve para mostrar cosas, si hay que hacer algo más necesitamos programas o scripts.

Vamos a crear un formulario con varios campos para que veas el funcionamiento

<form name="" methdod="" action=""></form>
Son las etiqueta de inicio y fin, entre ellas está el formulario. Utiliza tres atributos que son name, method, action
name
es el nombre del formulario, puede ser útil para scripts.
 
method
es la forma en que se pasan los datos. Tiene dos valores posibles GET y POST. El primero pasa los datos en la url, se ven en la barra de direcciones del explorador. POST pasa los datos al programa dentro de la llamada, o sea, no se ven.
action
es el nombre del progama o script que procesará los datos entrados en el formulario. O sea, el que hará algo con esos datos.

Con esto ya tendemos definido el formulario, ahora queda definir donde y como se deben teclear los datos. Estos son los campos que forman el formulario. Si rellenas un formulario en papel, el lugar donde escribes son el equivalente en papel a los campos del formulario. Fácil. Existen varios elementos para construir un formulario:

<input>
Es el elemento básico del formulario, es la forma básica de entrar datos en el formulario. Hay varias clases:
Tipo Explicación
text Un campo usado para escribir texto o números: datos alfanuméricos.
radio Para elegir una de varias opciones
check Para campos tipo si/no
button Son botones: para enviar los datos o para borrar o cancelar lo escrito
 

Para empezar está bien, ¿qué tal un ejercicio práctico? Pues venga: copia y pega este código en una página y crea tu ejercicio05.htm

Existen más tipos de datos para INPUT estos son los básicos aceptados por cualquier navegador. Pero HTML5 introduce más posibilidades y muy interesantes. Estas sona ceptadas por los navegadores más extendidso (Firefox, Chrome , Explorer):

Tipo Explicación
password muestra aseriscos en lugar del dato tecleado
email Valida el dato como un email
number Para entrar números (puede validar valores)
range Valores en un rango de forma gráfica
url Valida el dato como una dirección web

Existen otras para entrar colores, fechas, pero no son aceptadas por todos los navegadores.

 

<form name="alojamiento" method="post" action="anotar.php">
<p>
Nombre
<input name="Nombre" type="text">
</p>
<p>Apellidos
<input name="Apellidos" type="text">
</p>
<p>Sexo
<label>
<input type="radio" name="Sexo" value="H" id="Sexo_0">
Hombre</label>

<label>
<input type="radio" name="Sexo" value="M" id="Sexo_1">
Mujer</label>
<br>
Servicios<br>
<label>
<input type="checkbox" name="Servicios" value="hab" id="Servicios_0">
Habitación</label>
<br>

<label>
<input type="checkbox" name="Servicios" value="des" id="Servicios_1">
Desayuno</label>
<br>
<label>
<input type="checkbox" name="Servicios" value="alm" id="Servicios_2">
Almuerzo</label>
<br>
<label>
<input type="checkbox" name="Servicios" value="cena" id="Servicios_3">
Cena</label>
<br>
<input type="submit" value="Enviar">
</p>

</form>

Como ves es muy simple, si, la página no es nada bonita, pero quedará bien en su momento. Solo se trata de entender como se crea un formulario mínimo. En este ejemplo el programa que procesará los datos lo llamo anotar.php.

Hay datos de texto (Apellidos, Nombre) datos de opción excluyente (sexo) y de opciones (Servicios). Y todo acaba con un botón para enviar los datos al programa escrito en action, en este caso anotar.php. El método para enviar los datos es POST