El atributo placeholder fue introducido en HTML5 en elementos input y textarea para representar una indicación que ayude al usuario a completar estos campos. En este tutoriales veremos como utilizarlo correctamente, como se le puede dar estilo con CSS, interaccionar con él desde jаvascript y algunas de las implicaciones en accesibilidad más importantes.

Uso

El atributo placeholder se define como un consejo o indicación corta que puede consistir en una solo palabra o en una pequeña frase. Es aceptado en los elementos input y textarea. Esta indicación es mostrada por el navegador cuando el elemento no tiene valor asignado o este sea un valor vacío.

Su uso es muy sencillo, por ejemplo, podemos indicar el formato adecuado de los datos que se deben introducir:

<input type="email" name="email" placeholder="Por ejemplo, webmaster@tutorialesenlinea.es">

El valor del atributo placeholder puede ser prácticamente cualquier valor alfanumérico. Los únicos caracteres prohibidos son el U+000A (LF o line feed) y el U+000D (CR o carriage return). También hay que tener en cuenta, sobre todo si vas a utilizar el placeholder en un <textarea>, que cualquier salto de línea va a ser eliminado antes de representar el placeholder..

Selector ::placeholder en CSS

El selector ::placeholder representa un pseudo-elementoque permite dar estilo al texto que contenga el placeholder:

::placeholder {
    color: blue;
    font-size: 1.5em;
    font-style: italic;
}

También está la pseudo-clase :placeholder-shown para seleccionar el <input> o <textarea> que contiene el placeholder, pero solo cuando se esté mostrando el placeholder. Su soporte es todavía muy limitado.

:placeholder-shown {
    /* Se aplica al input
       cuando el texto del placeholder
       se está mostrando */
    background-color: grey;
}
::placeholder {
    /* Se aplica específicamente
       al texto del placeholder */
    color: blue;
}

Obtener y establecer el placeholder con jаvascript

Para obtener o establecer el valor del placeholder desde jаvascript, primero se obtiene el elemento y luego se trabaja directamente con la propiedad HTMLInputElement.placeholder:

let input = getElementById( 'inputID' );

// Obtener el valor del placeholder
let placeholder = input.placeholder;

// Establecer un nuevo valor
input.placeholder = "Aquí el nuevo valor para el placeholder";

Consideraciones de accesibilidad

La primera consideración de accesibilidad sobre el atributo placeholder es que no sustituye al elemento <label>. El aviso en las recomendaciones del W3C es bien grande, pero algunos agentes especializados en accesibilidad van mucho más allá. Entre los aspectos de accesibilidad a tener en cuenta, destacan:

1.- El atributo placeholder no sustituye al elemento <label>

El elemento <label> representa una etiqueta o leyenda para elementos etiquetables, como son por ejemplo los inputs. Un <label> se asocia con un <input> a través del atributo for o colocando el <input> directamente dentro del <label>.

Aunque la representación del label no tiene nada especial, ofrece mejoras de accesibilidad en los formularios respecto a otras etiquetas para representar texto. Principalmente una: al seleccionar la etiqueta, por ejemplo al hacer click sobre el texto del <label>, se pasa el control al input asociado.

<label>Nombre: <input type="text" id="nombre" name="nombre"></label>
<label>Apellidos: <input type="text" id="apellidos" name="apellidos"></label>

Podríamos pensar en añadir el atributo placeholder como sustitución al <label>:

<input type="text" placeholder="Nombre" id="nombre" name="nombre">
<input type="text" placeholder="Apellidos" id="apellidos" name="apellidos">

Pero esta práctica presentaría ciertos inconvenientes. En algunos navegadores, cuando el campo se activa (focus), el placeholder desaparece: los usuarios que naveguen mediante teclado tendrían que leer antes de llevar el control a un determinado campo.

Además, el placeholder también desaparece cuando se comienza introducir algún valor; a partir de este momento se perdería toda referencia mientras se completa dicho campo. Aunque pueda parecer algo menor, contar con la referencia del <label> siempre visible mientras se completa el campo puede ser útil para muchos grupos de usuarios, por ejemplo para aquellos con deterioros de memoria.

Así que hay que utilizar el atributo placeholder para lo que es y no en sustitución del <label>:

<label for="name">Nombre: </label>
<input type="text" placeholder="Por ejemplo, Juan" id="name" name="name">
<label for="address">Dirección: </label>
<input type="email" placeholder="Por ejemplo, juan@ejemplo.com" id="address" name="address">

Si no quieres o no puedes utilizar <label> por algún motivo, se puede utilizar el atributo title:

<input type="search" title="Buscar" placeholder="Introduce los términos de búsqueda" id="search" name="search">
<button type="sumbit">Buscar</button>

2.- Color del texto del placeholder

La mayoría de navegadores no ofrecen un contraste adecuado (al menos 4.5:1 para el nivel WCAG AA) entre el color de fondo y el texto del placeholder. Si se utiliza el atributo placeholder es recomendable utilizar CSS para aumentar este contraste.

Por ejemplo, en Chrome el color de fondo predeterminado de un input es blanco y el color para el placeholder es #a9a9a9, lo que genera un contraste de tan solo 2.35:1.

Seguir con un fondo blanco en el input pero con un color #555 en el placeholder aumenta el contraste hasta 7.46:1 y llegaría al estándar WCAG AAA:

input {
    background-color: #fff;
}
::placeholder {
    color: #555;
}

3.- Otras

Algunas fuentes han recogido datos de uso y han concluido que el uso del atributo placeholder puede ser entendido por algunos usuarios como que el campo está ya completado y se lo saltan. Hay que poner atención en el texto que se utiliza como placeholder para que no lleve a esta confusión.

Como crear tu propio formulario de contacto para tu blog o página web.
Quieres saber mas sobre formularios.