En muchos formularios nos puede venid bien que tengan un formato inline al estilo del login de facebook, es decir, que el contenido del campo nos indique qué hay que introducir y cuando vayamos a ese campo eliminemos el contenido para que el usuario lo rellene. Con esto nos ahorraríamos poner “label” para cada campo.
<input type="text" name="mi_variable"
onfocus="if( this.value == 'etiqueta' ) { this.value = ''; }"
onblur="if( this.value == '' ) { this.value = 'etiqueta'; }"
value="etiqueta" />
Siendo ‘etiqueta’ el nombre del contenido. En el caso de las contraseñas se podría hacer igual pero solamente veríamos asteriscos, así que habría que cambiar el type también. Como añadido podríamos cambiar el color según es onfocus u onblur a través de this.style.color.
Aquí va otro ejemplo:
<input type="text" name="Password"
onfocus="
if( this.value == 'Password' ) {
this.value = ''; // Borramos el contenido para dejarlo limpio para el usuario
this.style.color = '#000000'; // Lo ponemos en negro
this.type = 'password'; // Lo convertimos en password para que muestre asteriscos
}"
onblur="
if( this.value == '' ) {
this.value = 'Password'; // Volvemos a ponerle el texto en caso de no haber añadido una password
this.style.color = '#CCCCCC'; // Lo ponemos en gris
this.type = 'text'; // Lo pasamos a texto si no ha introducido password
}"
value="Password" />
