Formularios, Validación y UX - Tutorial HTML

Validación de Formularios Integrada

HTML proporciona validación gratuita a través de atributos. El navegador verifica estas reglas antes de enviar un formulario.

Atributos de Validación Comunes

required — el campo debe ser completado

min / max / step — restricciones numéricas

minlength / maxlength — límites de longitud de texto

pattern — coincidencia de expresión regular

type="email" — validación de email

type="url" — validación de URL

Ejemplo de Formulario Accesible

<form>
  <label for="email">Email</label>
  <input
    id="email"
    name="email"
    type="email"
    required
    autocomplete="email"
    aria-describedby="email-help"
  />
  <p id="email-help">Nunca compartiremos tu email.</p>

  <label for="age">Edad</label>
  <input id="age" name="age" type="number" min="13" max="120" />

  <button type="submit">Crear Cuenta</button>
</form>

Fieldset y Legend

Agrupa campos relacionados para claridad y accesibilidad:

<fieldset>
  <legend>Dirección de Envío</legend>
  <label for="city">Ciudad</label>
  <input id="city" name="city" />
</fieldset>

Input Modes para Móvil

Usa inputmode para activar el teclado correcto en móvil sin cambiar las reglas de validación.

<input inputmode="numeric" placeholder="1234" />
<input inputmode="email" placeholder="nombre@ejemplo.com" />

⚠️ Errores de Formularios a Evitar

❌ Inputs sin <label>
❌ Texto placeholder usado como label
❌ Validación personalizada sin mensajes de error
❌ No proporcionar sugerencias de autocomplete