HTML5 » PlaceHolder: Marcadores de posición en HTML5
Una de las cosas nuevas que nos trae HTML5 es la capacidad de crear marcadores de posición o más conocidos dentro de la especificación HTML5 como placeholder.
Pero, ¿qué es un placeholder o marcador de posición? Para resumirlo podemos decir que es el texto que aparece dentro de un campo de texto antes de que se inserte un contenido. De esta manera podemos indicar al usuario qué queremos que inserte en ese campo. Es algo parecido a los labels, pero dentro de propio recuadro de texto.
La utilización de placeholder no exime el uso de labels. La W3C recomienda siempre el uso de un label junto con los inputs. Aunque estemos utilizando un placeholder.
Pero vamos a ponernos manos a la obra. Lo primero será crear un input de tipo text.
Para crear el placeholder simplemente tenemos que utilizar el atributo placeholder del elemento input. El valor que asignemos al atributo será el que aparezca en el marcado de posición.
Veamos como sería el código:
Y cual sería el resultado...
Aunque lo mejor es que cargues tu mismo la página web.
Hay que tener en cuenta una cosa, y es que el placeholder es un atributo de HTML5 y que solo está soportado por los últimos navegadores web. Así que no podremos tomarlo como algo obligatorio, si no opcional al usuario que entre con un navegador de última generación.
enero 12, 2011 #
Información Bitacoras.com…
Valora en Bitacoras.com: Una de las cosas nuevas que nos trae HTML5 es la capacidad de crear marcadores de posición o más conocidos dentro de la especificación HTML5 como placeholder. Pero, ¿qué es un placeholder o marcador de posición? Para re……
diciembre 21, 2011 #
A little rationality lifts the qaiulty of the debate here. Thanks for contributing!
diciembre 26, 2011 #
@Luck, Thanks for your comment!
enero 24, 2012 #
HTML5 es más semántico, Esa simplicidad por medio de etiquetas como ( ) o () va a ahorrar a muchos diseñadores web la famosa divitis, o lo que es lo mismo, el usar divs para todo de manera excesiva. Ya no va a hacer falta poner algo como: “( Contenido )” si no que en HTML5 será esto lo que usemos “( Contenido )”
Saludos
diseño de paginas web html5
enero 25, 2012 #
@Jhonatan hemos perdido las etiquetas HTML que has metido y es una pena. Pásamelas por el formulario de http://lineadecodigo.com/acerca-de/#contacto y las añadimos a tu comentario.
Gracias.
febrero 16, 2012 #
[...] Cuervo . 4 visitas Sin Comentarios Imprimir Seguro que alguno de vosotros ha leido nuestro artículo que cuenta como utilizar un placeholder con HTML5. Esto nos posibilita el poner un texto dentro de un campo de un formulario para orientar al usuario [...]
febrero 16, 2012 #
[...] que alguno de vosotros ha leido nuestro artículo que cuenta como utilizar un placeholder con HTML5. Esto nos posibilita el poner un texto dentro de un campo de un formulario para orientar al usuario [...]
febrero 17, 2012 #
[...] de Polyfills.En nuestro ejemplo, que nos explique como utilizar un Polyfill en Modernizr, vamos a crear una página que tenga un Placeholder y en el caso que no haya soporte del placeholder utilizaremos un plugin de jQuery que nos simule en [...]
febrero 18, 2012 #
[...] nuestro ejemplo, que nos explique como utilizar un Polyfill en Modernizr, vamos a crear una página que tenga un Placeholder y en el caso que no haya soporte del placeholder utilizaremos un plugin de jQuery que nos simule en [...]