<form> — Todos los inputs
Formulario
El formulario HTML soporta decenas de tipos de entrada. Aquí una demostración completa e interactiva.
Formularios
Etiquetas para capturar datos del usuario de todo tipo.
<progress>
Progreso
Barra de progreso nativa. Atributos value y
max definen el estado actual.
<meter>
Medidor
Medidor de una magnitud escalar conocida. Diferente a
progress: representa un rango con valores óptimos.
<output>
Resultado
Muestra el resultado de un cálculo o acción del usuario. Actúa como contenedor dinámico de salida de formulario.
Constraint Validation API — Playground
Interactivo
La API nativa de validación expone métodos y estados directamente en los elementos. Sin librerías externas.
pattern — expresiones regulares
Validación
Valida el valor contra una expresión regular. Solo aplica cuando el campo no está vacío (combinar con required).
<input pattern="[A-Z]{3}[0-9]{4}"
title="3 letras + 4 dígitos">
<!-- title muestra el mensaje de error -->inputmode · enterkeyhint
Móvil
Controla qué teclado virtual aparece en dispositivos táctiles sin cambiar el tipo de input. enterkeyhint cambia el botón de confirmación.
enterkeyhint: "enter" | "done" | "go" |
"next" | "previous" | "search" | "send"FormData API
JavaScript
Construye pares clave/valor a partir de un formulario para enviarlos con fetch. Soporta archivos y datos multipart de forma nativa.
const fd = new FormData(form);
// Iteración
for (const [key, val] of fd) console.log(key, val);
// Envío async
fetch('/api', { method:'POST', body: fd });Eventos de formulario
Eventos
Los formularios e inputs emiten eventos específicos para detectar cambios, validación y envío.