09. HTML, Formularios básicosConceptos básicos de los formularios en HTML

Los formularios son elementos muy importantes en HTML, te permiten recoger datos del usuario muy rápida y eficazmente.

Los formularios están compuestos por etiquetas, campos de todo tipo, entre los que se puede destacar; de texto, fecha, contraseña, botones, etc.

La etiqueta principal <form>

La etiqueta principal para implementar un formulario es <form> ... </form>, la cual sirve para indicar al sistema que queremos empaquetar ese formulario para enviar.

Antes de ver la mayoría de los campos que se pueden insertar, vamos a ver una serie de atributos que se aplican a la etiqueta <form>:

Atributo name: Indica el nombre que queremos dar al formulario, con este atributo podemos hacer referencia al formulario para trabajar con él.

<form name='registro'>
...
</form>

action: En este atributo se pone la URL del archivo que va a recibir el formulario y lo va a procesar.

<form action='registro.php' name='registro'>
...
<form>

method: Nos habla del método en el que se enviará la información del formulario. Hay dos opciones; GET y POST.

• GET: Este método envía los datos a través de la URL. No es nada segura, ya que se pueden leer a simple vista. Los datos se verían así en la URL

/registro.php?nombre=Raül&apellido=Bocache

• POST: Este método es el que usarás siempre, ya que los datos no se ven. Además, no tiene limitaciones de tamaño como pasa con GET.

<form action='registro.php' name='registro' method='POST'>
...
<form>

Atributo formencoded: Normalmente no tiene que preocuparte por este atributo, ya que por defecto viene la opción correcto. Con este atributo indicamos el tipo de codificación de los datos a la hora de enviarlos.

• application/x-www-form-urlencoded: Está es la que viene por defecto y los caracteres se codifican antes de enviarse.
• multipart/form-data: Los datos no se codifican, ya que se utiliza para enviar archivos.
• text/plain: No se codifican los datos (los espacios se convierten en ‘+‘

Como en cada momento viene por defecto el más adecuado no hace falta que te preocupes por esto, pero te los muestro para que lo conozcas.

Tipos de elementos de un formulario

Un formulario puede tener diferentes herramientas para permitir al usuario seleccionar o introducir información. HTML5 incluye múltiples elementos para ofrecer estas herramientas. Éstos son los más utilizados:

• <input> – Para crear campos de entrada, los cuales dependen del atributo type.
• <textarea> – Campo de entrada para insertar múltiples líneas de texto. El tamaño del área se puede especificar con los atributos rows y cols.
• <select> – Crea una lista de opciones para que el usuario pueda elegir una de ellas. En su interior tiene elementos <option>, el cual son cada una de las opciones a escoger.
• <button> – Este elemento crea un botón. En su atributo type se especifica para que destinamos en botón; submit, para enviar el formulario (por defecto), reset, para reiniciar el formulario (borra los datos introducidos), y button, para realizar tareas personalizadas.
• <output> – Se utiliza para representar un resultado producido por el formulario, que se implementará a través de JavaScript para mostrar el resultado de una operación.
• <meter> – Representara una medida o el valor actual de un rango.
• <progress> – Representa el progreso de una operación.
• <datalist> – Crea un listado de valores disponibles para otros controles. También trabaja con el elemento <option> para definir cada uno de los valores.
• <label> – Se utiliza para crear las etiquetas que identifican un elemento en el formulario. A través de del atributo for se vincula con el id del elemento al que pertenece dicha etiqueta.
• <fieldset> – Agrupa otros elementos en el formulario. Se utiliza para agrupar secciones en formularios complejos. Con la etiqueta <legend> se puede definir el título de la agrupación.

Elemento <input>

Este elemento es el más utilizado de todos, dependiendo del atributo type que contenga, puede recibir uno u otro tipo de datos:

Atributo	Tipos de datos que recoge
text	Texto genérico.
email	Acepta formato cuentas de correo.
search	Para insertar términos de búsqueda.
url	Acepta formato para insertar URL.
tel	Formato de números de teléfono.
number	Sólo acepta números.
range	Sólo acepta un rango determinado de números.
date	Formato de entrada tipo fecha.
datetime-local	Campo de entrada para insertar fecha y hora.
week	Acepta número de semana del año.
month	Acepta número del mes.
time	Campo para insertar una hora (horas y minutos).
hidden	Oculta el campo de entrada (información complementaria).
password	Para insertar una clave (oculta la información).
color	Genera un campo para insertar un color.
checkbox	Casilla de control (activar o desactivar opciones).
radio	Seleccionar opción de varias posibles.
file	Para seleccionar un archivo del ordenador.
button	Genera un botón (La acción se genera por JavaScript).
submit	Botón de enviar formulario.
reset	Botón de reiniciar formulario.
image	Carga una imagen. Un atributo src debe contener la dirección.

¿Cómo inserto un formulario?

Para insertar un formulario en tu documento, primero tienes que declararlo con el elemento <form> ... </form>.

Como atributos del formulario usarás el name, method y action para indicar el nombre de tu formulario, el método que vas a utilizar de envío y la página que recibirá y procesará los datos (pero esto es harina de otro costal).

<form name='primerForm' method='POST' action='procesar.php'>
...
</form>

Ahora imagina que quieres hacer un formulario que incluya; nombre, primer apellido, teléfono y correo electrónico.

<form name='registro' method='POST' action='procesar.php'>
<label for='nombre'>Nombre: </label>
<p><input type='text' name='nombre' id='nombre' value=''></p>
<label for='apellido'>Apellido: </label>
<p><input type='text' name='apellido' id='apellido' value='' ></p>
<lable for='telefono'>Teléfono: </label>
<p><input type='tel' name='telefono' id='telefono'  value='' ></p>
<label for='correo'>Correo electrónico: </label>
<p><input type='email' name='correo' id='correo'  value='' ></p>
<input type="submit" id="enviar" value="Enviar"> 
</form>   

Al colocar los elementos <input> dentro de los elementos <p> ... </p> , hace que los campos estén uno encima de otro. Hay diferentes formas de implementar los campos en un formulario, pero ésta es la más apropiada para los lectores de pantalla, porque reconocen qué campo contiene qué.

El atributo id en los formularios es muy importante. Además de identificar cada uno de los campos inequívocamente, se utiliza, como verás, para hacer dinámicos los campos a través de JavaScript.

El atributo value de los <input>, se utiliza para dar un valor por defecto a los campos. En este caso, es un valor vacío que el script de procesamiento cambiará por el valor que se introduzca.

Hay que destacar que los elementos <input> son etiquetas de autocierre, es decir, la etiqueta de cierre </input> no existe.

En próximas entradas profundizaré en todos los tipos de datos que se pueden procesar en un formulario.