elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.


Tema destacado: Usando Git para manipular el directorio de trabajo, el índice y commits (segunda parte)


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  ¿Como ocultar label al hacer clic en ella en html?		0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: ¿Como ocultar label al hacer clic en ella en html?  (Leído 7,689 veces)
TMarmol

Desconectado Desconectado

Mensajes: 89


Just Learning


Ver Perfil WWW
¿Como ocultar label al hacer clic en ella en html?
« 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í:


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.
« Última modificación: 21 Noviembre 2012, 22:42 pm por TMarmol » En línea
#!drvy
Moderador
***
Desconectado Desconectado

Mensajes: 5.856



Ver Perfil WWW
Re: ¿Como ocultar label al hacer clic en ella en html?
« Respuesta #1 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
En línea
TMarmol

Desconectado Desconectado

Mensajes: 89


Just Learning


Ver Perfil WWW
Re: ¿Como ocultar label al hacer clic en ella en html?
« Respuesta #2 en: 9 Diciembre 2012, 17:54 pm »
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
  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?
En línea
cassiani


Desconectado Desconectado

Mensajes: 978


« Anterior | Próximo »


Ver Perfil WWW
Re: ¿Como ocultar label al hacer clic en ella en html?
« Respuesta #3 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
« Última modificación: 11 Diciembre 2012, 14:21 pm por cassiani » En línea
Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Bajar al Gran Cañón del Colorado con sólo hacer clic
Noticias 		wolfbcn 3 2,612 Último mensaje 2 Febrero 2013, 04:31 am
por Shell Root
Mostrar menú al hacer clic en un listview
ASM 		.:UND3R:. 5 4,472 Último mensaje 13 Mayo 2013, 03:27 am
por .:UND3R:.
Cómo hacer clic derecho en páginas web que no lo permiten
Noticias 		wolfbcn 0 1,147 Último mensaje 20 Abril 2016, 21:52 pm
por wolfbcn
Cómo comprobar la seguridad de una URL acortada antes de hacer click en ella
Noticias 		wolfbcn 0 2,105 Último mensaje 11 Diciembre 2016, 22:00 pm
por wolfbcn
¿Cómo saber si un enlace, una web o documento, es peligroso antes de hacer clic?
Noticias 		wolfbcn 0 1,176 Último mensaje 6 Mayo 2019, 14:16 pm
por wolfbcn
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines