He hablado de lo que es un Placeholder anteriormente, pero refiriéndome al placeholder de imagen. Dado que me han llegado varias consultas al respecto, me pareció interesante aclarar la diferencia entre uno y otro, ya que si bien reciben el mismo nombre, se trata de dos cosas totalmente distintas.
Bueno, vieron que al navegar cualquier sitio web en internet, es muy común que encontremos algún formulario. Ya sea para iniciar sesión, registrarnos a un Newsletter, realizar una búsqueda o enviar comentarios. Son una parte esencial de la interacción en línea, pues contienen campos de entrada donde los usuarios proporcionamos cierta información requerida. ¿Qué pasa cuando no se entiende o no está claro qué información debemos ingresar y/o en qué formato?
Aquí donde entra en juego el atributo placeholder en el código HTML.
.
Qué es el atributo Placeholder
Primero, lo primero: ¿qué es un atributo «placeholder»? ¿Para qué sirve?
Bien, hagamos un breve repaso sobre qué son los atributos en HTML. Un atributo en HTML es como una etiqueta adicional que se puede agregar a los elementos de una página web para proporcionarles más información o configurar su comportamiento. Es como darle a un elemento características especiales que le permiten hacer cosas diferentes o mostrar contenido específico. Los atributos son como pequeñas instrucciones que mejoran la funcionalidad y el aspecto de los elementos en la página.
El atributo placeholder es una herramienta que puede hacer que los formularios sean más intuitivos y amigables para los usuarios. Su función principal es mostrar un texto descriptivo dentro del campo de entrada antes de que el usuario introduzca cualquier valor. Este texto suele indicar qué tipo de información debería ingresar el usuario.
Veamos un par de ejemplos.
.
Cómo se utiliza
He aquí un típico formulario de login o inicio de sesión:
En este caso, los campos de nombre de usuario y contraseña muestran un texto descriptivo dentro de ellos antes de que el usuario escriba algo. Esto les proporciona una guía clara sobre qué información deben ingresar en cada campo.
Ahora, un típico formulario de suscripción a un Newsletter:
En este formulario de suscripción, los campos de correo electrónico y nombre también utilizan el atributo «placeholder» para guiar al usuario sobre qué información debe proporcionar. En este caso, utilicé la palabra Ejemplo y luego mi información como base.
Y así se vería el resultado final:
¿Qué les parece?
..
Ventajas del atributo placeholder
- Mejora la experiencia del usuario: Al proporcionar pistas visuales sobre el tipo de información que se debe ingresar en cada campo, los usuarios se sienten más cómodos y confiados al completar el formulario.
- Espacio eficiente: El atributo «placeholder» permite mostrar instrucciones dentro del campo de entrada sin ocupar espacio adicional en el diseño del formulario.
- Facilita la corrección de errores: Si un usuario comete un error al ingresar datos, el texto del atributo «placeholder» vuelve a aparecer automáticamente cuando el campo recupera el foco, lo que les recuerda qué información se espera allí.
- Compatible con dispositivos móviles: El uso de «placeholders» es especialmente útil en pantallas más pequeñas, como en dispositivos móviles, donde el espacio es más limitado.
Es importante tener en cuenta que este atributo no debe reemplazar etiquetas y descripciones claras asociadas con cada campo. Algunos navegadores también pueden implementarlo de manera diferente, por lo que siempre es una buena práctica realizar un testing previo para asegurarse de que funcione correctamente.
En conclusión, el atributo placeholder es una valiosa herramienta para mejorar la usabilidad y la accesibilidad de los formularios web, haciendo la experiencia del usuario más agradable y efectiva, y aumentando así la probabilidad de que los visitantes completen con éxito la información requerida.
Qué es y para qué sirve un Placeholder de imagen
¡No dudes en incorporar esta función en tus próximos proyectos web!
.
