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

Iniciado por TMarmol, 21 Noviembre 2012, 22:39 PM

0 Miembros y 1 Visitante están viendo este tema.

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:
<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]
<label id="email" class="phr-marker" for="usuario" >Email</label>

javascript
Código (javascript) [Seleccionar]

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]
<input type="text" onclick="ocultar_label();" />

Saludos

TMarmol

Cita de: drvy | BSM en 21 Noviembre 2012, 23:34 PM
Hola,

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

Ejemplo:

HTML - label
Código (html4strict) [Seleccionar]
<label id="email" class="phr-marker" for="usuario" >Email</label>

javascript
Código (javascript) [Seleccionar]

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]
<input type="text" onclick="ocultar_label();" />

Saludos

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

cassiani

#3
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]
<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.
http://www.w3schools.com/html5/att_input_placeholder.asp