Actualizado 2011-03-30: nuevos navegadores con soporte.
Resulta muy habitual encontrarse con campos de texto que contienen un valor por defecto que ayuda al usuario a comprender que información debe introducir en dicho campo. El comportamiento habitual es que cuando el usuario activa el campo el texto desaparezca.
Este es el estado antes de activar el campo y una vez se desactiva sin haber introducido datos:
Y este es el estado del campo activado antes de haber introducido información:
Para obtener ese efecto es necesario el uso de Javascript, pero con HTML 5 eso se va a terminar.
Sería tan sencillo como añadir el atributo placeholder con el texto a mostrar, como en el siguiente ejemplo:
<p>
<label for="c_texto">Campo de texto:
<input type="text" id="c_texto" placeholder="Datos campo texto" />
</label>
</p>
<p>
<label for="c_area">Campo textarea:
<textarea id="c_area" cols="45" rows="5" placeholder="Datos campo textarea"></textarea>
</label>
</p>Como puede observar puede utilizarse en elementos input de tipo texto, y en textarea.
Tiene dos inconvenientes:
- Si se utiliza en documentos XHTML 1.0 o HTML 4.01 dichos documentos no validarán.
- Actualmente solo es compatible con Chrome, Safari, Opera (11+), Firefox (4+).
El primer problema es fácil de solventar, añadiendo el atributo mediante Javascript:
function textoCampo (id,texto) {
document.getElementById(id).placeholder = texto;
}
textoCampo('c_texto','Datos en campo texto');