UX / UI
Etiquetas de formulario
El placeholder no es etiqueta.
Las etiquetas de formulario le dicen a la gente qué va en cada campo. Si usas el placeholder en su lugar, desaparece justo cuando empiezan a escribir.
3 demos interactivas
Guía gratis por DM
UX / UI
01
El campo que se queda sin nombre
Quitar las etiquetas de formulario y dejar solo el placeholder (el texto gris dentro del campo) se ve limpio en el diseño. En uso, es un problema.
En cuanto la persona escribe, el placeholder desaparece. Si se distrae o vuelve a revisar, ya no sabe qué era cada campo. Además, el texto gris suele tener poco contraste y se confunde con un campo ya lleno.
Un formulario claro tiene cuatro piezas: la etiqueta arriba, la ayuda antes del error, el error junto al campo y un botón que dice qué va a pasar.
La regla de oro
Etiqueta siempre visible arriba del campo. El placeholder, si existe, solo da un ejemplo.
02
Corrige el registro paso a paso
Mira la corrección completa o toca cada paso: etiqueta, explica, señala y nombra.
Antes
03
Así no / así sí
Comparación: un campo que usa el placeholder como etiqueta y la pierde al escribir, frente a un campo con la etiqueta «Correo electrónico» siempre visible arriba.
Desaparece al escribir.
Con el placeholder como etiqueta, el campo se queda sin nombre justo cuando hay que revisarlo.
Siempre a la vista.
La etiqueta arriba no se va nunca. Se sabe qué va en cada campo, lleno o vacío.
04
El error, junto al campo
Escribe un correo: el mensaje aparece debajo del campo y dice exactamente qué falta.
Pruébalo: escribe un correo El mensaje cambia mientras escribes y siempre aparece junto al campo.
05
Cómo arreglar tu formulario hoy
1
Etiqueta
Pon una etiqueta corta arriba de cada campo: «Correo electrónico», no solo un texto gris adentro.
2
Explica
Si el campo tiene reglas (8 caracteres, un número, formato de fecha), escríbelas debajo antes de que la persona se equivoque.
3
Señala
Cambia el «Hubo un error» general por un mensaje junto al campo que dice qué falta y cómo arreglarlo.
4
Nombra
El botón dice el resultado: «Crear cuenta», «Pagar $489.900», «Enviar mensaje». No «Enviar» a secas.
06
Antes de publicar
- ¿Cada campo tiene una etiqueta visible fuera del campo?
- ¿Las reglas se explican antes del error?
- ¿Cada error aparece junto a su campo y dice cómo arreglarlo?
- ¿El campo con error se marca con algo más que color (ícono o texto)?
- ¿El botón dice qué pasa al tocarlo?
COMENTA
“FORMULARIO”
y te envío
la guía
por DM
La guía de etiquetas de formulario en PDF: seis páginas con ejemplos, reglas y la lista para revisar antes de publicar. Comenta la palabra en el reel de Instagram y te llega por mensaje directo.
Preguntas
frecuentes
¿Se puede usar el placeholder como etiqueta?
No es recomendable. Desaparece al escribir, suele tener poco contraste y algunos lectores de pantalla no lo anuncian bien. Usa una etiqueta visible y deja el placeholder, si acaso, para un ejemplo.
¿Dónde va la etiqueta de un campo de formulario?
Arriba del campo y alineada a la izquierda. Es la posición que más rápido se lee y funciona igual en celular y en escritorio.
¿Dónde se muestran los mensajes de error de un formulario?
Junto al campo que tiene el problema, normalmente debajo, con texto que explique qué falta. Un aviso general arriba puede acompañar, pero no reemplaza el mensaje en el campo.
Sigue aprendiendo
Conceptos
relacionados
Jerarquía de botones
——→ UX / UI
Jerarquía de botones
3 demos
Cómo diferenciar el botón principal del secundario y nombrar bien cada acción.
Proximidad
Reel · 3 demos
Acerca lo que va junto, separa lo que no. Sin agregar líneas.
Contraste
Reel · 3 demos
Brillo opuesto y ratio 4.5:1: la base para que tu texto se lea siempre.