Los Formularios HTML: lo básico

Los formularios son el método usado en las páginas web para recibir datos de los usuarios. Pueden usarse para enviar correo a traves de una página, para recoger comentarios de los visitantes, para crear un blog o un foro, para hacer búsquedas y un largo etcétera.

Son necesarios en todos aquellas situaciones en que es el usuario deba facilitar algún dato a la página web para que esta haga algo. Si estoy en una página de búsquedas necesito un formulario para que el visitante me diga que desea buscar.

Y por usuario en este caso no nos refereimos solo a los visitantes del sitio, sino también a una dministrador que deba actualziar una base de datos con información necesaria para presentar en su página web.

<form id="alojamiento" method="post" action="/editor/verdatos.php">

<p>Titulo <input name="titulo" type="text">

</p>

<p>Tipo

<label>

<input type="radio" name="tipo" value="E" id="digital">

Ebook</label>

<label>

<input type="radio" name="tipo" value="P" id="papel">

Papel</label><br>

<br>

<input type="submit" name="button" id="button" value="Enviar">

</form>

Como ves en ese código de ejemplo el formulario es un elemento delimitado por las etiquetas <form></from>. Yo lo divido en tres partes:

• Encabezado con datos de gestión del formulario, es la etiqueta <form>con sus aributos
• Elementos del cuerpo, donde el usuario interacciona escribiendo o clickando para marcar valores, en los campos que lo forman
• Elementos de botones para enviar los datos o resetear y borrarlos para volver a empezar

En general el formulario necesita un programa para procesar los datos que se escriben en él, suelen ser programas del lado servidor que se ejecutan en éste, aunque también pueden ser enviados a scripts que se ejecutan en el ordenador del usuario. Recuerda que una página web solo sirve para mostrar información estática, si hay que hacer algo más o utilizas información dinámica se necesitan programas o scripts.

Todos los elementos de un formulario poseen estos atributos comunes

• name: Sirve para identificar al elemento.
• value: Es el valor del elemento
• disabled: Bloquea el elemento y no deja que se entre datos en él.
• form: Contiene el atributo id del formulario al que pertenece el elemento.

Nos detenendremos en cada parte de este elemento para ver sus funciones:

<form method="" action=""></form>

Son las etiqueta de inicio y fin, entre ellas están los controles. Los atributos esenciales son method y action

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 recibirá el contenido del formulario y los utilizar´ça según diga el programa: almacenarlos en una base de datos, actualizar la página, realizar una búsqueda....

Con esto ya tendremos 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 material de los campos del formulario. Fácil.

Para comenzar a practicar y entender los formualrios usaremos el control más elemental y versátil los elementos input

<input>

Es el campo básico del formulario, sirve para realizar acciones como escribir o finalizar el formulario. Existen muchos tipos, y admite multitud de atributos. Para empezar a usarlo y entender los ejemplos basta con esta información sobre él:

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

<form id="Alta" method="post" action="/editor/anotar.php">

Titulo

<input name="titulo" type="text">

</p>

<p>Autor

<input name="autor" type="text">

</p>

<p>Clase<br>

<label>

<input type="radio" name="clase" value="De texto" id="Clase_t">

Texto</label>

<label><input type="radio" name="clase" value="De lectura" id="Clase_l">

Lectura

</label></p>

<p>Tipo<br>

<label>

<input type="checkbox" name="tipoE" value="ebook" id="ebook">Ebook</label>

<label>

<input type="checkbox" name="tipoP" value="papel" id="papel">

Papel</label>

<p>

<label>Más info:

<input type="url" name="info" id="info">´

</label>

</p>

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

<input type="reset" value="Reset">

</form>

Como ves es muy simple. Cierto que la la página no queda nada bonita, pero eso se arreglará con un poco de estilos CSS. Ahora se trata de entender como se crea un formulario mínimo. En este ejemplo el programa que procesará los datos lo llamo anotar.php. Los datos son enviados mediante el métido POST

Hay datos de texto (Titulo y Autor) datos de opción excluyente (Clase), de opciones (Tipo) y una url (Más info) para que veas como se auto chekea el campo cuando entras una url no válida. Y todo acaba con un botón para enviar los datos al programa escrito en action, en este caso anotar.php.