Curso de HTML / Formularios HTML: estructura y envío con GET y POST

Un formulario HTML reúne controles cuyos valores pueden enviarse a un destino. name identifica cada dato, action indica adónde se envía y method elige el método de la petición. HTML puede construir la interfaz, pero guardar datos o realizar una búsqueda exige que el servidor implemente el procesamiento correspondiente.

Leer el destino y los nombres de los campos

El siguiente formulario busca un término mediante GET. La ruta /search es ilustrativa: antes de usarla en un sitio necesitas un destino real que acepte esa petición.

<form action="/search" method="get">
  <label for="keyword">Search term</label>
  <input id="keyword" name="q" type="search">
  <button type="submit">Search</button>
</form>

for="keyword" se relaciona con el id del campo; name="q" es la clave del dato enviado. Si escribes HTML, una petición GET a un servidor suele contener ?q=HTML. Un campo con id pero sin name puede seguir teniendo una etiqueta correctamente asociada, aunque su valor normalmente no se incluya en el envío.

Cuando se omiten action y method, el formulario utiliza la URL actual y GET. Para apuntar al documento actual, omite action en lugar de escribir un valor vacío. Si lo escribes explícitamente, debe ser una URL válida y no vacía. La diferencia entre label, id y name se practica por separado.

Elegir GET o POST sin confundirlo con seguridad

GET no es adecuado para enviar contraseñas u otros datos sensibles: los valores aparecen en la URL y pueden quedar en registros o historial. POST no cifra la información por sí mismo. Para datos sensibles necesitas HTTPS y un tratamiento seguro en el servidor, además de elegir un método apropiado.

<form action="/contact" method="post">
  <label for="message">Message</label>
  <textarea id="message" name="message"></textarea>
  <button type="submit">Send</button>
</form>

La ruta /contact no es un servicio de mensajes incluido en este curso. Sin un manejador puede devolver un error. No introduzcas información personal real en los destinos de ejemplo. Un archivo local file:// tampoco reproduce el comportamiento de un servidor HTTP.

Inspeccionar datos con un documento completo

Guarda este documento como inspect-form.html en UTF-8 y ábrelo en el navegador. Al omitir action, utiliza el documento actual para la práctica GET.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Form-data practice</title>
</head>
<body>
  <h1>Inspect submitted fields</h1>
  <form id="inspect-form" method="get">
    <p><label for="query">Search term</label>
      <input id="query" name="q" value="HTML" required></p>
    <p><label for="limit">Result limit</label>
      <input id="limit" name="limit" value="5" readonly></p>
    <p><label for="coupon">Unavailable coupon</label>
      <input id="coupon" name="coupon" value="DEMO" disabled></p>
    <p><label><input type="checkbox" name="news" value="yes" checked> News</label></p>
    <button type="submit">Inspect values in the URL</button>
  </form>
</body>
</html>

Abre las herramientas de desarrollo y utiliza Console para inspeccionar los pares de nombres y valores:

Array.from(new FormData(document.getElementById("inspect-form")).entries())

FormData es una API de la plataforma web que permite construir una lista de datos del formulario. Esta expresión construye e inspecciona la lista; no envía una petición ni ejecuta por sí sola la validación de restricciones.

[["q", "HTML"], ["limit", "5"], ["news", "yes"]]

Inicialmente aparecen q, el límite de solo lectura y la casilla News marcada. El cupón deshabilitado no aparece. Desmarca News y compara la lista: su entrada desaparece. Borra el término de búsqueda y vuelve a inspeccionar: puede aparecer un valor vacío, aunque el botón de envío active la comprobación required y bloquee el envío interactivo. Son dos operaciones distintas.

Comprobar la petición y la respuesta por separado

Para observar una petición HTTP real, sirve la página desde un servidor local o un entorno de pruebas que controles. En Network, envía los valores ficticios y revisa URL, método y parámetros de consulta o cuerpo de la petición. Si hay espacios o caracteres no ASCII, su codificación en la URL no implica que se hayan perdido.

Una respuesta 404 puede señalar un destino inexistente y una 405 un método no admitido. El hecho de que el navegador haya enviado una petición no demuestra que el servidor haya guardado el dato. Quitar atributos de validación no soluciona un manejador ausente.

La referencia de atributos de envío de HTML y el constructor FormData en MDN permiten revisar cada parte.

Encontrar campos que no se envían

Empieza por comprobar name. Después revisa si el control está deshabilitado y, en casillas o botones de opción, si está seleccionado. Un control disabled no se incluye; un control compatible con readonly puede conservar un valor no editable que sí se envía. No todos los tipos de control admiten readonly.

Una carga de archivos requiere configuración adicional del formulario y tratamiento del servidor; añadir un input de archivo no completa ese trabajo. Para investigar por qué un envío interactivo se bloquea antes de llegar a Network, consulta las restricciones de validación del formulario. Restaura los valores iniciales después de comparar cada caso.