Generador de formularios HTML
Añade campos, configura labels, validación y opciones del formulario, revisa la vista previa y copia HTML semántico.
Campos del formulario
Campo seleccionado
Se usa para select y radio.
Vista previa
HTML generado
Acerca de este generador de formularios HTML
Esta herramienta crea formularios HTML semánticos desde campos editables. Genera labels, names, ids, atributos de validación, fieldset y botón submit.
Es útil para formularios de contacto rápidos, prototipos, ejemplos de documentación y markup inicial que puedes estilizar en tu propio proyecto.
Cómo usarlo
- Añade campos o carga el formulario de ejemplo.
- Selecciona cada campo para editar tipo, label, name, atributos de validación y opciones.
- Configura action, method, fieldset y botón submit.
- Revisa la vista previa y copia el HTML generado.
Consejos
- Usa labels claros y name attributes estables para que el manejo server-side sea predecible.
- Activa required, min, max, pattern y autocomplete solo cuando coincidan con los datos esperados.
- Usa fieldset y legend cuando los campos pertenezcan a un grupo lógico.
- Usa HTML Attribute Sorter / Cleaner después si quieres normalizar el orden de atributos.
Checks de formulario en producción
Labels accesibles
Cada campo visible debe tener un label claro conectado con for e id para usuarios de teclado y screen readers.
Límites de validación
Atributos client-side como required, pattern, min y max mejoran UX, pero el servidor debe validar las reglas.
Valores autocomplete
Use tokens autocomplete intencionalmente en login, checkout, contacto y perfil para que el navegador rellene campos correctos.
Destino de envío
Revise action y method generados antes de publicar. GET, POST y endpoints externos tienen distinta privacidad y caché.
Comprobaciones de HTML form antes de publicar generated forms
Generated forms son un buen punto de partida, pero labels, validation, autocomplete, privacy y server handling deben confirmarse.
Conecta labels e inputs
Asegura que cada visible field tenga clear label, stable id y matching for attribute para accessibility.
Valida en el server
Client-side required, pattern, min y max mejoran UX, pero backend validation aún debe enforce rules.
Elige autocomplete tokens
Usa autocomplete values para login, checkout, contact y profile forms para que browsers rellenen trusted fields correctamente.
Revisa submission target
Comprueba action, method y external endpoints antes de publicar porque GET y POST tienen distinta privacy y caching behavior.
Herramientas relacionadas
Estas herramientas también pueden resultarle útiles.