Plantillas de Formularios HTML

Una plantilla de formulario HTML es un bloque de marcado de formulario reutilizable y listo para usar que puedes copiar en un proyecto y adaptar. La mayoría de las aplicaciones web necesitan el mismo puñado de formularios una y otra vez — contacto, inicio de sesión, registro, feedback — así que en lugar de construir cada uno desde cero, partes de una plantilla limpia y correcta y solo cambias las etiquetas, los campos y el endpoint de envío.

Trabajar desde una plantilla tiene ventajas reales:

• Consistencia — cada formulario usa la misma estructura, por lo que el estilo y la validación se comportan de forma predecible en todo el sitio.
• Velocidad — omites el código repetitivo y te concentras en los campos que son específicos de tu formulario.
• Accesibilidad por defecto — una buena plantilla ya asocia cada <label> con su control, agrupa los campos relacionados en un <fieldset> y usa los tipos de <input> correctos, para que los lectores de pantalla y los usuarios de teclado tengan una experiencia correcta.
• Menos errores — los errores comunes (una etiqueta que no apunta a nada, un name faltante, el tipo de input incorrecto) ya están resueltos.

Este capítulo te ofrece tres plantillas limpias, válidas y listas para copiar y pegar — un formulario de contacto, un formulario de inicio de sesión y un formulario de registro — además de una referencia rápida a los atributos que los hacen funcionar.

Atributos clave de los formularios

Antes de las plantillas, aquí están los atributos que verás en cada una de ellas:

La regla más importante: cada input necesita una etiqueta, y el for de la etiqueta debe ser igual al id del input. Por eso <p for="..."> no es válido — solo <label> lleva el atributo for.

Plantilla de formulario de contacto

Un formulario de contacto mínimo: un nombre, un email, un mensaje y un botón de envío. Observa el campo type="email", que proporciona validación de formato gratuita en el navegador.

<form action="/contact" method="post">
  <fieldset>
    <legend>Contact us</legend>

    <p>
      <label for="contact-name">Name</label>
      <input type="text" id="contact-name" name="name" required>
    </p>

    <p>
      <label for="contact-email">Email</label>
      <input type="email" id="contact-email" name="email" required>
    </p>

    <p>
      <label for="contact-subject">Subject</label>
      <input type="text" id="contact-subject" name="subject">
    </p>

    <p>
      <label for="contact-message">Message</label>
      <textarea id="contact-message" name="message" rows="5" required></textarea>
    </p>

    <button type="submit">Send message</button>
  </fieldset>
</form>

El <textarea> se usa para entrada de texto de varias líneas. A diferencia de <input>, no tiene atributo value — su contenido va entre las etiquetas de apertura y cierre, y rows establece su altura visible.

Plantilla de formulario de inicio de sesión

Un formulario de inicio de sesión es breve: un identificador (email o nombre de usuario), una contraseña y una casilla opcional de "recuérdame". El campo de contraseña usa type="password" para que los caracteres estén enmascarados.

<form action="/login" method="post">
  <fieldset>
    <legend>Sign in</legend>

    <p>
      <label for="login-email">Email</label>
      <input type="email" id="login-email" name="email" autocomplete="username" required>
    </p>

    <p>
      <label for="login-password">Password</label>
      <input type="password" id="login-password" name="password" autocomplete="current-password" required>
    </p>

    <p>
      <label>
        <input type="checkbox" name="remember" value="yes"> Remember me
      </label>
    </p>

    <button type="submit">Log in</button>
  </fieldset>
</form>

Para una sola casilla de verificación, envolver el texto dentro del <label> es un patrón común y válido — la etiqueta queda entonces asociada implícitamente con el control que contiene, por lo que no necesitas un par for/id. Las sugerencias de autocomplete permiten que el navegador y los gestores de contraseñas rellenen las credenciales correctamente.

Plantilla de formulario de registro

Un formulario de registro es más largo y muestra dos controles adicionales: un desplegable <select> y un grupo de botones de opción. Los botones de opción que comparten el mismo name forman un grupo, por lo que solo se puede seleccionar uno a la vez.

<form action="/register" method="post">
  <fieldset>
    <legend>Create an account</legend>

    <p>
      <label for="reg-name">Full name</label>
      <input type="text" id="reg-name" name="fullname" required>
    </p>

    <p>
      <label for="reg-email">Email</label>
      <input type="email" id="reg-email" name="email" required>
    </p>

    <p>
      <label for="reg-password">Password</label>
      <input type="password" id="reg-password" name="password" autocomplete="new-password" minlength="8" required>
    </p>

    <p>
      <label for="reg-country">Country</label>
      <select id="reg-country" name="country" required>
        <option value="">Choose…</option>
        <option value="us">United States</option>
        <option value="uk">United Kingdom</option>
        <option value="de">Germany</option>
        <option value="other">Other</option>
      </select>
    </p>

    <fieldset>
      <legend>Account type</legend>
      <p>
        <label>
          <input type="radio" name="account" value="personal" checked> Personal
        </label>
        <label>
          <input type="radio" name="account" value="business"> Business
        </label>
      </p>
    </fieldset>

    <p>
      <label>
        <input type="checkbox" name="terms" value="agreed" required> I agree to the terms
      </label>
    </p>

    <button type="submit">Register</button>
  </fieldset>
</form>

Algunas cosas que vale la pena destacar aquí:

• La primera <option value=""> es un marcador de posición no seleccionable. Dado que el <select> es required, el navegador bloquea el envío mientras esa opción vacía esté seleccionada.
• minlength="8" en la contraseña impone una longitud mínima sin necesidad de JavaScript.
• El <fieldset> interno agrupa los botones de opción, y su <legend> actúa como etiqueta para todo el grupo — importante para los usuarios de lectores de pantalla.

Capítulos relacionados

Para profundizar en cada elemento utilizado anteriormente:

• La etiqueta <form> — el contenedor y sus atributos action/method.
• La etiqueta <input> — cada type de input y sus atributos.
• La etiqueta <label> — asociar etiquetas con controles.
• La etiqueta <fieldset> — agrupar campos relacionados con un <legend>.
• La etiqueta <textarea> — entrada de texto de varias líneas.
• La etiqueta <select> — menús desplegables y opciones.
• La etiqueta <button> — botones de envío y restablecimiento.

Para un recorrido más amplio sobre cómo funcionan los formularios, consulta Formularios HTML.

Práctica