Formularios en HTML guía completa

¿Estás aprendiendo y quieres saber correctamente cómo crear formularios HTML? ¿Sí? Pues sigue leyendo, he creado este artículo especialmente para ti.

En los siguientes párrafos encontrarás cuales son las bases para la creación de formularios web. No es una tarea compleja y si te detienes en los siguientes conceptos que te propongo estarás creando tus propios formularios HTML en apenas unos minutos.

En este artículo te propongo aprender:

1. Crear tu primer formulario HTML básico.
2. Los atributos más importantes de los formularios.
3. Qué tipos de formularios existen y cual es su objetivo.
4. Etiquetas básicas para crear campos en un formulario HTML.

1. Cómo crear un formulario HTML básico

Crear un formulario web básico es sencillo, basta con utilizar la etiqueta #lt;form#gt; de HTML, específica para este fin. Esta etiqueta junto a un campo de tipo texto y un simple botón completarán un formulario funcional y con cierto sentido. A continuación el código:

<form>
	<input type="text" name="campo1" />
	<input type="submit" value="enviar" />
</form>

Este código HTML genera un formulario como el siguiente:

En estas líneas de código HTML puedes ver 2 tipos de etiqueta: form e input. La etiqueta form es la encargada de delimitar el formulario, mientras que la etiqueta input indica la creación de un campo apto para escribir texto. ¿Fácil verdad?

Este ejemplo es básico y solo es una muestra para que veas lo rápido que se puede crear un formulario HTML. A continuación vamos a ver cuáles son los atributos más importantes de la etiqueta form.

2. Atributos más importantes de un FORM

Las etiquetas form tienen como cualquier otra etiqueta dos tipos de atributos:

1. Atributos generales (id, class, etc) de HTML.
2. Atributos específicos para formularios: action, method, enctype, etc.

Centrémonos en sus atributos específicos, en concreto los más importantes, con los que podremos configurar cual es el objetivo del formulario y su comportamiento.

A continuación voy a exponerte los siguientes atributos de una etiqueta form:

1. Atributo method: el atributo que controla la forma de enviar los datos al servidor o backend de nuestro desarrollo.
2. Atributo action: este atributo configura a qué página se envía el formulario.
3. Atributo enctype: con este atributo configuraremos la forma de encriptar los datos enviados en el formulario.

2.1 El atributo method

El atributo method es el más esencial e importante de todos los atributos. Este atributo de la etiqueta nos permite indicar cómo se deben de pasar los datos del formulario al servidor, es decir, a nuestro backend o programación PHP, etc.

Este atributo acepta dos valores: get o post. Directamente voy a decirte que para usar bien este parámetro deberás, en un principio, utilizar el valor get para fomularios de tipo búsqueda, y el valor post para formularios de entrada de datos.

Voy a ponerte dos ejemplos de uso, uno para cada valor:

1. Si quisieras crear un formulario de búsqueda de un foro, tienda, etc. deberás indicar get. ¿Por qué? Pues porque este valor indicar al formulario que envíe la información a través de la url, es decir, que estos datos son visibles, modificables y copiables por el usuario para una posterior utilización.
2. Por el contrario, si quieres crear un formulario de entrada de datos para almacenarlos, como podría ser el formulario de un panel de control para subir noticias a una página, deberás utilizar el valor post.

Nota: si no indicas el atributo method en un formulario este se configura automáticamente de tipo GET.

Ahora , para terminar, veamos dos ejemplos, uno con cada valor. 

Ejemplo de formulario de tipo GET

<form method="get">
	<input type="text" name="campo1" />
	<input type="submit" value="enviar" />
</form>

Este formulario añadiría a la URL actual la información de los campos del formulario. Vamos a rellenarlo con un dato cualquiera:

El formulario con la pabra "test", si estuviera en una página de buscador con la url "www.srcodigofuente.es/buscador", tras pulsar el botón "enviar" quedaría la siguiente url "www.srcodigofuente.es/buscador?campo1=test".

Cómo dato adicional, si vas a programar más tarde en PHP, y no lo has visto con anterioridad, me gustaría dejarte cómo leer este dato en PHP:

<?php
$campo1_formulario = $_GET['campo1'];
?>

Ejemplo de formulario tipo POST

Este tipo de formulario es algo más dificil de entender, pero con un poco de práctica y si lees detenidamente mi explicación estoy seguro de que la lograrás.

Para configurar el formulario con envío de datos por método POST haremos:

<form method="post">
	<input type="text" name="campo1" />
	<input type="submit" value="enviar" />
</form>

Este formulario comparte el mismo aspecto que su homónimo de tipo GET, dónde radica su diferencia es cuando lo envíamos. Los datos que se transmiten no se hacen a través de la URL y por lo tanto es una transmisión mucho más segura.

Te recomiendo que pruebes tu mismo el formulario, así que no hay ninguna pista,en el navegador de la información enviada.

Lo más importante es que sepas que sus datos serán enviados igualmente al servidor (programación php o backend), y que serán accesibles de forma similar a un formulario de tipo get. 

Para recuperar el valor del campo enviado en el formulario en PHP lo haremos con el array $_POST:

<?php
//leer datos de tipo POST
$dato_campo1 = $_POST['campo1'];
?>

2.2 El atributo Action

Este atributo tiene un solo objetivo: indicar a que página/url se deben enviar los datos del formulario una vez el usuario lo envíe.

En este campo tendrás que indicar una URL o dejarlo vacío si por el contrario quieres que la información se mande a la misma página en la que se encuentra.

Sí quisiera que una vez confirmado el envío del formulario esta información fuera a parar a una url "www.srcodigofuente.es/form-final" escribiría:

<form action="http://www.srcodigofuente.es/form-final">
	<input type="text" name="campo1" />
	<input type="submit" value="enviar" />
</form>

Este formulario una vez confirmado redirigirá al usuario a la página "https://www.srcodigofuente.es/form-final?campo1=test", en la página de destomp, además, estará disponible la información del formulario.

2.3 El atributo enctype

Este atributo vamos a verlo de forma básica, así que atento a las relaciones valor-uso. Dependiendo del tipo de formulario usaremos un valor:

• Para un formulario de uso general indicarás "application/x-www-form-urlencoded".
• Para un formulario html que permita subir ficheros deberás usar el valor: "multipart/form-data".

Independientemente del tipo de encriptación que utilices siempre podrás recuperar los datos del formulario con los arrays superglobales de PHP $_GET y $_POST.

3. Tipos de formularios HTML

Para ser directos, y que puedas hacerte una idea clara de los tipos de formularios HTML que existen, voy a dividir los tipos de formularios por uso en 2: buscadores y de introducción de información.

3.1 Formulario de tipo buscador

Los formularios de tipo "Buscador", serían aquellos formularios con único objetivo de brindar al usuario la posibilidad de buscar o filtrar información en un sitio web.

Estos formularios deben de tener la capacidad de poder ser guardados en marcadores o copiada su url para un acceso directo a sus resultados de forma posterior.

Para este tipo de formularios usaremos los siguientes atributos y valores:

1. method="get". Para que los datos sean pasados por la URL de forma que se pueda copiar, compartir o guardar en marcadores, de esta forma el usuario puede acceder a los resultados posteriormente.
2. enctype="application/x-www-form-urlencoded". Para codificar los resultados de forma estándar.
3. action="/buscador". Este valor dependerá del destino del buscador, siendo normalmente la misma página para un buscador de un foro, o para otra página para un típico buscador de menú superior.

Ejemplo de formulario buscador

<form method="get" enctype="application/x-www-form-urlencoded" action="/buscador">
	<input type="text" name="texto-busqueda" placeholder="Tu texto aquí" />
	<input type="submit" value="buscar" />
</form>

3.2 Formulario para inserción de datos o archivos

Llamaremos formularios para inserción de datos a los formularios que se encuentran normalmente en paneles de administración o lugares dónde se solicitan datos para realizar un posterior almacenanimeinto.

Estos formularios a diferencia de los anteriores requieren de mayor seguridad y de control para que no se reenvíen sus datos.

Para un formulario de inserción de datos tipo texto/numérico usaremos la siguiente configuración de atributos:

1. method="post". Para que los datos sean pasados de forma oculta y no puedan ser modificados a mano desde una URL. Con esto evitaremos ciertos usos indebidos de los formularios
2. enctype="application/x-www-form-urlencoded". Para codificar los resultados de forma estándar.
3. action="/resultado". Este valor dependerá del destino del formulario siendo normalmente otra página donde se validen los resultados y se almacenen, o en el mismo comprobando si se ha confirmado el envío de datos. 

Ejemplo básico de fomulario de inserción de datos

<form method="post" enctype="application/x-www-form-urlencoded" action="/resultado">
	<input type="text" name="nombre" />
	<input type="text" name="email" />
	<input type="submit" value="registrarse" />
</form>

Ahora que has visto la configuración para un formulario de inserción de datos estándar, vamos a ver cómo crear un formulario que resuelva una de las grandes dudas html: como subir imagenes con html o ficheros.

La única diferencia radica en la configuración del tipo de encriptación y de un campo especial para adjuntar archivos al formulario. En concreto:

1. method="post". Para que los datos sean pasados de forma oculta y no puedan ser modificados a mano desde una URL. Con esto evitaremos ciertos usos indebidos de los formularios.
2. enctype="multipart/form-data". Para codificar los resultados de forma estándar.
3. action="/resultado". Esta url depende de la estrategía de tu proyecto y deberías enviarlo como mínimo a una página donde valides que se ha enviado en el formulario.
4. Campo (input) de tipo file para poder adjuntar ficheros.

Ejemplo básico de fomulario con subida de archivos

<form method="post" enctype="multipart/form-data" action="/resultado">
	<input type="file" name="archivo1" />
	<input type="text" name="nombre-archivo" />
	<input type="submit" value="subir" />
</form>

4. Etiquetas INPUT básicas para crear campos en un formulario HTML.

¡Ya casi lo tienes! Solo toca ver que opciones tenemos a la hora de crear campos en los formularios para la introducción de datos. Las etiquetas siguientes son las más comunes y esenciales para dotar a nuestros formularios de campos apropiados para cada cometido.

Debes saber que toda etiqueta HTML para crear campos en un formulario permite el uso de los atributos generales de este lenguaje de marcas. Es decir, podrás añadirles el atributo id, class, eventos, etc.

Como atributos propios e únicos estas etiquetas tienen principalmente 2:

• El atributo name. Lo habrás visto a lo largo de este artículo, este atributo indica cual el nombre (debe ser único) del campo determinado. Este nombre nos servirá más tarde para referirnos a este dato, ya sea para leerlo en PHP con por ejemplo $_POST['nombre-archivo'] o para acceder a ellos en javascript.
• El atributo value. Este atributo permite definir un valor por defecto para el campo. Por ejemplo podríamos rellenar los campos con valores anteriormente introducidos o por unos determinados. Este atributo existe solo para las etiquetas input.

Para campos de tipo texto corto usaremos los input de tipo text:

<input type="text" name="texto-corto" />

Para crear un espacio más amplio para texto más extenso, donde escribir párrafos sin problemas deberos usar otro tipo de etiqueta, la etiqueta textarea:

<textarea name="texto-grande"></textarea>

Si en tu formulario necesitas un campo de tipo fecha puedes utilizar el input de tipo date disponible en HTML5:

<input type="date" name="fecha" />

Ahora otro básico, los botones, que podremos crearlos de distinta forma y con distinta funcionalidad.

Para botones de tipo confirmación del formulario deberemos indicar tipo submit y usar la etiqueta input o button de HTML. Los siguientes dos botones generan botones con idéntica funcionalidad:

<input type="submit" name="formulario-confirmado" value="Confirmar formulario" />
<button type="submit"  name="formulario-confirmado2">Confirmar formulario</button>

Y para botones de otro uso (por ejemplo para javascript) usaremos las mismas etiquetas pero con el type con el valor button:

<input type="button" name="formulario-confirmado" value="Otro botón" />
<button type="button"  name="formulario-confirmado2">Otro botón/button>

Por último, como extra, podríamos crear botones con la funcionalidad de vaciar todo el formulario, estos botones deben llevar el tipo reset:

<input type="reset" name="formulario-confirmado" value="Otro botón" />
<button type="reset"  name="formulario-confirmado2">Otro botón/button>