Cómo utilizar un placeholder en HTML

En la actualidad, el diseño web ofrece una gran variedad de recursos visuales y de funcionamiento para hacer de la navegación por Internet, una experiencia agradable y simple que logre integrar a la mayoría de las personas al mundo digital. Esto porque, cada día, más entidades deciden migrar sus servicios y actividades a estos espacios, por lo que ahora es más necesario que nunca saber desenvolverte en plataformas en línea.

Si como empresa, estás comenzando a constituir tu presencia digital y te interesa crear páginas web que sean útiles para complementar tus tareas y, al mismo tiempo, reflejen tu compromiso con tus clientes de brindarles el mejor servicio en todas las instancias, este artículo es para ti. Averigua qué es un placeholder en el diseño de páginas web, cuándo puede ayudarte a mejorar la experiencia de usuario de tus recursos digitales y cómo implementarlo de inmediato para que empieces, desde ahora, a destacar en el terreno de la tecnología.

Por lo general, este elemento muestra una indicación o ejemplo dentro del campo de entrada antes de que el usuario comience a escribir. Un marcador de posición suele presentarse con un efecto de transparencia y se desvanece, de forma automática, una vez que la persona comienza a ingresar datos en ese espacio.

El propósito de este recurso es brindar una guía visual a los visitantes de una página web sobre qué y cómo debe redactarse un dato en un formulario. Resulta muy útil para dar indicaciones claras a los usuarios y ejemplos de enunciados.

Cuándo utilizar un placeholder

Los placeholders, principalmente, funcionan como una guía o sugerencia visual sobre el tipo de dato que debe ingresarse en un campo de entrada al crear un formulario. Sin embargo, te decimos algunas otras situaciones en las que es útil emplear este recurso:

• Campos de entrada obligatorios: si hay campos de entrada que son obligatorios, los placeholders pueden reforzarlos para garantizar que las personas les presten la atención debida. Por ejemplo, en un formulario de registro, se puede utilizar un marcador de posición en el espacio de correo electrónico para señalar que se espera una dirección de correo electrónico válida.
• Formato esperado: este tipo de marcadores son ideales para especificar formatos específicos para ingresar los datos, como un número de teléfono o una fecha, o dar un ejemplo de lo que esperas.
• Descripciones breves: los marcadores de posición también pueden proporcionar descripciones breves o instrucciones adicionales sobre el propósito del campo. Por ejemplo, en el campo de comentarios, se puede utilizar un marcador de posición para indicar que se espera que el usuario ingrese su opinión o sugerencias.

Cómo utilizar el placeholder en HTML (Con ejemplo)

A continuación, te decimos cómo puedes implementar este elemento en los formularios de tu sitio web y mejorar la comunicación con tus clientes y la experiencia de usuario que brindan tus plataformas digitales.

Identifica el código básico del marcador de posición

El código que corre este elemento en la interfaz de tu página web es el siguiente. Aquí nosotros ingresamos, por ejemplo, el texto «Ingrese su nombre»:

<input type="text" placeholder="Ingrese su nombre">

Cuando se cargue tu página, el campo de texto mostrará la leyenda «Ingrese su nombre» en un efecto de transparencia que destacará la instrucción para el usuario.

Especifica diferentes indicaciones

A partir de ese formato básico, puedes crear diferentes combinaciones en el HTML de tu sitio web para indicar diversas instrucciones o sugerir acciones a los visitantes y usuarios de tus formularios.

Por ejemplo, las siguientes líneas son ejemplos para marcadores de posición que solicitan datos:

<form>
  <label for="nombre">Nombre:</label>
  <input type="text" id="nombre" name="nombre" placeholder="Ingrese su nombre" required>

  <label for="correo">Correo electrónico:</label>
  <input type="email" id="correo" name="correo" placeholder="Ingrese su correo electrónico" required>

  <label for="contrasena">Contraseña:</label>
  <input type="password" id="contrasena" name="contrasena" placeholder="Ingrese una contraseña segura" required>

  <button type="submit">Registrarse</button>
</form>

Aquí hay tres campos de entrada: «Nombre», «Correo electrónico» y «Contraseña» en los que se integra el atributo placeholder para señalar que en ese espacio deben ingresarse esos datos. Estos desaparecerán cuando el usuario comience a escribir sobre el formulario. Por último, este recurso se acompañó del atributo «required» para indicar que los campos deben completarse de manera obligatoria.

Por otro lado, los marcadores de posición pueden precisar el formato, es decir, el orden y la forma en la que deben ingresar sus datos los clientes:

<form>
  <label for="telefono">Teléfono:</label>
  <input type="text" id="telefono" name="telefono" placeholder="Formato: XXX-XXX-XXXX" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" required>

  <label for="fecha">Fecha de nacimiento:</label>
  <input type="date" id="fecha" name="fecha" placeholder="Formato: AAAA-MM-DD" required>

  <button type="submit">Enviar</button>
</form>

En este código, el primer campo es para indicar un número de teléfono y el atributo placeholder indica el formato esperado: «Formato: XXX-XXX-XXXX». Además, se agrega el atributo «pattern» para especificar una expresión regular que valida que se haga así.

El segundo campo, por otra parte, funciona para registrar una fecha de nacimiento y con el placeholder, se apunta el siguiente formato: «Formato: AAAA-MM-DD». Asimismo, se le agrega un tipo de entrada date para que, en la interfaz, se despliegue un selector de fecha en los navegadores compatibles.

Por último, los marcadores de posición pueden destacar una sugerencia o resaltar la importancia que tiene para una empresa recibir una respuesta o comentario:

<form>
  <label for="comentarios">Comentarios:</label>
  <textarea id="comentarios" name="comentarios" placeholder="Ingrese sus comentarios aquí" required></textarea>

  <button type="submit">Enviar</button>
</form>

Aquí, el elemento <textarea> crea un campo de texto de múltiples líneas destinado a los comentarios del usuario. El recurso placeholder muestra el texto: «Ingrese sus comentarios aquí», mientras que «required» indica que este espacio para comentarios es obligatorio y debe completarse antes de enviar el formulario.

Criterios al momento de implementar un placeholder en HTML

De manera adicional, considera estos criterios cuando utilices un marcador de posición (placeholders) en formularios HTML, ya que estos te ayudarán a garantizar su efectividad y mejorar la experiencia de usuario de tus plataformas digitales.

• Claridad y concisión: los marcadores de posición deben ser claros y concisos y proporcionar instrucciones breves sobre el tipo de texto que se espera. Evita usar mensajes demasiado largos o complejos que puedan confundir al usuario.
• Indicar el formato esperado: si hay un formato particular en el que se deben ordenar los datos (por ejemplo, un número de teléfono o fecha), el marcador de posición debe especificarlo y ayuda al usuario a proporcionar su información.
• No solicitar información crítica: evita usar este recurso para pedir información crítica o requerida. Los marcadores de posición no son sustitutos adecuados para etiquetas de campo descriptivas o instrucciones adicionales que recaben información esencial para tu empresa.
• Considera la accesibilidad: asegúrate que los marcadores de posición sean accesibles para todos, incluidas las personas con discapacidades visuales o que utilizan tecnología de asistencia. Proporciona etiquetas de campo descriptivas o instrucciones adicionales para garantizar que tu formulario sea comprensible.
• Evita la dependencia exclusiva: no confíes solo en los placeholder para destacar información o dar instrucciones importantes. Te recomendamos combinar este recurso con etiquetas de campo descriptivas u otros elementos visuales.
• Validaciones adicionales: este elemento no reemplaza las validaciones de entrada de datos. Las validaciones adicionales garantizan que los datos ingresados sean correctos y cumplan con todos los requisitos.
• Diseño y contraste: asegúrate de que los placeholder sean visibles y su diseño sirva para destacar de manera adecuada el campo de entrada. Para ello, aplica un contraste apropiado entre el color del texto y el fondo del campo para asegurarte que sea legible.
• Compatibilidad con navegadores y dispositivos: verifica que estas indicaciones se muestren bien en diferentes navegadores y dispositivos. Algunas versiones antiguas de los navegadores pueden no ser compatibles con la función placeholder. Realiza pruebas para avalar que brindas una experiencia uniforme en diferentes entornos.
• Comportamiento y eliminación del marcador de posición: observa cómo se comporta el marcador de posición cuando el usuario interactúa con el campo de entrada: el texto tiene que desaparecer automáticamente una vez que el usuario comience a escribir.
• Localización y traducción: si tu aplicación o sitio web es multilingüe, ten en cuenta que los marcadores de posición sean traducibles y se adapten a diferentes culturas.
• Pruebas y retroalimentación de usuarios: realiza pruebas con usuarios reales para obtener retroalimentación sobre la efectividad de los marcadores de posición en tu formulario. Pide que te digan si se comprenden bien las instrucciones y si son funcionales. Usa esa retroalimentación para ajustar y mejorar tu formulario si es necesario.

Ventajas y desventajas de los placeholders en HTML

Por último, te decimos algunas ventajas y desventajas de su uso en páginas web para que puedas tomar una mejor decisión.

Ventajas

• Orientación e instrucciones: los marcadores de posición ayudan a los usuarios a comprender qué información deben ingresar y en qué formato.
• Ahorro de espacio: se puede ahorrar espacio en la interfaz de usuario, en contraste con la inclusión de etiquetas o instrucciones adicionales fuera de los campos.
• Interfaz limpia y simplificada: ayudan a mantener una interfaz de usuario más limpia y simple, pues evitan los textos adicionales.
• Mejora la usabilidad: las indicaciones visuales claras facilitan el uso de los formularios y, por tanto, mejoran la experiencia del usuario.

Desventajas

• Visibilidad limitada: pueden ser difíciles de visualizar para personas con discapacidades o aquellos que usan tecnología de asistencia.
• Pérdida de contexto: al desaparecer el texto, las personas pueden olvidar las indicaciones de los placeholder una vez que han escrito sobre el campo.
• Riesgo de confusión: los usuarios pueden confundir los marcadores de posición con datos reales y enviar el formulario sin completarlos.
• Limitaciones de espacio: si se requieren instrucciones más detalladas o complejas, es posible que no sean suficientes y sea necesario incluir etiquetas o texto adicional.

En general, los marcadores de posición son una herramienta útil para mejorar la usabilidad y guiar a los usuarios al emplear un formulario o plataforma digital. Sin embargo, es importante usarlos de manera adecuada y considerar las necesidades de todas las personas.

Alternativas al uso de los placeholders

Existen algunas alternativas a los marcadores de posición (placeholders) en HTML que se pueden usar según las necesidades y el contexto de la aplicación. Aquí algunas opciones comunes:

• Etiquetas de campo descriptivas: incluir etiquetas descriptivas junto a los campos de entrada para proporcionar instrucciones claras sobre el tipo de datos esperados. Estas no desaparecen.
• Ayuda contextual: dar información adicional o instrucciones contextuales cerca del campo o en un área cercana, como escritos descriptivos, enlaces a documentación o una sección de preguntas frecuentes.
• Mensajes de validación en tiempo real: implementar validaciones en tiempo real que muestren mensajes de error o sugerencias mientras las personas ingresan textos.
• Utilizar formularios interactivos: crear formularios interactivos que permitan le permitan a los clientes seleccionar opciones o completar información de una manera más intuitiva, con botones desplegables, casillas de verificación, botones de opción y otros elementos interactivos.

Los marcadores de posición (placeholders) en HTML son una herramienta útil para proporcionar instrucciones y orientación visual a los usuarios cuando ingresan datos en formularios. Tienen ventajas significativas, como ahorrar espacio, simplificar la interfaz y mejorar la usabilidad al indicar claramente el tipo de datos esperados.

Su implementación siempre debe ajustarse a tus necesidades específicas y a las de tus clientes y prospectos. Recuerda realizar pruebas y recopilar comentarios de los consumidores para asegurarte de que este recurso cumple su propósito, es funcional y mejora la experiencia de usuario en general. ¡Comienza a diseñar tu página web, mejora tu presencia digital y atrae más clientes!