Hola, soy Guzmán Fernández García, desarrollador web, y en este vídeo que forma parte del curso “Introducción al desarrollo web”, voy a explicar el uso de formularios en HTML. Puedes encontrarme en mi web guzmanfernandez.com y en Twitter como pieizquierdo. También puedes contactarme a través de mi correo electrónico guzman.fg@gmail.com.

¿Qué son los formularios?

Según la W3C, un formulario HTML es una sección de un documento que contiene contenido normal, código, elementos especiales llamados controles y rótulos para esos controles. Los usuarios normalmente rellenan un formulario modificando sus controles antes de enviarlo a un agente para que lo procese, como un servidor web o un servidor de correo.

¿Para qué se utilizan?

Los formularios permiten que el usuario envíe información al servidor. Algunos ejemplos son formularios de registro, acceso a sitios web, formularios de contacto o incluso los campos para escribir comentarios en redes sociales como Facebook.

Etiquetas básicas de formulario

La etiqueta <form> es fundamental, ya que todo campo que se quiera enviar debe ir entre las etiquetas <form> y </form>. Esta etiqueta no tiene representación gráfica. El atributo action es obligatorio y espera una cadena de texto que especifique la URL o ruta que procesará los datos. Puede ser una ruta absoluta o relativa.

El atributo method indica la forma de enviar la información y acepta dos valores: GET y POST. Si no se especifica, se utiliza GET por defecto. Aunque normalmente decimos algo como “entra en idesweb.es”, es importante distinguir entre ambos métodos:

• GET: los datos enviados son visibles en la URL como parejas nombre=valor. Está limitado en tamaño según el navegador y se utiliza principalmente cuando el resultado será siempre el mismo y puede guardarse, por ejemplo, en un formulario de búsqueda.
• POST: más seguro para información sensible, como contraseñas, ya que los datos no son visibles en la URL. No tiene límite de envío y permite subir archivos al servidor. Por ejemplo, un formulario de registro suele usar POST.

Otros atributos de <form> son:

• accept-charset: lista de juegos de caracteres (por ejemplo, UTF-8 o ISO-8859-1).
• enctype: especifica el tipo de codificación; por defecto es application/x-www-form-urlencoded. Para subir archivos se utiliza multipart/form-data.

La etiqueta <input> es una de las más utilizadas, ya que define gran parte de los controles: entradas de texto, casillas de verificación, botones tipo radio, archivos, contraseñas, campos ocultos y botones. Es importante cerrar correctamente esta etiqueta para cumplir estándares.

Atributos comunes de <input>:

• name: nombre del campo que se enviará al servidor.
• type: define el tipo de control. Por defecto es text. Otros tipos incluyen:
• checkbox: casilla de verificación; se utiliza checked para marcarla por defecto.
• radio: casilla de opción; solo permite seleccionar una opción del grupo con el mismo name.
• file: permite subir archivos; requiere enctype="multipart/form-data" en <form>.
• password: campo de texto enmascarado.
• hidden: campo oculto, útil para información no introducida directamente por el usuario.
• button, submit, reset, image: distintos tipos de botones.

Otros atributos importantes:

• disabled: deshabilita el campo, haciéndolo inutilizable.
• readonly: similar a disabled, pero permite seleccionar y copiar el texto.
• value: valor predeterminado del campo o texto del botón.
• maxlength y size (solo en texto): controlan la longitud máxima y el ancho del campo.

Resumen de consejos prácticos

1. Fuera de las etiquetas <form>, los elementos serán visibles pero no se enviará su información.
2. Especifica siempre el atributo type en <input>.
3. Necesitarás un botón submit para enviar el formulario.
4. Separa contenido de estilos siempre que sea posible para facilitar el mantenimiento.

Conclusión

Los formularios se envían mediante dos métodos: GET y POST. GET es limitado y visible en la URL, útil para resultados que puedan guardarse. POST no tiene límite y es más seguro, además de permitir subir archivos. Todas las etiquetas deben ir entre <form> y </form> para que su información se envíe correctamente. La etiqueta <input> es muy versátil y sirve para la mayoría de los campos de formulario.

Puedes hacerme llegar cualquier duda por correo electrónico o Twitter. Este vídeo es el primero de una serie de dos sobre formularios en HTML; no te pierdas el segundo. Ambos forman parte del curso “Introducción al desarrollo web”, disponible en idesweb.es.

Muchas gracias por tu atención.