Generador de formularios HTML
Arrastra campos al lienzo, edita etiquetas, textos de ejemplo y reglas de validación, y observa cómo se actualiza una vista previa funcional sobre la marcha. Copia HTML y CSS limpios y accesibles que funcionan con cualquier backend, o descarga una página completa.
Última actualización:
Campos del formulario
Propiedades del campo
Cómo usar Generador de formularios HTML
- Empieza con una plantilla o un formulario en blanco, y define el título, la URL de acción y el método en Ajustes del formulario.
- Añade campos: arrastra un tipo de campo al lienzo o haz clic en él para añadirlo debajo del campo seleccionado. Arrastra los campos (o usa los botones de flecha) para reordenarlos.
- Edita el campo seleccionado: etiqueta, nombre, texto de ejemplo, texto de ayuda, opciones y reglas de validación como obligatorio, longitud o patrón.
- Prueba la vista previa: rellénala y pulsa enviar para ver la validación del navegador y los datos que se enviarían.
- Copia el código: copia el HTML y el CSS por separado o descarga una página completa, y luego apunta la URL de acción a tu gestor de formularios.
Atributos de validación de formularios HTML
El código generado se basa en la validación de restricciones integrada en el navegador, así que funciona sin JavaScript. Estos son los atributos que puede añadir el generador:
| Atributo | Funciona en | Ejemplo | Efecto |
|---|---|---|---|
required | Todos los campos | required | El campo debe rellenarse (un grupo de opciones necesita una elección y una casilla debe marcarse) |
type | input | type="email" | email y url deben tener un formato válido; number solo acepta números |
minlength / maxlength | Texto, email, contraseña, textarea | minlength="8" | Limita el número de caracteres |
min / max / step | number, date, time | min="0" max="10" | Rango permitido e incrementos |
pattern | Texto, tel, contraseña | pattern="[0-9]{5}" | El valor completo debe coincidir con la expresión regular |
title | Con pattern | title="5 dígitos" | Pista que se muestra en el mensaje de error del navegador |
accept | file | accept=".pdf,image/*" | Filtra el selector de archivos (no es una comprobación de seguridad) |
autocomplete | Campos de tipo texto | autocomplete="email" | Permite que los navegadores y los gestores de contraseñas rellenen el campo (WCAG 1.3.5) |
Ejemplos útiles de patrones
| Uso | Patrón |
|---|---|
| Código ZIP de EE. UU. (5 o 9 dígitos) | \d{5}(-\d{4})? |
| Código postal del Reino Unido (simplificado) | [A-Za-z]{1,2}\d[A-Za-z\d]? ?\d[A-Za-z]{2} |
| Número de teléfono (dígitos, espacios, + ( ) -) | [0-9 +()\-]{7,20} |
| Nombre de usuario (3-16 letras, dígitos, _) | [A-Za-z0-9_]{3,16} |
| Contraseña segura (8+, mayúscula, minúscula, dígito) | (?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,} |
| Color hexadecimal | #?[0-9A-Fa-f]{6} |
El navegador ancla los patrones automáticamente, así que no hacen falta ^ ni $.
Lista de comprobación de formularios accesibles
- Etiquetas visibles para cada campo, conectadas con
foreid. Los textos de ejemplo desaparecen al escribir y no las sustituyen. - Agrupa las opciones relacionadas (botones de opción, grupos de casillas) en un
<fieldset>con un<legend>que plantee la pregunta. - Explica el formato en un texto de ayuda enlazado con
aria-describedby, por ejemplo "Al menos 8 caracteres". - Marca los campos obligatorios de forma visible y con el atributo
required, e indica qué significa el asterisco. - Mantén un buen contraste en el texto, los bordes y el botón de envío (al menos 4.5:1 para el texto).
- Valida también en el servidor. La validación del navegador ayuda a los usuarios, pero cualquiera puede saltársela.
Preguntas frecuentes
¿El formulario envía correos o guarda los envíos?
No. Esta herramienta solo genera HTML y CSS de front-end. Define la URL de acción del formulario con tu propio script de servidor o un servicio de backend de formularios, que recibe los campos por sus atributos name y se encarga del correo o del almacenamiento.
¿Qué hace que el formulario generado sea accesible?
Cada campo tiene una etiqueta visible conectada mediante for e id, los grupos de botones de opción y casillas van dentro de un fieldset con legend, el texto de ayuda se enlaza con aria-describedby, los campos obligatorios usan el atributo nativo required y los campos habituales reciben pistas de autocomplete para que los navegadores y las tecnologías de asistencia puedan rellenarlos.
¿Cómo funciona la validación?
El formulario usa la validación HTML integrada: required, type=email/url/number, min y max, minlength y maxlength, y pattern (una expresión regular que debe cumplir el valor completo). Los navegadores bloquean el envío y muestran un mensaje hasta que se cumplen las reglas. Valida siempre de nuevo en el servidor.
¿Por qué es importante el atributo name?
Solo se envían los campos que tienen name, y el name se convierte en la clave de los datos enviados (por ejemplo, [email protected]). Usa nombres únicos, en minúsculas y sin espacios.
¿Cuándo se necesita enctype=multipart/form-data?
Siempre que el formulario tenga un campo de subida de archivos y use POST. El generador lo añade automáticamente cuando añades un campo de archivo.
¿GET o POST?
Usa POST para formularios que envían datos personales, mensajes o archivos, o que cambian algo en el servidor. GET pone los datos en la URL y es adecuado para formularios de búsqueda y filtrado.
¿Se guarda mi formulario?
Tu formulario actual se guarda en el almacenamiento local de este navegador para que puedas volver a él. No se sube nada.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.