¿Como ocultar label al hacer clic en ella en html?

[TMarmol]

Bueno, estoy haciendo una web y en el formulario de inicio de sesión, he puesto unas label que al hacer clic en las casillas para ingresas tu información deben ocultarse, pero no es así.

Este es el codigo de la label que he utilizado:

Código [Seleccionar] Expandir

<label class="phr-marker" for="usuario" >Email</label>
<label class="phr-marker" for="contraseña" >Contraseña</label>

El problema es que si escribo algo en la casilla se ve así:


Cuando deberia verse así:


La cosa es que el label este ahi, pero que cuando haga clic en la casilla para escribir desaparezca.

Mi web, soporta HTML, PHP, javascript y MySQL, pero cuanto mas sencillo sea el código mejor, que ya lo tengo bastante cargado.

[#!drvy]

Hola,

Dale un ID al label que deseas ocultar y luego puedes usar javascript para ocultarlo.

Ejemplo:

HTML - label

Código (html4strict) [Seleccionar] Expandir

<label id="email" class="phr-marker" for="usuario" >Email</label>

javascript

Código (javascript) [Seleccionar] Expandir


var ocultar_label = function() {
   // Obtenemos el elemento con ID email.
   var campoemail = document.getElementById('email');
   // Ocultamos dicho elemento.
   campoemail.style.display = 'none';
}

Solo te hace falta poner a la escucha una funcion que detecte cuando el usuario hace click sobre el campo de texto o simplemente poner en el input

Código (html4strict) [Seleccionar] Expandir

<input type="text" onclick="ocultar_label();" />

Saludos

[TMarmol]

Hola,

Dale un ID al label que deseas ocultar y luego puedes usar javascript para ocultarlo.

Ejemplo:

HTML - label

Código (html4strict) [Seleccionar] Expandir

<label id="email" class="phr-marker" for="usuario" >Email</label>

javascript

Código (javascript) [Seleccionar] Expandir


var ocultar_label = function() {
   // Obtenemos el elemento con ID email.
   var campoemail = document.getElementById('email');
   // Ocultamos dicho elemento.
   campoemail.style.display = 'none';
}

Solo te hace falta poner a la escucha una funcion que detecte cuando el usuario hace click sobre el campo de texto o simplemente poner en el input

Código (html4strict) [Seleccionar] Expandir

<input type="text" onclick="ocultar_label();" />

Saludos

Gracias, pero el código javascript donde lo coloco?

[cassiani]

colocas el código javascript que te dejo monkey, entre etiquetas <script></script> en el HEAD de tu página.

Otra forma:

Código (xml) [Seleccionar] Expandir

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

Lee sobre el atributo placeholder de html5, te evitaras labels y script.

Código [Seleccionar] Expandir

http://www.w3schools.com/html5/att_input_placeholder.asp