11. Validaciones HTML5

Curso HTML5 desde cero — Freimel Jerez

HTML5 incluye validaciones automáticas que permiten verificar los datos del usuario sin usar JavaScript.

✅ ¿Qué son las validaciones?

Son reglas que impiden enviar un formulario si los datos no cumplen ciertas condiciones.

📌 Atributos de validación más usados

• required → Campo obligatorio
• type → Valida formato (email, number, url)
• minlength / maxlength
• pattern → Expresiones regulares
• min / max

📄 Ejemplo con required

<input type="text" required>

📧 Validación de correo

<input type="email" required>

🔢 Longitud mínima y máxima

<input type="password" minlength="6" maxlength="12">

🔐 Validación con pattern

<input
  type="text"
  pattern="[0-9]{10}"
  placeholder="Solo números (10 dígitos)">

🧪 Formulario completo con validaciones

<form>

  <label>Nombre</label>
  <input type="text" required>

  <label>Correo</label>
  <input type="email" required>

  <label>Contraseña</label>
  <input type="password" minlength="6" required>

  <button>Enviar</button>

</form>

⚠️ Mensajes del navegador

El navegador muestra mensajes automáticos cuando los datos no son válidos. Esto mejora la experiencia del usuario.

🎥 Video de la lección

Debes ver el video completo para desbloquear la siguiente lección.

✅ Resumen

• HTML5 valida datos sin JavaScript
• Mejora la seguridad y UX
• Siempre valida también en el backend

En la siguiente lección aprenderás a trabajar con enlaces HTML.