Lo has visto miles de veces: ese texto gris dentro de un campo de formulario que dice "ejemplo@correo.com" y desaparece en cuanto empiezas a escribir. Se llama placeholder, y aunque parece un detalle menor, usarlo mal es una de las causas más comunes de formularios confusos y poco accesibles.
Un placeholder es un atributo de HTML que muestra un texto de ejemplo dentro de un campo, como pista de lo que se espera que escribas. Sirve de guía, no de etiqueta — y esa distinción, como veremos, marca la diferencia entre un formulario que ayuda y uno que frustra. Vamos a verlo todo: qué es, cómo se escribe correctamente, cuándo usarlo y cuándo no.
Como te podrás imaginar, en este mundo existen un sinfín de términos que en principio suenan complejos y un claro ejemplo de esto es Placeholder.
¿Qué es? ¿Para qué sirve? ¿Por qué se utiliza en la programación? Y aún más importante… ¿Qué le brindará al resultado final de tu sitio web?
Si te interesa conocer todos estos detalles, nosotros hemos hecho la tarea por ti y te traemos toda la información que te interesa conocer.
Qué es el atributo placeholder
El término se traduce como "marcador de posición". Es un atributo de HTML que se usa en los campos de formulario —sobre todo en los de texto— para mostrar una sugerencia de lo que se espera introducir, antes incluso de que el usuario empiece a escribir.
El texto del placeholder aparece por defecto dentro del campo cuando está vacío, normalmente en un gris tenue, y se desvanece en cuanto el usuario escribe (ha cumplido su función de guía). No aparece al pasar el cursor por encima ni funciona como un tooltip: es simplemente el contenido de ejemplo del campo vacío.
Si alguna vez rellenaste un formulario y viste un "Escribe tu correo aquí" dentro de la casilla, eso era un placeholder en acción.
¿Para qué sirve?
Su función es guiar al usuario mostrándole qué tipo de dato y en qué formato se espera en cada campo. La etiqueta (label) dice qué pedir ("Correo electrónico"); el placeholder da un ejemplo de cómo escribirlo ("nombre@ejemplo.com").
Es especialmente útil para:
Mostrar el formato esperado: un teléfono como
+34 600 000 000, una fecha comoDD/MM/AAAA.Dar un ejemplo concreto que reduce errores de entrada.
Aclarar campos ambiguos sin recargar la interfaz con texto.
En resumen: el placeholder se anticipa a la duda del usuario. Bien usado, reduce los datos mal introducidos; mal usado, los provoca.
Cómo se escribe (el código correcto)
En HTML el código es sencillo. Se añade el atributo placeholder dentro de la etiqueta <input>, con su texto entre comillas rectas:
Fíjate en dos cosas que suelen fallar:
Comillas rectas (
"), no curvas (“ ”). Las comillas tipográficas rompen el HTML. Es un error clásico al copiar y pegar desde un procesador de texto.Siempre acompañado de una
<label>. El placeholder no va solo (ver la sección de accesibilidad).
Y si quieres controlar su aspecto, usa el pseudo-elemento CSS ::placeholder:
Aspectos importantes al utilizar el placeholder en tu diseño web
A la hora de trabajar con un Placeholder, reconocer cuál es el código a utilizar y cómo configurarlo no es lo único importante.
También resulta fundamental entender cuáles son los aspectos a tener en consideración durante su creación para asegurarte de que les resulte útil a todos los usuarios por igual.
Recuerda que su objetivo principal es mejorar la experiencia de los usuarios y lograr que las interfaces de registros sean mucho más intuitivas.
Por lo tanto, si estás por trabajar en la creación de un Placeholder, es necesario tener en cuenta los siguientes puntos:
La instrucción tiene que ser breve
Primero que nada, la instrucción que indique tu Placeholder tiene que ser breve y clara. Resulta idea ir directo al grano, porque tu intención es ayudar al usuario, no confundirlo más de la cuenta.
Así que, piensa en instrucciones sencillas para cada dato a rellenar en tu formulario web que le permitan a tus visitantes reconocer con facilidad qué esperas que escriban en cada campo.
Además, olvídate de utilizar indicaciones muy largas. Los espacios en los campos de textos suelen ser pequeños y tendrás que adaptarte a ellos.
No lo utilices para sustituir las etiquetas
Hay quienes piensan que los placeholders pueden sustituir las etiquetas en un formulario y esto no puede ser así.
Una etiqueta es esa que se encontrará sobre cada recaudo de forma breve cuál es el dato a introducir.
En cambio, el Placeholder es una indicación extra o ejemplo de cómo necesita estar escrita la información.
Por ende, no puedes utilizar una para sustituir otra. Los formularios pueden funcionar sin los placeholders, pero no podrían funcionar sin las etiquetas.
Específica el formato a utilizar
Si el formulario con el que trabajas solicitará información muy específica, entonces sé claro con lo que esperas obtener.
Supongamos que necesitas que la persona adjunte una imagen en el formulario. No dejes al aire el formato en el que tiene que cargarse, porque entonces el usuario puede subirla en cualquiera: JPG, PNG, WEBP o cualquier otra.
Si quieres facilitar la recepción y el procesamiento de los datos obtenidos en los formularios, específica en qué formato necesitas cada dato.
Al volver al ejemplo dado, puedes utilizar tu Placeholder para decirle a tus usuarios que solo se aceptan imágenes en JPG o hasta un tamaño en específico.
Lo mismo puedes hacer si solicitas los números telefónicos de tus visitantes, puedes dejar un ejemplo del orden en el que se escriben los números.
Utiliza un diseño visible
Sí, es cierto, el Placeholder no se quedará en el campo para siempre y desaparecerá en cuanto el usuario comience a escribir, pero eso no quiere decir que tienes que ignorar los detalles de su diseño.
Todo lo contrario, precisamente porque se desvanecerá, necesita tener un diseño visible para que todos puedan leer lo que dice antes de que se vaya.
Para asegurarte de esto, configura bien el contraste del color de tu fuente y verifica que resulte legible para todos tus usuarios web por igual.
Asegura la compatibilidad con todos los entornos digitales
Otro punto muy importante (y quizás uno de los más importantes de todos), es tomar en cuenta la accesibilidad que tendrán tus visitantes.
Ten en cuenta que no todos van a acceder desde el mismo dispositivo (ordenador o móvil), ni desde el mismo navegador siquiera.
Por lo tanto, tu placeholder tiene que estar disponible para cualquier entorno digital y ser visible en cualquier dispositivo.
Todo esto lo puedes controlar al realizar pruebas finales para la experiencia del usuario y verificar que no exista ningún limitante.
Placeholder vs label vs texto de ayuda
Aquí está la confusión que arruina más formularios. No son lo mismo y no se sustituyen entre sí:
Elemento | Qué es | ¿Desaparece? | ¿Obligatorio? |
|---|---|---|---|
Label (etiqueta) | El nombre del campo ("Correo electrónico") | No, siempre visible | Sí — es imprescindible |
Placeholder | Un ejemplo dentro del campo ("nombre@ejemplo.com") | Sí, al escribir | No, es opcional |
Texto de ayuda | Instrucción extra bajo el campo ("Usaremos esto para enviarte la factura") | No | Opcional |
La regla de oro: un formulario puede funcionar sin placeholders, pero nunca sin labels.
Accesibilidad: los errores que hunden tu formulario
Aquí es donde la mayoría de tutoriales se quedan cortos, y donde de verdad se juega la calidad de un formulario. En 2026 el estándar vigente es WCAG 2.2, y hay tres reglas que no puedes saltarte:
1. El placeholder NUNCA sustituye a la etiqueta. Es el error más grave. Si eliminas la label y dejas solo el placeholder, en cuanto el usuario empieza a escribir pierde la referencia de qué se pedía. Para quien usa lectores de pantalla, un campo sin label es directamente inaccesible.
2. Cuida el contraste. WCAG exige un contraste mínimo de 4,5:1 entre el texto y el fondo. El problema: el gris tenue que los navegadores aplican por defecto al placeholder suele incumplir ese mínimo, lo que lo hace ilegible para personas con baja visión. Ajústalo tú con CSS.
3. No metas información esencial en el placeholder. Como desaparece al escribir, cualquier instrucción crítica que solo esté ahí se pierde. Las instrucciones importantes van en la label o en un texto de ayuda persistente.
La alternativa moderna que resuelve varios de estos problemas son las floating labels (etiquetas flotantes): la etiqueta empieza dentro del campo como si fuera un placeholder y "flota" hacia arriba al escribir, de modo que nunca desaparece del todo. Combinan la limpieza visual del placeholder con la persistencia de la label.
Pros y contras del placeholder
Ventajas | Inconvenientes |
|---|---|
Interfaz más limpia y ordenada | El espacio puede quedarse corto para instrucciones largas |
Guía al usuario con un ejemplo | Se pierde el contexto al desaparecer |
Reduce datos mal introducidos | Problemas de accesibilidad si se usa mal (contraste, sin label) |
Mejora la experiencia si se usa como apoyo | No debe contener información esencial |
Alternativas al placeholder
Si prefieres que la instrucción esté siempre visible, tienes opciones mejores según el caso:
Etiquetas descriptivas: una label clara (y, si hace falta, un poco más larga) que no dependa del placeholder para entenderse.
Floating labels: la solución más equilibrada, como vimos arriba.
Formularios con autorellenado o desplegables: para datos con opciones cerradas (país, categoría), un
<select>o botones evitan errores de escritura.Instrucciones contextuales: un texto de ayuda persistente bajo el campo, o un enlace a un tutorial cuando el dato es complejo (por ejemplo, en qué formato adjuntar una imagen).
"Placeholder" fuera de HTML: otros usos en programación
El término no es exclusivo de los formularios. Si buscabas "placeholder en programación" en un sentido más amplio, estos son los otros usos habituales:
Placeholders de formato (format strings): los marcadores que se sustituyen por valores en tiempo de ejecución, como
%sy%den C o Python clásico, o{}en los f-strings de Python (f"Hola, {nombre}").Consultas parametrizadas: los
?o$1en SQL que evitan inyección al sustituir valores de forma segura.Plantillas e internacionalización (i18n): marcadores como
{{nombre}}en motores de plantillas, o%1$sen cadenas de traducción.Skeleton screens (placeholders de UI): esos bloques grises animados que ocupan el lugar del contenido mientras una web carga.
Contenido de relleno: imágenes de ejemplo o el clásico lorem ipsum que "reserva el sitio" del contenido real en un diseño.
Todos comparten la misma idea: reservar el lugar de algo que llegará después. El placeholder de HTML es solo la versión más visible para el usuario final.
En conclusión
El Placeholder se encuentra entre las herramientas más empleadas en el desarrollo web hoy en día y resulta cada vez más utilizada por los programadores en los diseños de nuevas plataformas.
Su función de anteponerse a lo que los usuarios pueden ingresar en un formulario es de gran ayuda para que la experiencia sea más amena para todos.
Así que, si eres programador o si le has encargado a alguien la creación de un nuevo sitio web, toma en consideración la posibilidad de trabajar con los placeholders.
Si te llama la atención todos estos temas y quieres aprender más sobre ellos, date una vuelta por nuestro blog, allí encontrarás muchos otros artículos con temática tecnológica.
FAQs sobre el placeholder
¿El placeholder puede sustituir a la etiqueta (label)?
No, y es el error más común. La label es obligatoria porque permanece visible y es lo que leen los lectores de pantalla; el placeholder desaparece al escribir. Un formulario accesible siempre lleva label, y el placeholder solo como apoyo opcional.
¿Por qué mi placeholder se ve muy claro y cuesta leerlo?
Porque el gris por defecto de los navegadores suele incumplir el contraste mínimo de WCAG (4,5:1). Ajústalo con CSS mediante el pseudo-elemento ::placeholder y usa un gris más oscuro para que sea legible en cualquier dispositivo.
¿Cuál es la diferencia entre placeholder y texto de ayuda?
El placeholder vive dentro del campo y desaparece al escribir; el texto de ayuda se coloca (normalmente) debajo del campo y permanece visible. Para instrucciones importantes usa texto de ayuda o la propia label, nunca solo el placeholder.
¿Qué significa placeholder en programación además de en HTML?
En sentido amplio, un placeholder es un marcador que reserva el lugar de un valor que llegará después: los %s/{} de las cadenas de formato, los ?/$1 de las consultas SQL, los {{variable}} de las plantillas o los "skeleton screens" de carga. Todos comparten la idea de "aquí irá algo".
¿Es obligatorio usar placeholders en un formulario?
No. Son totalmente opcionales y un formulario funciona perfectamente sin ellos. Lo obligatorio son las labels. Usa placeholders solo cuando aporten un ejemplo útil (como el formato de un teléfono o un correo), no por rellenar.
