Cómo utilizar el atributo placeholder en formularios HTML
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 artículo veremos como utilizarlo correctamente, como se le puede dar estilo con CSS, interaccionar con él desde JavaScript 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, juan@dominio.com">
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-elemento que 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 JavaScript
Para obtener o establecer el valor del placeholder
desde JavaScript, 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.
Referencias
- W3C Recommendations. Section 4.10: Forms.
- Steve Faulkner (18 Febrero 2011). HTML5 Accessibility Chops: the placeholder attribute. The Paciello Group.
- ::placeholder pseudoelement. MDN web docs.