El atributo placeholder

Es común utilizar etiquetas INPUT para que los usuarios ingresen alguna clase de dato, por ejemplo, buscar algo. Suelen ser etiquetas a las que no prestamos atención ni personalizamos aunque, como cualquier otra, admiten el uso de CSS (más información: 1 | 2).

Básicamente dicen esto aunque podrían tener más atributos:

<input type="text" value="" />

Y en estos ejemplos, todas tienen una clase con esta regla de estilo:

input.demos[type=text] {
  background: #FFF;
  border: 2px solid Chocolate;
  border-radius: 4px;
  color: #888;
  font-size: 20px;
  height: 32px;
  margin: 10px 0;
  padding: 0 10px;
  text-align: center;
  width: 300px;
}

Se vería así:

Así, sin nada extra, suele ocurrir que el usuario no sepa qué tipo de dato poner o que formato debería tener por lo que es común que se le adose esa información; si esto lo hacemos en el atributo value será incómodo ya que quien lo use, deberá borrar ese texto y luego poner el dato:

<input type="text" value="el texto por defecto" />

Para evitar eso, muchas veces debemos haber visto que se usan dos eventos extras: onblur y onfocus a los que se les agrega un poco de JavaScript que lo que hace es permutar el valor del atributo value, si el control no está activo y no hay nada agregado, se ve el texto por defecto y ese texto desaparece cuando hacemos click dentro para escribir algo.

<input type="text" value="el texto por defecto" onfocus="if (this.value=='el texto por defecto') this.value='';" onblur="if (this.value=='') this.value='el texto por defecto';" />

Funciona perfectamente pero es un código largo y engorroso que las nuevas técnicas del HTML5 y el CSS3 hacen innecesario ya que para eso, ahora podemos usar un nuevo atributo llamado placeholder que hará todo eso de modo automático aunque, en versiones de Internet Explorer viejas no tendrá ningún efecto:

<input type="text" placeholder="el texto por defecto" value="" />

También es posible personalizar placeholder para que se vea "distinto" pero, eso requiere el uso de propiedades con prefijos que son tres:

:-moz-placeholder {} /* para Firefox */
::-webkit-input-placeholder {} /* para Chrome */
:-ms-input-placeholder {} /* para Internet Explorer */

Lamentablemente, por ahora, las diferencias entre los navegadores también son varias; por ejemplo, en Firefox se pueden usar propiedades como background-color, border y padding pero en Chrome no o bien son mostradas de modo extraño. Además, se debe tener en cuenta que estas reglas de estilo hay que aplicarlas de modo individual y no pueden ser agrupadas:

input.demos:-moz-placeholder {
  background: #DDD;
  color: Chocolate;
  font-size: 16px;
  font-style: italic;
  font-weight: bold;
  letter-spacing: 3px;
}
inputdemos::-webkit-input-placeholder {
  background: #DDD;
  color: Chocolate;
  font-size: 16px;
  font-style: italic;
  font-weight: bold;
  letter-spacing: 3px;
}
input.demos:-ms-input-placeholder {
  background: #DDD;
  color: Chocolate;
  font-size: 16px;
  font-style: italic;
  font-weight: bold;
  letter-spacing: 3px;
}