Cómo crear un formulario en HTML paso a paso

Crear un formulario en HTML consiste en envolver tus campos dentro de una etiqueta <form>, asociar cada campo a su <label> y añadir un botón de envío. El HTML construye la interfaz y la validación básica; para que los datos lleguen a tu correo o a una base de datos necesitas un backend o un servicio externo.

Cómo crear un formulario en HTML paso a paso

Sigue estos cuatro pasos y tendrás un formulario funcional en pocos minutos:

1. Abre la etiqueta <form> y define action (a dónde van los datos) y method (GET o POST).
2. Añade los campos con <input>, cada uno con su <label> y un atributo name único.
3. Marca los campos obligatorios con required y ajusta el type (texto, email, número, fecha).
4. Cierra con un botón de envío usando <button type="submit">.

Este es el formulario mínimo viable, listo para copiar:

<form action="/procesar.php" method="POST">
  <label for="nombre">Nombre</label>
  <input type="text" id="nombre" name="nombre" placeholder="Tu nombre" required>

  <label for="correo">Correo electrónico</label>
  <input type="email" id="correo" name="correo" placeholder="tu@email.com" required>

  <button type="submit">Enviar</button>
</form>

Aquí required obliga a rellenar el campo, placeholder sugiere el formato esperado y name identifica el dato cuando se envía. El atributo for del <label> debe coincidir con el id del <input>: así, al pulsar la etiqueta, el cursor salta al campo correcto.

Las etiquetas que necesitas conocer

Un formulario se monta combinando unas pocas etiquetas. Estas son las que usarás casi siempre:

Para opciones predefinidas, usa <select> y <option>. Si necesitas que el usuario elija una sola opción de varias, emplea radio (todos los botones comparten el mismo name); si puede marcar varias, usa checkbox. Y agrupa los campos relacionados con <fieldset> y un <legend> descriptivo (por ejemplo, “Datos de contacto”): facilita la lectura y la accesibilidad.

GET o POST: qué método elegir

El atributo method decide cómo viajan los datos:

• GET: los parámetros se añaden a la URL. Úsalo para datos no sensibles como búsquedas o filtros, donde compartir el enlace tiene sentido.
• POST: los datos viajan en el cuerpo de la solicitud, no en la URL. Es la opción para datos personales, contraseñas o cualquier información que no quieras exponer.

En ambos casos, publica tus formularios bajo HTTPS para cifrar la transmisión. GET no es “menos seguro” por sí mismo, pero deja los datos a la vista en la URL, el historial y los registros del servidor.

Validación sin escribir JavaScript

HTML5 valida en el propio navegador con solo añadir atributos. Esto evita errores antes de que el formulario llegue al servidor y mejora la experiencia en móviles:

• required: impide enviar el formulario si el campo está vacío.
• pattern: define una expresión regular para validar el formato (por ejemplo, un teléfono).
• min / max y minlength / maxlength: controlan rangos numéricos o longitud de texto.
• type: además de validar, muestra el teclado adecuado en el móvil (numérico para tel, arroba visible para email).

<label for="telefono">Teléfono</label>
<input type="tel" id="telefono" name="telefono"
       pattern="^[0-9\s\-\+]{7,15}$"
       title="Usa entre 7 y 15 dígitos, espacios o guiones">

Para accesibilidad, prioriza siempre <label> visibles en lugar de confiar solo en el placeholder, que desaparece al escribir. Añade title o un texto de ayuda cuando el formato sea complejo y enlázalo con aria-describedby si necesitas instrucciones extra. Y cuida la usabilidad: ordena los campos de arriba abajo, limita el número de preguntas, usa botones grandes en móvil y asegúrate de que todo sea responsive.

Cómo enviar los datos de verdad

Para que el formulario “haga algo” con la información (mandar un correo, guardar en una base, abrir un ticket), el action debe apuntar a un recurso del servidor: un script en PHP, Node, Python o un endpoint de API. Evita depender de mailto:, porque su comportamiento cambia según el dispositivo y el cliente de correo del usuario.

Tres reglas que no debes saltarte:

• Valida también en el servidor. La validación del navegador se puede desactivar; nunca confíes solo en ella.
• Protege contra CSRF con un token por sesión y aplica límites de envío para frenar abusos.
• Filtra el spam con técnicas como honeypots (campos ocultos que solo rellenan los bots) o un CAPTCHA cuando el formulario es público.

Si quieres recoger respuestas sin montar un backend, puedes crear un formulario con Google Forms y embeberlo en tu web: pierdes control del HTML, pero es rápido para encuestas o registros básicos. Y si necesitas alojar tus formularios con control total, esta guía para crear un sitio web con WordPress te servirá. Cuando el objetivo final sea capturar leads o ventas, vale la pena conectar el formulario a un embudo de ventas bien planteado.

Ejemplo completo de formulario en HTML

Este formulario reúne los elementos más habituales: campos de texto, email y contraseña, una lista desplegable, botones de radio, una casilla de verificación y un área de texto. Cópialo y adáptalo a tu caso.

<form action="/procesar.php" method="POST">
  <fieldset>
    <legend>Datos de contacto</legend>
    <label for="nombre2">Nombre</label>
    <input type="text" id="nombre2" name="nombre" required maxlength="60">

    <label for="email2">Correo electrónico</label>
    <input type="email" id="email2" name="email" required>

    <label for="pass">Contraseña</label>
    <input type="password" id="pass" name="password" minlength="8" required>
  </fieldset>

  <fieldset>
    <legend>Preferencias</legend>
    <label for="pais">País</label>
    <select id="pais" name="pais" required>
      <option value="">Selecciona…</option>
      <option value="mx">México</option>
      <option value="es">España</option>
      <option value="ar">Argentina</option>
    </select>

    <p>Boletín:</p>
    <label>
      <input type="radio" name="boletin" value="si" checked> Sí
    </label>
    <label>
      <input type="radio" name="boletin" value="no"> No
    </label>

    <label>
      <input type="checkbox" name="terminos" required> Acepto los términos y condiciones
    </label>
  </fieldset>

  <label for="mensaje">Mensaje</label>
  <textarea id="mensaje" name="mensaje" rows="4" maxlength="500"
            placeholder="Cuéntanos en qué podemos ayudarte"></textarea>

  <button type="submit">Enviar</button>
</form>

Para integrarlo, pega el código en un bloque HTML de tu editor o usa un plugin de formularios si trabajas con un CMS. Recuerda que el formulario solo funcionará por completo cuando el destino del action esté preparado para recibir y procesar los datos.

Preguntas frecuentes

¿Puedo enviar un formulario en HTML directamente a mi correo sin backend?

No de forma fiable. El HTML solo define la interfaz, no procesa nada. Necesitas un script del lado del servidor (PHP, Node, Python) o un servicio de terceros que reciba los datos y envíe el email por ti.

¿Qué método debo usar, GET o POST?

Usa GET para consultas no sensibles como búsquedas o filtros, porque deja los parámetros en la URL y permite compartir el enlace. Usa POST para datos personales, credenciales o cualquier dato privado. En ambos casos, sirve el formulario bajo HTTPS.

¿Cómo valido un email sin JavaScript?

Define el campo como type="email" y el navegador comprobará que tenga un formato válido. Si necesitas reglas más estrictas, añade un atributo pattern con una expresión regular y un title que explique el formato esperado.

¿Cómo reduzco el spam en mis formularios?

Combina varias capas: un honeypot (un campo oculto que solo los bots rellenan), límites en el número de envíos por IP, un CAPTCHA cuando el formulario es público y, sobre todo, validación en el servidor. Confiar solo en la validación del navegador no frena a los bots.

¿Es obligatorio usar la etiqueta <label> en cada campo?

No es obligatorio para que el formulario funcione, pero sí muy recomendable. El <label> mejora la accesibilidad para lectores de pantalla, agranda el área pulsable en móvil y deja claro qué dato pide cada campo. Asocia su for con el id del input.