El Atributo PLACEHOLDER

El atributo placeholder en HTML se utiliza para mostrar un texto de ejemplo o una breve guía dentro de un campo de formulario, ayudando a los usuarios a comprender qué información deben ingresar. A continuación, aprenderás cómo implementarlo correctamente y sus mejores prácticas.

1. Introducción al atributo placeholder

• Propósito: Proporcionar una sugerencia o ejemplo dentro de un campo de entrada (ej.: "ejemplo@correo.com" para un email).

• Comportamiento:

  • El texto aparece en el campo cuando está vacío.

  • Desaparece automáticamente cuando el usuario comienza a escribir.

• Compatibilidad: Funciona en elementos <input> y <textarea>.

• Importante:

  • No reemplaza a las etiquetas (<label>). Siempre usa <label> para accesibilidad.

  • No debe contener información crítica, ya que no es visible después de que el usuario escribe.

2. Sintaxis básica

<input 
  type="text" 
  placeholder="Texto de ejemplo" 
  id="campo" 
  name="campo"
>
<label for="campo">Nombre completo</label>

3. Ejemplos comunes

Ejemplo 1: Campo de email

<label for="email">Correo electrónico:</label>
<input 
  type="email" 
  id="email" 
  name="email" 
  placeholder="ejemplo@correo.com"
>

Ejemplo 2: Búsqueda

<label for="busqueda">Buscar:</label>
<input 
  type="search" 
  id="busqueda" 
  name="busqueda" 
  placeholder="Ingrese su consulta..."
>

Ejemplo 3: Formato específico (fecha)

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

4. Estilizar el placeholder con CSS

Puedes personalizar la apariencia del texto del placeholder usando pseudo-elementos:

/* Estilo general para todos los placeholders */
::placeholder {
  color: #999;
  font-style: italic;
  font-size: 0.9em;
}

/* Estilo específico para un campo */
#fecha::placeholder {
  color: #ff0000;
}

5. Limitaciones y buenas prácticas

• No usar para instrucciones largas: El placeholder debe ser breve (ej.: "Mínimo 8 caracteres").

• Accesibilidad:

  • Algunos lectores de pantalla no leen el placeholder.

  • Nunca reemplaces la etiqueta <label> con este atributo.

• Navegadores antiguos: Versiones de Internet Explorer anteriores a 10 no lo soportan.

• No confíes en él para validación: Usa pattern o JavaScript si necesitas restricciones.

6. Combinación con otros atributos

• Con required:

  html

  Copy

  <input type="text" placeholder="Ejemplo" required>

   

• Run HTML

• Con pattern:

  html

  Copy

  <input 
    type="text" 
    placeholder="AAA-9999" 
    pattern="[A-Z]{3}-d{4}"
  >

   

• Run HTML

7. ¿Cuándo evitar el placeholder?

• Si el ejemplo es muy complejo (mejor usa texto debajo del campo).

• Si la información es crítica (ej.: formato obligatorio).

• En campos donde el usuario podría olvidar el formato después de escribir.

Conclusión

El atributo placeholder es una herramienta útil para mejorar la usabilidad de tus formularios, siempre que se use de manera complementaria a las etiquetas <label> y sin comprometer la accesibilidad. Combínalo con estilos CSS y otros atributos como pattern o required para crear experiencias de usuario más intuitivas.

¡Recuerda: Menos es más. Mantén tus placeholders simples y claros!