Este post fue visto: 481

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?

  • Abre tu cuenta en Payoneer y obtén 25 dólares de regalo!
  • Neolo Servicios de Hosting -- El blog de aleare.design

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:

Ejemplo de formulario de login -- El blog de Aleare Design

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:

Ejemplo de formulario de suscripción a Newsletter -- El blog de Aleare Design

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:

Resultado de form con placeholder -- El blog de Aleare Design

¿Qué les parece?

..

Ventajas del atributo placeholder

  1. 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.
  2. Espacio eficiente: El atributo «placeholder» permite mostrar instrucciones dentro del campo de entrada sin ocupar espacio adicional en el diseño del formulario.
  3. 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í.
  4. 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.

¡No dudes en incorporar esta función en tus próximos proyectos web!

.

Avatar

Escribió:

Alejandra Arellano

¡Hola Mundo! Soy diseñadora gráfica y web, programadora HTML/CSS, ilustradora, community manager, curadora de contenidos, escritora, mentora. Fundadora y directora de Aleare Design Estudio Creativo y Comunicación Digital.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Cerrar

Sobre mí

¡Bienvenidos a mi blog! Mi nombre es Alejandra y soy diseñadora gráfica y web, también programadora, community manager, redactora e ilustradora.

Fundadora de aleare design estudio de diseño y comunicación digital, desde el 2008 brindando servicios a empresas y agencias digitales en varias ciudades de Argentina y también en México, España, Francia y Noruega.

Mi Filosofía

“Tienen que encontrar eso que aman […]. Su trabajo va a llenar gran parte de sus vidas […] y la única forma de hacer un gran trabajo es amando lo que hacen. Si todavía no lo han encontrado, sigan buscando. No se detengan […]. Sean curiosos. Sean inquietos.”

Steve Jobs
Discurso de apertura, Universidad de Stanford, 2005