En lugar de etiquetar cada campo en un formulario, a veces es preferible (desde un punto de vista de diseño) tener texto de marcador de posición en cada campo. Por ejemplo, en lugar de tener esto:

             ----------------------------------
Full Name:  |                                  |
             ----------------------------------

Tu tienes esto:

 ----------------------------------
| Full Name                        |
 ----------------------------------

Cuando haces clic en el campo, el texto desaparece y puedes escribir lo que quieras. Si omite el campo sin ingresar texto, el marcador de posición vuelve a aparecer.

He visto esto hecho de muchas maneras, pero todos los métodos involucran JavaScript. Por ejemplo, Twitter hace un trabajo decente en supágina de registro pero si Javascript está deshabilitado, terminas escribiendo tu nombre sobre la palabra 'Nombre completo'.

Estoy buscando un método solo para CSS que funcione incluso con JavaScript deshabilitado. La única solución potencial que he encontrado es establecer el fondo de la<input> etiqueta a una imagen del texto deseado y luego use lainput:focus pseudo-clase para borrar la imagen de fondo cuando alguien hace clic en el cuadro de texto. Esto parece funcionar pero sería bueno no tener que usar imágenes.

¿Alguien sabe de un buen recurso sobre cómo hacer esto?