Formularios I: inputs, labels y required

Cada login, cada búsqueda, cada compra en internet pasa por un formulario. Hoy aprendes las piezas básicas — y la regla que el 80% de la web hace mal: todo input necesita su label.

form, input y el atributo type

<form>
<label for="nombre">Tu nombre</label>
<input type="text" id="nombre" name="nombre" required>

<label for="correo">Tu correo</label>
<input type="email" id="correo" name="correo" required>

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

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

El atributo type cambia el comportamiento completo del input: email valida que haya un @ y en el celular abre el teclado con @, number solo acepta dígitos y muestra teclado numérico, date despliega un calendario, password oculta lo escrito. Mismo elemento, superpoderes distintos.

La pareja inseparable: label + input

Cada <label> se conecta a su input con for="id-del-input". Esto logra dos cosas que un texto suelto no puede:

1. Hacer clic en el label enfoca el input (área de clic gigante — clave en móvil).
2. El lector de pantalla anuncia "Tu correo, campo de texto" al llegar al input.

¿Y el placeholder?

El placeholder es el texto gris DENTRO del input (una sugerencia de formato, como "ejemplo@correo.com"). Jamás reemplaza al label, por una razón brutal: desaparece cuando el usuario empieza a escribir. Si el usuario se distrae a mitad del formulario, ya no sabe qué le preguntaba cada campo.

<form>
<div>
  <label for="correo">Tu correo</label>
  <input type="email" id="correo" name="correo" placeholder="ejemplo@correo.com" required>
</div>
<div>
  <label for="clave">Tu contraseña</label>
  <input type="password" id="clave" name="clave" required>
</div>
<button type="submit">Probar la validación nativa</button>
</form>

body { font-family: system-ui; padding: 24px; color: #1e293b; }
div { margin-bottom: 16px; display: grid; gap: 4px; max-width: 320px; }
label { font-weight: 600; font-size: 14px; }
input { padding: 8px 12px; border: 1px solid #94a3b8; border-radius: 8px; font-size: 16px; }
button { background: #6D28D9; color: white; border: none; padding: 10px 20px; border-radius: 8px; cursor: pointer; }

Presiona el botón sin llenar nada: el navegador bloquea el envío y señala el primer campo requerido. Eso es required trabajando — validación sin una línea de JavaScript.

Mini-reto

Construye un formulario de registro con: nombre (text), correo (email), fecha de nacimiento (date) y contraseña (password) — cada uno con su label conectado y los cuatro required. Pruébalo enviando vacío y con un correo sin @.

Qué sigue

Formularios II: los campos de selección (select, textarea, radio, checkbox), cómo agruparlos con fieldset y los atributos de validación más finos.