Docs ejecutables de HTML: Formularios HTML

Q: ¿Cómo se crea un formulario en HTML?

Envuelve los campos en , dale a cada campo un name y un , y termina con . Al enviar el formulario, el navegador manda cada pareja name=value a la URL de action.

Q: ¿Qué diferencia hay entre GET y POST en un formulario?

method="get" (el valor por defecto) pone los campos en la URL, como en /search?q=shoes, lo que va bien para búsquedas y filtros que se puedan guardar en marcadores. method="post" los envía en el cuerpo de la petición, que es lo que quieres para inicios de sesión, registros y todo lo que modifica datos.

Q: ¿Por qué no se envía un campo de mi formulario?

No tiene atributo name, o está disabled. Solo se envían los campos con nombre y habilitados. Una casilla de verificación o un botón de opción sin marcar también se omite por completo.

Q: ¿Para qué sirven fieldset y legend?

agrupa campos relacionados y es el título del grupo. Los lectores de pantalla anuncian la leyenda cuando el foco entra en el grupo, que es lo que hace comprensible un grupo de botones de opción, y disabled en un fieldset deshabilita todos los campos que contiene.

Q: ¿Cómo valido un formulario en HTML sin JavaScript?

Usa atributos: required, type="email", minlength, maxlength, min, max y pattern. El navegador bloquea el envío y muestra un mensaje en el primer campo no válido. Valida siempre también en el servidor, porque estas comprobaciones se ejecutan en el navegador del lector y se pueden saltar.

Q: ¿Cómo evito que un formulario recargue la página?

Escucha el evento submit del formulario y llama a event.preventDefault(), luego envía tú los datos con fetch: form.addEventListener('submit', (e) => { e.preventDefault(); fetch(form.action, { method: 'POST', body: new FormData(form) }); }).

Cómo hacer un formulario en HTML

Un formulario es un elemento <form> que contiene campos y un botón de envío. Cada campo necesita un name: es la clave con la que se envía el valor. Rellena el formulario y pulsa Send. La vista previa no envía nada a ningún sitio; muestra exactamente lo que habría enviado el navegador.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Contact form</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; margin-bottom: 10px; }
    input, textarea { display: block; font: inherit; margin-top: 4px; }
  </style>
</head>
<body>
  <form action="/contact" method="post">
    <label>Name <input name="name" autocomplete="name" required></label>
    <label>Email <input type="email" name="email" autocomplete="email" required></label>
    <label>Message <textarea name="message" rows="3"></textarea></label>
    <button type="submit">Send</button>
  </form>
</body>
</html>

Las piezas:

action es la URL a la que van los datos, y method es cómo (post aquí).
name en cada campo. Su valor es lo que escribió el lector.
<label> da nombre a cada campo en pantalla y para los lectores de pantalla (consulta label en HTML).
required y type="email" hacen que el navegador compruebe los campos antes de enviar. Prueba a enviar con el nombre vacío, o con abc como correo.
El botón de envío envía el formulario. Pulsar Enter en un campo de texto también.

action y method: a dónde y cómo van los datos

Atributo	Valores	Por defecto
`action`	Cualquier URL	La URL de la página actual
`method`	`get`, `post`, `dialog`	`get`
`enctype`	`application/x-www-form-urlencoded`, `multipart/form-data`, `text/plain`	`application/x-www-form-urlencoded`

Con method="get", los campos se convierten en la cadena de consulta de la URL: un formulario de búsqueda con name="q" va a /search?q=blue+shoes. Es lo correcto para búsquedas y filtros, porque el resultado se puede guardar en marcadores y compartir. Con method="post", los campos van en el cuerpo de la petición y no aparecen en la barra de direcciones ni en el historial. Usa POST para todo lo que inicia sesión, crea, modifica o borra algo, y para las contraseñas.

Un formulario con subida de archivos (<input type="file">) necesita method="post" y enctype="multipart/form-data", o solo se envía el nombre del archivo. method="dialog" es para un formulario dentro de un <dialog>: al enviarlo se cierra el diálogo en lugar de hacer una petición.

Qué se envía

Solo se envían los campos con name, y solo cuando no están disabled. Pulsa Submit y compara los campos con lo que envía el formulario:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>What is sent</title>
  <style>
    label { display: block; margin-bottom: 6px; }
  </style>
</head>
<body>
  <form>
    <label>With a name <input name="city" value="Lisbon"></label>
    <label>No name <input value="not sent"></label>
    <label>Disabled <input name="country" value="Portugal" disabled></label>
    <label>Read only <input name="zip" value="1100" readonly></label>
    <label><input type="checkbox" name="newsletter" value="yes"> Unchecked box</label>
    <input type="hidden" name="source" value="footer">
    <button type="submit" name="action" value="save">Submit</button>
  </form>
</body>
</html>

El formulario envía city, zip, source y action. El campo sin nombre, el campo deshabilitado y la casilla sin marcar se omiten. Los campos ocultos se envían pero nunca se muestran, y el botón de envío manda su propio name y value porque fue el botón que se usó.

Agrupar campos con fieldset y legend

<fieldset> dibuja una caja alrededor de campos relacionados, y <legend> es su título. Los lectores de pantalla anuncian la leyenda cuando el foco entra en el grupo, que es lo que hace comprensible un conjunto de botones de opción como los de abajo: "Delivery, Standard, botón de opción".

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>fieldset</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    fieldset { border: 1px solid #9ca3af; border-radius: 8px; margin-bottom: 12px; }
    legend { font-weight: 600; padding: 0 6px; }
    label { display: block; margin: 4px 0; }
  </style>
</head>
<body>
  <form>
    <fieldset>
      <legend>Delivery</legend>
      <label><input type="radio" name="delivery" value="standard" checked> Standard</label>
      <label><input type="radio" name="delivery" value="express"> Express</label>
    </fieldset>

    <fieldset disabled>
      <legend>Gift options (unavailable)</legend>
      <label><input type="checkbox" name="wrap" value="yes"> Gift wrap</label>
      <label>Note <input name="note"></label>
    </fieldset>

    <button type="submit">Order</button>
  </form>
</body>
</html>

disabled en un fieldset deshabilita de una vez todos los campos que contiene, y ninguno se envía. Quítalo y los campos de regalo se pueden usar.

Validación integrada: required, pattern y compañía

Los navegadores comprueban estos atributos antes de enviar y muestran un mensaje en el primer campo que falla:

Atributo	Comprueba
`required`	El campo no está vacío (una casilla está marcada)
`type="email"`, `type="url"`	El valor parece una dirección de correo o una URL
`minlength`, `maxlength`	La longitud del texto
`min`, `max`, `step`	El rango de números y fechas
`pattern`	El valor entero coincide con una expresión regular

:invalid y :valid dan estilo a los campos según su estado. :user-invalid suele ser mejor: solo se aplica después de que el lector haya cambiado el campo y pasado a otro, o haya intentado enviar, así que un formulario vacío no se abre lleno de rojo.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Validation</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; margin-bottom: 10px; }
    input { display: block; font: inherit; margin-top: 4px; border: 2px solid #9ca3af; border-radius: 6px; padding: 4px 8px; }
    input:user-invalid { border-color: #dc2626; }
    input:user-valid { border-color: #16a34a; }
    small { color: #4b5563; }
  </style>
</head>
<body>
  <form>
    <label>Username
      <input name="username" required minlength="3" maxlength="16" pattern="[a-z0-9_]+">
      <small>3 to 16 characters: lowercase letters, digits, underscore</small>
    </label>
    <label>Age
      <input type="number" name="age" min="13" max="120" required>
    </label>
    <label>Postcode
      <input name="postcode" pattern="[0-9]{5}" title="Five digits" required>
    </label>
    <button type="submit">Sign up</button>
  </form>
</body>
</html>

Hay tres cosas de pattern que confunden. Debe coincidir con el valor entero (no hacen falta ^ ni $). Solo se ejecuta cuando el campo no está vacío, así que combínalo con required. Y el mensaje de error del navegador es genérico, así que describe el formato con texto visible junto al campo. Chrome y Firefox añaden el texto de title a su mensaje, pero es fácil pasarlo por alto.

Para desactivar las comprobaciones, por ejemplo mientras pruebas la validación de tu servidor, añade novalidate al <form>. Un solo botón de envío puede saltárselas con formnovalidate.

La validación del navegador es una comodidad para el lector. Cualquiera puede editar la página o enviar una petición sin ella, así que el servidor debe volver a comprobar cada valor.

Mensajes personalizados con setCustomValidity

Cuando una regla no se puede escribir como atributo, como "las dos contraseñas deben coincidir", define el mensaje desde JavaScript. Un campo con un mensaje personalizado no vacío es no válido; una cadena vacía lo vuelve válido de nuevo:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Custom validity</title>
  <style>
    label { display: block; margin-bottom: 8px; }
  </style>
</head>
<body>
  <form>
    <label>Password <input type="password" name="password" id="pw" minlength="8" required></label>
    <label>Repeat <input type="password" id="pw2" required></label>
    <button type="submit">Create account</button>
  </form>

  <script>
    const pw = document.querySelector('#pw');
    const pw2 = document.querySelector('#pw2');
    const check = () => {
      pw2.setCustomValidity(pw.value === pw2.value ? '' : 'The passwords do not match.');
    };
    pw.addEventListener('input', check);
    pw2.addEventListener('input', check);
  </script>
</body>
</html>

El campo de repetición no tiene name, así que solo se envía una copia de la contraseña.

Gestionar el envío con JavaScript

Para enviar el formulario sin salir de la página, escucha submit, llama a preventDefault() y lee los campos con FormData. Escuchar submit en lugar del click de un botón captura todas las formas de enviar, incluido Enter, y solo se ejecuta después de que la validación integrada haya pasado:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Submit with JavaScript</title>
  <style>
    pre { background: #e5e7eb; padding: 8px; }
  </style>
</head>
<body>
  <form id="signup">
    <input name="email" type="email" placeholder="Email" required>
    <select name="plan">
      <option value="free">Free</option>
      <option value="pro">Pro</option>
    </select>
    <button type="submit">Join</button>
  </form>
  <pre id="out"></pre>

  <script>
    const form = document.querySelector('#signup');
    form.addEventListener('submit', (event) => {
      event.preventDefault();
      const data = Object.fromEntries(new FormData(form));
      document.querySelector('#out').textContent = JSON.stringify(data, null, 2);
      // A real page would send it: fetch('/api/signup', { method: 'POST', body: new FormData(form) })
    });
  </script>
</body>
</html>

Object.fromEntries(new FormData(form)) convierte los campos en un objeto simple. Para campos que pueden tener varios valores (casillas que comparten nombre, un select múltiple) usa formData.getAll('name'), porque el objeto solo conserva el último valor.

Errores comunes

Campos sin name. Se omiten sin avisar de los datos enviados.
Placeholders en lugar de etiquetas. La pista desaparece en cuanto el lector escribe. Usa un <label>.
Un <button> sin type usado para algo que no es enviar. Dentro de un formulario es un botón de envío.
Un formulario dentro de otro. Anidar formularios no es válido; el navegador ignora la etiqueta <form> interior.
Escuchar click en el botón de envío en lugar de submit en el formulario. Los envíos con la tecla Enter se pierden.
Confiar en la validación del navegador en el lado del servidor. Valida otra vez allí.
GET para contraseñas. Acaban en la URL, en el historial y en los registros del servidor.

Preguntas frecuentes

¿Cómo se crea un formulario en HTML?

Envuelve los campos en <form action="/signup" method="post">, dale a cada campo un name y un <label>, y termina con <button type="submit">. Al enviar el formulario, el navegador manda cada pareja name=value a la URL de action.

¿Qué diferencia hay entre GET y POST en un formulario?

method="get" (el valor por defecto) pone los campos en la URL, como en /search?q=shoes, lo que va bien para búsquedas y filtros que se puedan guardar en marcadores. method="post" los envía en el cuerpo de la petición, que es lo que quieres para inicios de sesión, registros y todo lo que modifica datos.

¿Por qué no se envía un campo de mi formulario?

No tiene atributo name, o está disabled. Solo se envían los campos con nombre y habilitados. Una casilla de verificación o un botón de opción sin marcar también se omite por completo.

¿Para qué sirven fieldset y legend?

<fieldset> agrupa campos relacionados y <legend> es el título del grupo. Los lectores de pantalla anuncian la leyenda cuando el foco entra en el grupo, que es lo que hace comprensible un grupo de botones de opción, y disabled en un fieldset deshabilita todos los campos que contiene.

¿Cómo valido un formulario en HTML sin JavaScript?

Usa atributos: required, type="email", minlength, maxlength, min, max y pattern. El navegador bloquea el envío y muestra un mensaje en el primer campo no válido. Valida siempre también en el servidor, porque estas comprobaciones se ejecutan en el navegador del lector y se pueden saltar.

¿Cómo evito que un formulario recargue la página?

Escucha el evento submit del formulario y llama a event.preventDefault(), luego envía tú los datos con fetch: form.addEventListener('submit', (e) => { e.preventDefault(); fetch(form.action, { method: 'POST', body: new FormData(form) }); }).

Conceptos relacionados