Crea tu web, tutor html, css

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>
Un ejemplo sencillo de formulario

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>
Ejemplo de un formulario completo

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.

Los elementos del formulario pueden colocarse fuera de las etiquetas <form></form>.
Para indicar a que formulario pertenece ese elemento se usa el atributo form

Validar datos

Pero antes de enviar los datos para ser procesados por action, puedes verificar sin son correctos con un sistema muy sencillo. Le añades un evento onsubmit="return validar()". Este script (validar) se debe encargar de leer los datos de los campos del formulario y verificar que son correctos. Si todo está bien devolverá true (return true) si algo no fue bien devolvería false (return false) y el formulario no se enviaría.
<form id="Alta" method="post" action="/editor/verdatos.php" onsubmit="return validar()">
Titulo
<input name="nombre" type="text">
<input type="submit" value="Enviar">
<input type="reset" value="Reset">
</form>
<script>
function validar(){
  if(event.target.nombre.value == "Pedro")
return false;
else
return true;
}
</script>
En este ejemplo no puedes enviar el nombre 'Pedro'

Ya sabes crear un formulario con los campos y controles mínimos para entrada de datos y para enviarlo al servidor a ser procesado.

Se puede usar Javascript para una validación previa de los datos antes de ser enviados al elemento marcado en action. Útil por ejemplo para comprobar que un correo es correcto o un número está bien fomateado y similares.