feed twitter facebook LinkedIn facebook

HTML5 » PlaceHolder: Marcadores de posición en HTML5

enero 12, 2011 por Víctor Cuervo 9 Comentarios Imprimir Imprimir

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.

Visualizar el Codigo
Visualiza el artículo
Descargar el Codigo
Descargar el código
Error en el Codigo
Error en el código
Foro sobre HTML5
Foro sobre HTML5
tags: , , , , ,

Artículos relacionados:

9 comentarios »

RSS feed para los comentarios de esta entrada. TrackBack URI

  1. Bitacoras.com
    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……

  2. Luck
    diciembre 21, 2011 #

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

  3. Víctor Cuervo
    diciembre 26, 2011 #

    @Luck, Thanks for your comment!

  4. Jhonatan
    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

  5. Víctor Cuervo
    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.

  6. Linea de Codigo » Utilizar Placeholder con jQuery
    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 [...]

  7. Utilizar Placeholder con jQuery | Diseño web económico
    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 [...]

  8. Linea de Codigo » Como utilizar un Polyfill con Modernizr
    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 [...]

  9. Como utilizar un Polyfill con Modernizr | Diseño web económico
    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 [...]

Deja un comentario

XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*