Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: TMarmol en 21 Noviembre 2012, 22:39 pm



Título: ¿Como ocultar label al hacer clic en ella en html?
Publicado por: TMarmol en 21 Noviembre 2012, 22:39 pm
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:
<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í:
(http://img853.imageshack.us/img853/4250/capturadepantalla7.png)

Cuando deberia verse así:
(http://img811.imageshack.us/img811/3729/capturadepantalla8.png)

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.


Título: Re: ¿Como ocultar label al hacer clic en ella en html?
Publicado por: #!drvy 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
  1. <label id="email" class="phr-marker" for="usuario" >Email</label>

javascript
Código
  1. var ocultar_label = function() {
  2.   // Obtenemos el elemento con ID email.
  3.   var campoemail = document.getElementById('email');
  4.   // Ocultamos dicho elemento.
  5.   campoemail.style.display = 'none';
  6. }

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

Saludos


Título: Re: ¿Como ocultar label al hacer clic en ella en html?
Publicado por: TMarmol en 9 Diciembre 2012, 17:54 pm
Hola,

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

Ejemplo:

HTML - label
Código
  1. <label id="email" class="phr-marker" for="usuario" >Email</label>

javascript
Código
  1. var ocultar_label = function() {
  2.   // Obtenemos el elemento con ID email.
  3.   var campoemail = document.getElementById('email');
  4.   // Ocultamos dicho elemento.
  5.   campoemail.style.display = 'none';
  6. }

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

Saludos

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


Título: Re: ¿Como ocultar label al hacer clic en ella en html?
Publicado por: cassiani en 11 Diciembre 2012, 14:09 pm
colocas el código javascript que te dejo monkey, entre etiquetas <script></script> en el HEAD de tu página.

Otra forma:
Código
  1. <input type="text" id="mi_input" value="introduce el texto" onfocus="if (this.value=='introduce el texto') this.value='';"
  2. onblur="if (this.value=='') this.value='introduce el texto';" />

Lee sobre el atributo placeholder de html5, te evitaras labels y script.
Código:
http://www.w3schools.com/html5/att_input_placeholder.asp