PlaceHolder: Marcadores de posición en HTML5

12/ene/2011 HTML5 , 9 Comentarios
Logo 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.

  1. <form id="formualario">
  2. <label for="texto">Nombre: </label><input type="text" />
  3. </form>

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:

  1. <form id="formualario">
  2. <label for="texto">Nombre: </label>
  3. <input type="text" placeholder="Inserte su nombre" size="80" />
  4. </form>

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.

Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D

9 comentarios en “PlaceHolder: Marcadores de posición en HTML5”

Víctor Cuervo

Víctor Cuervo

@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.

Víctor Cuervo

Jhonatan

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

Víctor Cuervo

Víctor Cuervo

@Luck, Thanks for your comment!

Víctor Cuervo

Luck

A little rationality lifts the qaiulty of the debate here. Thanks for contributing!

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*


*