Mensagem numa caixa de input

29 Setembro 2008 Escrito por Gonçalo Martins

Nunca se questionou, como aparecem mensagens do nada ao lado de caixas de texto quando as seleciona? Um efeito do género do que lhe mostro abaixo pode ser atingido muito facilmente utilizando algumas linhas de javascript, e um pouco de CSS.

Como criei eu isto? Para o exemplo acima utilizei o seguinte HTML:

<label for="email" >E-mail</label>
<input type="text" onFocus="javascript:ApareceMensagem('mensagem-1')" onBlur="javascript:ApareceMensagem('mensagem-1')" maxlength="20" id="email"/>
<span id="mensagem-1" class="msg" style="visibility:hidden;">Necessario para login</span>

<label for="psw">Senha</label>
<input type="text" onFocus="javascript:ApareceMensagem('mensagem-2')" onBlur="javascript:ApareceMensagem('mensagem-2')" maxlength="20" id="psw"/>
<span id="mensagem-2" class="msg" style="visibility:hidden;">Escolha uma password forte</span>

... e um pouco de Javascript que irá alternar entre os campos, mensagem-1 e mensagem-2. Tornando-os visiveis e invisiveis.

O Css para este exemplo foi:

input{
   font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana;
   font-size:13px;
   color:#999999;
}
label{
   font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana;
   font-size:11px;
   display:block;
   color:#333333;
   font-weight:bold;
}
.msg{
   font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana;
   padding:3px 4px;
   border:solid 1px #DEDEDE;
   background:#FFFFCC;
   font-size:11px;
   color:#333333;
   width:200px;
   margin-left:2px;
}



giuseppe Dezembro 26, 2008	muito bom, só que serve mais para alguem que quer que o usuario se inscreva a algum serviço ou site. :/


Paulo Agosto 26, 2009	realmente é um artigo interessante, esse mundo de Tag's de comando é infinito rs parabéns pelo trabalho, espero que algumn dia eu consiga também.

Mensagem numa caixa de input

Exemplo | Download

Artigos Relacionados

Nuvem de Tags