Cómo crear un formulario en HTML

Los formularios son la puerta de entrada para recoger datos en la web: desde un sencillo campo de contacto hasta un registro completo con múltiples pasos. En esta guía aprenderás cómo crear un formulario en HTML desde cero, entendiendo qué hace cada etiqueta, cómo validar los datos del usuario y qué necesitas para enviar la información por correo o guardarla en una base de datos.

Ten presente que el HTML define la estructura y la interfaz, pero el envío real de la información (por ejemplo, a tu email o a un servidor) requiere un backend o un servicio externo. Aun así, con HTML puedes construir formularios accesibles, rápidos y listos para integrar con tu sitio o aplicación cuando dispongas del procesamiento del lado del servidor.

Etiquetas básicas para tu formulario en HTML

La base de todo formulario es la etiqueta <form>, que envuelve los campos de entrada. Sus atributos clave son action (URL de destino) y method (normalmente GET o POST). Dentro de <form> colocamos los controles de entrada y su rotulación.

• <input>: campo versátil para texto, email, password, número, fecha, etc. Se define con type (por ejemplo, type="text", type="email").
• <label>: etiqueta textual asociada a un campo. Mejora la accesibilidad y usabilidad. Usa for para enlazar con el id del input.
• <select> y <option>: listas desplegables para seleccionar una o varias opciones.
• <textarea>: campo para texto largo o comentarios.
• <button type="submit">: botón que envía el formulario. También puedes usar <input type="submit">.
• <fieldset> y <legend>: agrupan campos relacionados y añaden contexto semántico.

Escoge GET cuando los datos no sean sensibles (por ejemplo, filtros o búsquedas) porque los parámetros viajan en la URL; y usa POST para datos personales o credenciales, ya que se envían en el cuerpo de la solicitud. En cualquier caso, publica los formularios bajo HTTPS para cifrar la transmisión.

La relación entre label e input es esencial: el label debe describir el propósito del campo y su atributo for debe coincidir con el id del input. Además, cada campo necesita un atributo name porque es la clave con la que viajará el dato al servidor.

<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>

En el ejemplo anterior, required obliga a completar el campo; placeholder sugiere el formato de entrada; y name identifica el dato cuando el formulario se envía.

Para opciones predefinidas, usa select y option. Si necesitas elecciones binarias o múltiples, emplea radio (una única opción dentro del mismo name) o checkbox (múltiples selecciones posibles).

Consejo rápido: agrupa los campos con fieldset y titula el grupo con legend (por ejemplo, “Datos de contacto”). Esto ayuda tanto a la lectura como a la accesibilidad.

Validación, accesibilidad y experiencia de usuario

HTML5 ofrece validación en el navegador sin escribir JavaScript. Atributos como required, min, max, minlength, maxlength, step o pattern reducen errores antes de llegar al servidor. Además, tipos como email, url, number o date mejoran la experiencia en móviles mostrando teclados específicos.

• required: no permite enviar el formulario sin completar el campo.
• pattern: define una expresión regular para validar el formato (por ejemplo, un teléfono).
• min/max, minlength/maxlength: controlan rangos numéricos o longitud del texto.
• type: guía la validación y el teclado apropiado en dispositivos móviles.

<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">

En accesibilidad, prioriza label visibles sobre confiar solo en placeholder. Añade title o textos de ayuda cuando el formato sea complejo y usa mensajes de error claros. Considera atributos como aria-describedby si necesitas enlazar un texto de apoyo adicional.

Si prefieres una alternativa sin programar backend, puedes crear un formulario con Google Forms y embeberlo en tu web. No tendrás control total del HTML, pero es rápido y suficiente para encuestas o registros básicos.

Cuida la usabilidad: organiza los campos de arriba abajo, limita el número de preguntas, usa ayudas de formato (por ejemplo, máscaras de fecha) y asegura que el formulario sea totalmente responsive. En móviles, botones grandes y etiquetas claras marcan la diferencia.

Envío de datos y ejemplo completo

Para que el formulario “haga algo” con los datos (enviar un correo, guardar en una base, crear un ticket), el atributo action debe apuntar a un recurso del servidor (por ejemplo, procesar.php o un endpoint). Evita depender de mailto: porque su comportamiento varía entre dispositivos y clientes de correo.

Usa POST para datos personales y valida también en el servidor (nunca confíes solo en la validación del cliente). Implementa protección CSRF, límites de tasa y un sistema antispam como honeypots o CAPTCHA cuando corresponda.

<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 en tu web, puedes pegar el código en un bloque HTML del editor o usar un plugin de formularios si trabajas con CMS. Si aún no tienes un sitio, aquí tienes una guía para crear un sitio web con WordPress y alojar tus formularios con control total.