El Atributo METHOD

Se utiliza dentro de la etiqueta FORM para definir cómo se envían los datos del formulario al servidor.

El atributo method en HTML se utiliza dentro de la etiqueta <form> para definir cómo se envían los datos del formulario al servidor. Este atributo es fundamental para controlar el flujo de información en aplicaciones web. Aquí te explicamos su uso paso a paso:

¿Qué es el Atributo method?

  • Propósito: Especifica el método HTTP utilizado para enviar los datos del formulario. Los valores posibles son:

    • get: Los datos se envían como parámetros en la URL (visible en la barra de direcciones).

    • post: Los datos se envían en el cuerpo de la solicitud HTTP (no visible en la URL).

  • Importancia: Afecta la seguridad, visibilidad de los datos y capacidad para manejar información sensible.

Sintaxis Básica

<form action="/procesar-datos" method="get|post">
  <!-- Campos del formulario -->
  <input type="text" name="usuario">
  <button type="submit">Enviar</button>
</form>
  • action: Define la URL del servidor que procesará los datos.

  • method: Indica el método de envío (get o post).

Diferencias entre GET y POST

Característica GET POST
Visibilidad de datos Datos visibles en la URL (ej: ?usuario=Ana). Datos ocultos en el cuerpo de la solicitud.
Uso recomendado Búsquedas, filtros, datos no sensibles. Login, envío de contraseñas, datos largos.
Límite de tamaño Limitado por la longitud máxima de la URL (~2048 caracteres). Sin límite práctico.
Seguridad Menos seguro (datos expuestos). Más seguro (datos no visibles).
Cacheable Sí (los parámetros se guardan en historial). No.

Ejemplos Prácticos

Ejemplo 1: Usando method="get" (Búsqueda)

<form action="/buscar" method="get">
  <label for="busqueda">Buscar:</label>
  <input type="text" id="busqueda" name="q">
  <button type="submit">Buscar</button>
</form>

Resultado: Al enviar, la URL será /buscar?q=termino-de-busqueda.

Ejemplo 2: Usando method="post" (Login)

<form action="/login" method="post">
  <label for="email">Correo:</label>
  <input type="email" id="email" name="email" required>
  
  <label for="password">Contraseña:</label>
  <input type="password" id="password" name="password" required>
  
  <button type="submit">Iniciar sesión</button>
</form>

Resultado: Los datos se envían de forma segura sin aparecer en la URL.

¿Cuándo Usar GET o POST?

Usa GET cuando:

  • Necesitas que los datos sean bookmarkeables (ej: resultados de búsqueda).

  • Los datos no son sensibles (ej: filtros de productos).

  • Quieres permitir que los usuarios compartan la URL con parámetros.

Usa POST cuando:

  • Envías información sensible (contraseñas, datos personales).

  • Los datos son largos (ej: texto de un blog).

  • Realizas acciones que modifican el servidor (ej: eliminar un registro).

Buenas Prácticas

Nunca uses GET para contraseñas: Los datos quedarán expuestos en la URL y el historial.

Valida datos en el servidor: El método post no es seguro por sí solo; siempre valida y sanitiza los datos recibidos.

Usa HTTPS: Para proteger los datos enviados, especialmente con post.

Combina con enctype para archivos: Si el formulario incluye <input type="file">, usa:

<form method="post" enctype="multipart/form-data">

Errores Comunes

Error 1: Usar GET para enviar datos sensibles

<!-- Incorrecto -->
<form method="get" action="/login">
  <input type="password" name="password">
</form>

Error 2: Olvidar el atributo action

<!-- Incorrecto: Sin acción, el formulario se envía a la misma página -->
<form method="post">
</form>

Cómo se Ven los Datos en el Servidor

  • Con GET: Los datos se reciben en la URL (ej: en PHP, $_GET['usuario']).

  • Con POST: Los datos se reciben en el cuerpo de la solicitud (ej: en PHP, $_POST['usuario']).

Ejemplo Avanzado: Formulario con Subida de Archivos

<form action="/subir-archivo" method="post" enctype="multipart/form-data">
  <label for="archivo">Subir archivo:</label>
  <input type="file" id="archivo" name="archivo">
  <button type="submit">Subir</button>
</form>

Conclusión

El atributo method es esencial para controlar cómo se envían los datos en HTML. Al elegir correctamente entre get y post, garantizas seguridad, usabilidad y eficiencia en tus formularios. ¡Úsalo estratégicamente para construir aplicaciones web robustas y seguras!