Formularios HTML: Validación, accesibilidad y buenas prácticas

Los formularios son el puente entre los usuarios y tu aplicación. Un formulario mal construido frustra a los usuarios, genera errores en la captura de datos y afecta la experiencia general del sitio. Este post te muestra cómo construir formularios HTML sólidos, accesibles y validados desde el navegador.

Estructura semántica y atributos básicos

Un formulario comienza con la etiqueta <form>. No es solo un contenedor visual; es el elemento que permite que los navegadores y herramientas de asistencia comprendan que estamos ante un formulario. Establece el atributo action para indicar dónde se enviarán los datos y method para definir cómo (GET o POST).

html

<form action="/contacto" method="POST" novalidate>
  <!-- Los campos van aquí -->
</form>

El atributo novalidate desactiva la validación del navegador si prefieres manejarla completamente con JavaScript. En muchos casos, es mejor confiar en la validación nativa del navegador como primera línea de defensa.

El atributo `<label>` es obligatorio

Cada campo de entrada debe estar asociado a una etiqueta <label>. Esto no es solo accesibilidad: es una norma de usabilidad. Los usuarios en dispositivos móviles necesitan áreas más grandes para tocar, y las etiquetas cumplen ese rol.

html

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

El atributo for de la etiqueta debe coincidir exactamente con el id del campo. Cuando lo hagas, hacer clic en la etiqueta activará el campo automáticamente.

Tipos de input modernos: más allá de `type="text"`

HTML5 introdujo tipos de input especializados. Cada uno no solo valida automáticamente el formato; también abre teclados específicos en dispositivos móviles. Usar el tipo correcto es una victoria para accesibilidad y UX.

Inputs de contacto y comunicación

`type="email"`

Valida automáticamente que el valor sea un email válido. En dispositivos móviles, abre el teclado con el símbolo @ destacado.

html

<input type="email" name="contact_email" required />

`type="tel"`

Indica que el campo es para números telefónicos. Abre un teclado numérico en móviles.

html

<input type="tel" name="phone" placeholder="+34 912 345 678" />

`type="number"`

Valida que el valor sea un número. Incluye controles de incremento/decremento.

html

<input type="number" name="quantity" min="1" max="100" value="1" />

`type="date"` y `type="time"`

Abre un selector nativo de fecha u hora. No necesitas jQuery datepicker.

html

<label for="appointment">Fecha de cita</label>
<input type="date" id="appointment" name="appointment" required />

<label for="arrival">Hora de llegada</label>
<input type="time" id="arrival" name="arrival" />

`type="url"`

Valida URLs. Útil para enlaces, sitios web, etc.

html

<input type="url" name="website" placeholder="https://ejemplo.com" />

`type="password"`

Oculta el texto escribido (aunque modernamente muchos navegadores ofrecen un toggle para mostrarlo).

html

<input type="password" name="password" required />

Validación HTML nativa

La validación del navegador es potente y gratuita. Usa estos atributos para decirle al navegador qué esperas:

`required`

El campo es obligatorio. El formulario no se envía si está vacío.

html

<input type="text" name="name" required />

`minlength` y `maxlength`

Define longitudes mínimas y máximas para texto.

html

<input type="password" name="password" minlength="8" required /> <input type="text" name="username" maxlength="30" />

`min` y `max`

Para números, fechas y otros tipos numéricos.

html

<input type="number" name="age" min="18" max="120" /> <input type="date" name="start" min="2026-01-01" />

`pattern`

Valida contra una expresión regular. Útil para formatos específicos.

html

<input type="text" name="postal_code" pattern="^\d{5}$" placeholder="Ej: 12345" />

`step`

Define el incremento válido para números.

html

<input type="number" name="price" step="0.01" min="0" />

Atributos de accesibilidad (ARIA y más)

`aria-label` y `aria-describedby`

Cuando una etiqueta visual no es suficiente o un campo necesita contexto adicional, usa ARIA.

html

<input type="search" placeholder="Buscar productos..." aria-label="Campo de búsqueda de productos" />

<input type="password" aria-describedby="pwd-hint" required />
<small id="pwd-hint">Mínimo 8 caracteres, incluye mayúsculas y números.</small>

`aria-invalid` y `aria-required`

Para formularios con validación JavaScript, comunica el estado a lectores de pantalla.

html

<input type="email" aria-invalid="false" aria-required="true" />

`aria-live`

Notifica cambios dinámicos, como mensajes de error.

html

<div aria-live="polite" role="alert">
  <!-- Los errores aparecen aquí -->
</div>

Validación combinada: HTML + JavaScript

La validación HTML es suficiente para muchos casos, pero la validación del servidor es obligatoria. Aquí se muestra cómo combinar ambas:

html

<form id="contactForm" method="POST" action="/api/contact">
  <div>
    <label for="name">Nombre</label>
    <input type="text" id="name" name="name" required minlength="2" />
    <span id="nameError" class="error" aria-live="polite"></span>
  </div>

  <div>
    <label for="email">Correo</label>
    <input type="email" id="email" name="email" required />
    <span id="emailError" class="error" aria-live="polite"></span>
  </div>

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

<script>
  const form = document.getElementById("contactForm");
  const nameInput = document.getElementById("name");
  const nameError = document.getElementById("nameError");

  form.addEventListener("submit", (e) => {
    e.preventDefault();
    nameError.textContent = "";

    if (nameInput.value.trim().length < 2) {
      nameError.textContent = "El nombre debe tener al menos 2 caracteres.";
      nameInput.setAttribute("aria-invalid", "true");
      return;
    }

    nameInput.setAttribute("aria-invalid", "false");
    // Continuar con el envío
    form.submit();
  });

  nameInput.addEventListener("invalid", (e) => {
    e.preventDefault();
    if (nameInput.validity.valueMissing) {
      nameError.textContent = "El nombre es obligatorio.";
    } else if (nameInput.validity.tooShort) {
      nameError.textContent = "El nombre es demasiado corto.";
    }
  });
</script>

Campos agrupados y fieldset

Cuando tienes campos relacionados, agrupalos con <fieldset> y etiquétalos con <legend>. Es especialmente útil para opciones múltiples.

html

<fieldset>
  <legend>¿Cuál es tu experiencia con frontend?</legend>

  <div>
    <input type="radio" id="beginner" name="experience" value="beginner" />
    <label for="beginner">Principiante</label>
  </div>

  <div>
    <input type="radio" id="intermediate" name="experience" value="intermediate" />
    <label for="intermediate">Intermedio</label>
  </div>

  <div>
    <input type="radio" id="expert" name="experience" value="expert" />
    <label for="expert">Experto</label>
  </div>
</fieldset>

`<select>`, `<textarea>` y otros elementos

`<select>` con opciones

Estructura clara para listas desplegables.

html

<label for="country">País</label>
<select id="country" name="country" required>
  <option value="">-- Selecciona un país --</option>
  <option value="es">España</option>
  <option value="mx">México</option>
  <option value="ar">Argentina</option>
</select>

`<textarea>` para texto largo

html

<label for="message">Mensaje</label> <textarea id="message" name="message" rows="5" maxlength="500" placeholder="Cuéntanos tu consulta..."></textarea>

`<datalist>` para sugerencias

Combina un campo de texto con una lista de opciones sugeridas.

html

<label for="skill">Habilidad técnica</label>
<input list="skills" id="skill" name="skill" />
<datalist id="skills">
  <option value="HTML"></option>
  <option value="CSS"></option>
  <option value="JavaScript"></option>
  <option value="React"></option>
</datalist>

Espaciado y estructura visual

La accesibilidad no es solo código: es también diseño. Usa <fieldset> y agrupa visualmente los campos relacionados.

html

<form>
  <fieldset>
    <legend>Datos personales</legend>
    <!-- Campos de persona -->
  </fieldset>

  <fieldset>
    <legend>Datos de envío</legend>
    <!-- Campos de dirección -->
  </fieldset>

  <button type="submit">Confirmar pedido</button>
</form>

Validación en el servidor: la línea final

Importante: La validación del navegador es un comodín para el usuario, pero no es segura. Siempre valida en el servidor.

javascript

// Pseudocódigo Node.js
app.post("/api/contact", (req, res) => {
  const { name, email, message } = req.body;

  if (!name || name.trim().length < 2) {
    return res.status(400).json({ error: "Nombre inválido." });
  }

  if (!email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
    return res.status(400).json({ error: "Email inválido." });
  }

  if (!message || message.trim().length < 10) {
    return res.status(400).json({ error: "Mensaje muy corto." });
  }

  // Procesar y guardar
  res.json({ success: true });
});

Conclusión

Los formularios HTML modernos no necesitan librerías pesadas. El navegador ofrece validación integrada, tipos de input especializados y atributos ARIA para accesibilidad.

Estructura semántica y atributos básicos

html

<form action="/contacto" method="POST" novalidate>
  <!-- Los campos van aquí -->
</form>

El atributo `<label>` es obligatorio

html

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

El atributo for de la etiqueta debe coincidir exactamente con el id del campo. Cuando lo hagas, hacer clic en la etiqueta activará el campo automáticamente.

Tipos de input modernos: más allá de `type="text"`

Inputs de contacto y comunicación

`type="email"`

Valida automáticamente que el valor sea un email válido. En dispositivos móviles, abre el teclado con el símbolo @ destacado.

html

<input type="email" name="contact_email" required />

`type="tel"`

Indica que el campo es para números telefónicos. Abre un teclado numérico en móviles.

html

<input type="tel" name="phone" placeholder="+34 912 345 678" />

`type="number"`

Valida que el valor sea un número. Incluye controles de incremento/decremento.

html

<input type="number" name="quantity" min="1" max="100" value="1" />

`type="date"` y `type="time"`

Abre un selector nativo de fecha u hora. No necesitas jQuery datepicker.

html

<label for="appointment">Fecha de cita</label>
<input type="date" id="appointment" name="appointment" required />

<label for="arrival">Hora de llegada</label>
<input type="time" id="arrival" name="arrival" />

`type="url"`

Valida URLs. Útil para enlaces, sitios web, etc.

html

<input type="url" name="website" placeholder="https://ejemplo.com" />

`type="password"`

Oculta el texto escribido (aunque modernamente muchos navegadores ofrecen un toggle para mostrarlo).

html

<input type="password" name="password" required />

Validación HTML nativa

La validación del navegador es potente y gratuita. Usa estos atributos para decirle al navegador qué esperas:

`required`

El campo es obligatorio. El formulario no se envía si está vacío.

html

<input type="text" name="name" required />

`minlength` y `maxlength`

Define longitudes mínimas y máximas para texto.

html

<input type="password" name="password" minlength="8" required /> <input type="text" name="username" maxlength="30" />

`min` y `max`

Para números, fechas y otros tipos numéricos.

html

<input type="number" name="age" min="18" max="120" /> <input type="date" name="start" min="2026-01-01" />

`pattern`

Valida contra una expresión regular. Útil para formatos específicos.

html

<input type="text" name="postal_code" pattern="^\d{5}$" placeholder="Ej: 12345" />

`step`

Define el incremento válido para números.

html

<input type="number" name="price" step="0.01" min="0" />

Atributos de accesibilidad (ARIA y más)

`aria-label` y `aria-describedby`

Cuando una etiqueta visual no es suficiente o un campo necesita contexto adicional, usa ARIA.

html

<input type="search" placeholder="Buscar productos..." aria-label="Campo de búsqueda de productos" />

<input type="password" aria-describedby="pwd-hint" required />
<small id="pwd-hint">Mínimo 8 caracteres, incluye mayúsculas y números.</small>

`aria-invalid` y `aria-required`

Para formularios con validación JavaScript, comunica el estado a lectores de pantalla.

html

<input type="email" aria-invalid="false" aria-required="true" />

`aria-live`

Notifica cambios dinámicos, como mensajes de error.

html

<div aria-live="polite" role="alert">
  <!-- Los errores aparecen aquí -->
</div>

Validación combinada: HTML + JavaScript

La validación HTML es suficiente para muchos casos, pero la validación del servidor es obligatoria. Aquí se muestra cómo combinar ambas:

html

<form id="contactForm" method="POST" action="/api/contact">
  <div>
    <label for="name">Nombre</label>
    <input type="text" id="name" name="name" required minlength="2" />
    <span id="nameError" class="error" aria-live="polite"></span>
  </div>

  <div>
    <label for="email">Correo</label>
    <input type="email" id="email" name="email" required />
    <span id="emailError" class="error" aria-live="polite"></span>
  </div>

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

<script>
  const form = document.getElementById("contactForm");
  const nameInput = document.getElementById("name");
  const nameError = document.getElementById("nameError");

  form.addEventListener("submit", (e) => {
    e.preventDefault();
    nameError.textContent = "";

    if (nameInput.value.trim().length < 2) {
      nameError.textContent = "El nombre debe tener al menos 2 caracteres.";
      nameInput.setAttribute("aria-invalid", "true");
      return;
    }

    nameInput.setAttribute("aria-invalid", "false");
    // Continuar con el envío
    form.submit();
  });

  nameInput.addEventListener("invalid", (e) => {
    e.preventDefault();
    if (nameInput.validity.valueMissing) {
      nameError.textContent = "El nombre es obligatorio.";
    } else if (nameInput.validity.tooShort) {
      nameError.textContent = "El nombre es demasiado corto.";
    }
  });
</script>

Campos agrupados y fieldset

Cuando tienes campos relacionados, agrupalos con <fieldset> y etiquétalos con <legend>. Es especialmente útil para opciones múltiples.

html

<fieldset>
  <legend>¿Cuál es tu experiencia con frontend?</legend>

  <div>
    <input type="radio" id="beginner" name="experience" value="beginner" />
    <label for="beginner">Principiante</label>
  </div>

  <div>
    <input type="radio" id="intermediate" name="experience" value="intermediate" />
    <label for="intermediate">Intermedio</label>
  </div>

  <div>
    <input type="radio" id="expert" name="experience" value="expert" />
    <label for="expert">Experto</label>
  </div>
</fieldset>

`<select>`, `<textarea>` y otros elementos

`<select>` con opciones

Estructura clara para listas desplegables.

html

<label for="country">País</label>
<select id="country" name="country" required>
  <option value="">-- Selecciona un país --</option>
  <option value="es">España</option>
  <option value="mx">México</option>
  <option value="ar">Argentina</option>
</select>

`<textarea>` para texto largo

html

<label for="message">Mensaje</label> <textarea id="message" name="message" rows="5" maxlength="500" placeholder="Cuéntanos tu consulta..."></textarea>

`<datalist>` para sugerencias

Combina un campo de texto con una lista de opciones sugeridas.

html

<label for="skill">Habilidad técnica</label>
<input list="skills" id="skill" name="skill" />
<datalist id="skills">
  <option value="HTML"></option>
  <option value="CSS"></option>
  <option value="JavaScript"></option>
  <option value="React"></option>
</datalist>

Espaciado y estructura visual

La accesibilidad no es solo código: es también diseño. Usa <fieldset> y agrupa visualmente los campos relacionados.

html

<form>
  <fieldset>
    <legend>Datos personales</legend>
    <!-- Campos de persona -->
  </fieldset>

  <fieldset>
    <legend>Datos de envío</legend>
    <!-- Campos de dirección -->
  </fieldset>

  <button type="submit">Confirmar pedido</button>
</form>

Validación en el servidor: la línea final

Importante: La validación del navegador es un comodín para el usuario, pero no es segura. Siempre valida en el servidor.

javascript

// Pseudocódigo Node.js
app.post("/api/contact", (req, res) => {
  const { name, email, message } = req.body;

  if (!name || name.trim().length < 2) {
    return res.status(400).json({ error: "Nombre inválido." });
  }

  if (!email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
    return res.status(400).json({ error: "Email inválido." });
  }

  if (!message || message.trim().length < 10) {
    return res.status(400).json({ error: "Mensaje muy corto." });
  }

  // Procesar y guardar
  res.json({ success: true });
});

Conclusión

Los formularios HTML modernos no necesitan librerías pesadas. El navegador ofrece validación integrada, tipos de input especializados y atributos ARIA para accesibilidad.

Estructura semántica y atributos básicos

El atributo <label> es obligatorio

Tipos de input modernos: más allá de type="text"

Inputs de contacto y comunicación

type="email"

type="tel"

type="number"

type="date" y type="time"

type="url"

type="password"

Validación HTML nativa

required

minlength y maxlength

min y max

pattern

step

Atributos de accesibilidad (ARIA y más)

aria-label y aria-describedby

aria-invalid y aria-required

aria-live

Validación combinada: HTML + JavaScript

Campos agrupados y fieldset

<select>, <textarea> y otros elementos

<select> con opciones

<textarea> para texto largo

<datalist> para sugerencias

Espaciado y estructura visual

Validación en el servidor: la línea final

Conclusión

Lo más importante

Estructura semántica y atributos básicos

El atributo <label> es obligatorio

Tipos de input modernos: más allá de type="text"

Inputs de contacto y comunicación

type="email"

type="tel"

type="number"

type="date" y type="time"

type="url"

type="password"

Validación HTML nativa

required

minlength y maxlength

min y max

pattern

step

Atributos de accesibilidad (ARIA y más)

aria-label y aria-describedby

aria-invalid y aria-required

aria-live

Validación combinada: HTML + JavaScript

Campos agrupados y fieldset

<select>, <textarea> y otros elementos

<select> con opciones

<textarea> para texto largo

<datalist> para sugerencias

Espaciado y estructura visual

Validación en el servidor: la línea final

Conclusión

Lo más importante

HTML Semántico: Importancia de los Elementos Estructurales

Creando un Tooltip reutilizable con JavaScript Vanilla

Atributos data-* en HTML: Almacena datos personalizados en tu DOM

HTML Semántico: Importancia de los Elementos Estructurales

Creando un Tooltip reutilizable con JavaScript Vanilla

Atributos data-* en HTML: Almacena datos personalizados en tu DOM

El atributo `<label>` es obligatorio

Tipos de input modernos: más allá de `type="text"`

`type="email"`

`type="tel"`

`type="number"`

`type="date"` y `type="time"`

`type="url"`

`type="password"`

`required`

`minlength` y `maxlength`

`min` y `max`

`pattern`

`step`

`aria-label` y `aria-describedby`

`aria-invalid` y `aria-required`

`aria-live`

`<select>`, `<textarea>` y otros elementos

`<select>` con opciones

`<textarea>` para texto largo

`<datalist>` para sugerencias

El atributo `<label>` es obligatorio

Tipos de input modernos: más allá de `type="text"`

`type="email"`

`type="tel"`

`type="number"`

`type="date"` y `type="time"`

`type="url"`

`type="password"`

`required`

`minlength` y `maxlength`

`min` y `max`

`pattern`

`step`

`aria-label` y `aria-describedby`

`aria-invalid` y `aria-required`

`aria-live`

`<select>`, `<textarea>` y otros elementos

`<select>` con opciones

`<textarea>` para texto largo

`<datalist>` para sugerencias