Formularios avanzados en HTML: validación sin JavaScript

El atributo type de un <input> no es solo cosmético: cada tipo trae su propio teclado en celular y su propia validación básica gratis.

<form style="display:flex;flex-direction:column;gap:10px;max-width:280px;font-family:sans-serif">
  <label>Correo
    <input type="email" placeholder="tu@correo.com">
  </label>
  <label>Edad
    <input type="number" min="1" max="120">
  </label>
  <label>Fecha
    <input type="date">
  </label>
  <label>Color favorito
    <input type="color">
  </label>
  <button>Enviar</button>
</form>

Estos atributos le agregan reglas extra a cualquier campo: required lo hace obligatorio, minlength/maxlength limitan el largo del texto, y pattern exige una expresión regular —lo que ya viste en el módulo de JavaScript—.

<form style="display:flex;flex-direction:column;gap:10px;max-width:300px;font-family:sans-serif">
  <label>Usuario (obligatorio, 3 a 12 letras)
    <input type="text" required minlength="3" maxlength="12">
  </label>
  <label>Código de región (2 letras mayúsculas)
    <input type="text" pattern="[A-Z]{2}" title="Dos letras mayúsculas, ej: CL">
  </label>
  <button>Enviar</button>
</form>

El atributo title en el segundo campo es lo que el navegador muestra como pista cuando el patrón no calza. No es opcional en la práctica: sin eso, la persona solo ve "esto no cumple el formato" y no sabe cuál es.

CSS puede reaccionar solo, sin JavaScript, cuando un campo no cumple sus reglas: el pseudo-selector :invalid se activa automáticamente.

<style>
  input { padding: 9px; border: 2px solid #ccc; border-radius: 6px; font-size: 15px; }
  input:invalid { border-color: #ff5470; }
  input:valid { border-color: #2ecc71; }
</style>

<form style="display:flex;flex-direction:column;gap:10px;max-width:280px;font-family:sans-serif">
  <label>Correo (escribe y mira el borde cambiar)
    <input type="email" required>
  </label>
</form>

Ya usaste <label> envolviendo el input, que funciona. Pero la forma más flexible es conectarlos con for y un id que coincida: así el label puede ir en cualquier parte y el clic en el texto sigue enfocando el campo.

<form style="display:flex;flex-direction:column;gap:12px;max-width:280px;font-family:sans-serif">
  <div>
    <label for="nombre">Tu nombre</label><br>
    <input id="nombre" type="text">
  </div>
</form>

Tipos de input con validación incluida, required/pattern para reglas extra, :invalid para darles estilo sin JavaScript, y por qué conectar label con for/id importa de verdad.

Justamente de eso trata lo que sigue: hacer que tu página sea usable por cualquiera, no solo por quien ve y usa mouse.

Formularios avanzados

Advanced forms