Outbook

HTML+CSS+JS, Accesibilidad, PHP y más

Inicio que contiene a Desarrollo web que contiene a Javascript que contiene a HTML 5: Atributo placeholder

Datos de búsqueda

HTML 5: Atributo placeholder

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:

Atributo placeholder (campo inactivo)

Y este es el estado del campo activado antes de haber introducido información:

Atributo placeholder (campo activo)

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');

Ver ejemplo funcional.

Saber más

Comentarios del artículo

Los comentarios están cerrados.

Si el comentario no guarda relación con el tema del artículo o los comentarios previos, si la redacción del mismo es ilegible (estilo HOYGAN), o si contiene insultos u otros términos ofensivos, será borrado de inmediato. No se garantiza ningún soporte a los ejemplos de desarrollo web presentados en este sitio.

Hay 3 comentarios a “HTML 5: Atributo placeholder”

Matias Mancini dice:

Fecha de comentario: 2010/08/18 12:09

He desarrollado un plugin jQuery para implementar esta técnica en Internet Explorer y Firefox, con muy poco código y documentación en español. Pueden encontrarlo aquí mismo. http://www.matiasmancini.com.ar/html5form.php

HTML, Jquery: Componente de buscador con placeholder « Outbook dice:

Fecha de comentario: 2011/03/30 17:20

[…] en el que se generará el rollover del botón de búsqueda mediante Javascript, y se simulará el placeholder también mediante Javascript en navegadores no […]

HTML 5 y Jquery: Componente de buscador con placeholder « Outbook dice:

Fecha de comentario: 2011/03/30 17:21

[…] en el que se generará el rollover del botón de búsqueda mediante Javascript, y se simulará el placeholder también mediante Javascript en navegadores no […]

Información del sitio