Input con Value que desaparece al dar click y reaparece al salir (Form)[HTML]




Tengo un Form con 2 inputs, 1 de nombre de usuario y el otro de contraseña, quiero que al el de nombre de usuario tenga escrito por defecto USUARIO y que al darle click este texto desaparesca para que puedan escribir pero que tambien si no escriben nada (osea que lo dejan en blanco) vuelva a poner USUARIO .



Para hacer solo hay que agregar lo siguiente al INPUT que queremos:



Quedandonos asi todo el INPUT de usuario:



Actualizacion (27.12.2015):
En html5 existe un nuevo atributo que se llama “PlaceHolder” el cual hace la misma función que lo que hicimos con JS (un texto por defecto que desaparece al escribir algo o cuando se deja el campo vació) , para el ejemplo anterior seria así:

Terminos de Busqueda:

  • input al darle click salga informacion
  • insertar texto al hacer click php
  • poner dentro de una caja nombre que se borre al acer click html
  • input con texto que desaparece
  • input diggio como tambien se llama
  • value que se borra html5
  • valor por defecto input text
  • como poner un comentario que no se desaparesca
  • input desaparece texto al dar click
  • asignar estilo con javascript al dar clic en un textbox
  • https://www vicolinker net/input-con-value-que-desaparece-al-dar-click-y-reaparece-al-salir-formhtml/
  • Efecto para borrar placeholder a darle click en textarea
  • desaparecer un input javascript
  • desaparecer asp:button al dar click
  • Darle valor a un campo de texto y al hacer click desaparezca en html
  • DAR CLICK PARA QUE APARESCA Y DESAPAREZCA UN TEXO
  • click en input type y desaparezca value javascript
  • cuando hago click en un input desaparezca el valor
  • configurar oracleoradb11g_home1clragent
  • como colocar la imagen que aparezca y desaparezca en visual basic

11 comentarios en “Input con Value que desaparece al dar click y reaparece al salir (Form)[HTML]

  1. encontre un detalle e esta tecnica si haces esto entonces cuando mandes un formulario con campo obligatorio el sistema pensara que tiene un campo qe enrealidad no fue llenado se soliciona con unos if pero bueno aun asi se me hizo una lata a ver si alguien sabe mas de esto y como corregirlo GRAX pero despues de eso buen post
  2. Gracias Erick !! , tampoco habia pensado en eso … Si usas Html5 puedes usar la propiedad PLACEHOLDER y creo que ahi no habria problemas 😉 Un saludo y gracias por tu comentario !
  3. hola alguien podria ayudarme a poner este codigo en un formulario que esta dentro de una funcion echo? ya que no he podido hacerlo de antemano muchas gracias por su ayuda,
  4. @CREY Hola, creo que podrias adaptarlo a un textarea, pero te recomiendo usar un atributo de html5 que hace esto mucho mas sencillo, el atributo es Placeholder Ejemplo: (Para tu textarea) Ejemplo de Imput: (para el ejemplo del post) Al dar click este texto desaparecera y si borra el contenido volvera a aparecer 😉 Espero que te haya servido 🙂

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *