HTML

Formularios básicos en HTML: label, input y validación nativa

Construye formularios claros, accesibles y funcionales con HTML puro.

¿Cuánto sabes de HTML?

📘 Teoría

Fundamentos de un formulario usable

Si el usuario duda qué escribir, el formulario está mal diseñado. ✍️

Elige `type` según dato real: `email`, `password`, `tel`, `number`... Esto mejora teclado móvil y validación.

Agrupa campos relacionados con `fieldset` y `legend` cuando la forma tenga varias partes.

label + for

Conecta texto y control de forma explícita.

type correcto

Ahorra errores y mejora UX.

required

Evita envíos vacíos de forma nativa.

Patrón base que deberías repetir

Simple, claro y mantenible.

No uses solo placeholder como etiqueta.
Define `name` en controles que se van a enviar.
Mantén labels cortos y concretos.

Formulario de contacto básico

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

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

  <label for="mensaje">Mensaje</label>
  <textarea id="mensaje" name="mensaje" rows="4" required></textarea>

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

Errores que debes evitar desde ya

Son fallos pequeños que rompen conversiones.

Inputs sin label asociado.
Usar `type="text"` para email o teléfono.
No marcar obligatorios los campos críticos.
Botón sin `type="submit"` en formularios simples.

1 Fundamentos de un formulario usable 2 Patrón base que deberías repetir 3 Errores que debes evitar desde ya

🧪 Aprende probando

Ejemplo Ejemplo guiado: mini registro Formulario corto con validación nativa y estructura correcta.

⌄

Ejemplo Demo interactiva: estructura nativa con fieldset, legend y optgroup Explora una base profesional de formulario con agrupación semántica y controles clave.

⌄

Ejemplo Demo interactiva: laboratorio de formulario nativo Cambia label, tipo, ayuda y validación para ver cómo mejora un campo real sin usar JavaScript.

⌄