Sabe quando você vai em um site que tem um formulário que já está com o campo input texto preenchido e quando você clica nele o texto some para você poder preencher com os seus dados? É essa façanha que vou mostrar pra vocês.
Bom, eu estive dando uma pesquisada a respeito disso e vi alguns códigos na internet que não funcionavam e achei uma solução super simples e direta.
Suponha que temos o seguinte formulário:
<form name="formmail" id="formmail" action="email.php" method="post"> <input name="email" id="email" value="seu@email.com.br" /> <input type="submit" name="btn_enviar" id="btn_enviar" value="ENVIAR" /> </form>
Até então, nada complicado.
Agora o segredo é você adicionar no campo input text que você quer fazer o efeito a seguinte propriedade e valor:
onfocus="this.value='';"
Seu código final ficará assim:
<form name="formmail" id="formmail" action="email.php" method="post"> <input name="email" id="email" value="seu@email.com.br" onfocus="this.value='';" /> <input type="submit" name="btn_enviar" id="btn_enviar" value="ENVIAR" /> </form>
Explicando o código:
onfocus = Quando o manipulador de eventos estiver em foco nesta tag;
this.value = Pega o valor e atribui para “vazio”, ou seja, duas aspas simples sem nada dentro;
Simples não?
Espero que seja útil pra alguns que precisarem ou simplesmente quiserem dar um “charme” em seus formulários, ajudando aos visitantes mais leigos quando não sabem realmente o que deve ser preenchido no campo.
Aproveitei e acabei implementando aqui no meu blog, na lateral direita onde tem “Receber novidades por E-mail”. =)
Abraços e não deixem de comentar e votar!