Dicas em campos de formulário

Dia destes, navegando casualmente pela internet achei um tutorial interessante no site Ask the CSS Guy onde o desenvolvedor explicava uma solução baseada em CSS e JavaScript para apresentar dicas de preenchimento de formulários tão logo o usuário clicasse dentro de um campo do formulário.
Examinando o resultado visual final, antes mesmo de analisar os códigos HTML e JavaScript que fazem o efeito funcionar conclui que seria possível abrir mão de JavaScript e obter efeito muito semelhante com uso de CSS puro.

Imaginei como seria a solução, mas não me dispus a desenvolvê-la, pois estava envolvido com outros afazeres e em particular a terminar meu próximo livro "Criando sites com HTML", uma abordagem sob o ponto de vista dos Padrões Web, a ser lançado na segunda quinzena de julho.

Na semana passada recebi e-mail de um leitor perguntando se eu conhecia algum tutorial sobre dicas em campos de formulário que pudesse indicar-lhe e ato contínuo me lembrei do que tinha achado casualmente na web. Consultando o histórico do navegador recuperei o endereço do site e passei ao leitor. Tendo entregue o livro à Editora Novatec para revisão gramatical, encontrei um tempinho extra para voltar ao assunto do tutorial e concretizar o que eu tinha imaginado na primeira visita ao tutorial. Agora mostro como desenvolvi a solução e consegui o resultado com CSS puro, ou seja, sem uso de JavaScript.

Sugiro que comecemos com uma visita à página com o resultado final obtido com CSS e JavaScript e nela se observe o que acontece quando o usuário clica dentro de um dos dois últimos campos do formulário: Username e Password.

Agora uma visita à página com o resultado final com CSS puro por mim desenvolvida e nela observe o que acontece quando você passa o mouse ou dá o foco a qualquer um dos campos do formulário ou ao botão de envio. A página que desenvolvi segue o mesmo layout e apresentação da página original em inglês, para fins de comparação, mas a semelhança pára aí, pois tanto o HTML do formulário como as regras de estilização para ele são diferentes.

Como a página foi por mim desenvolvida com a mesma apresentação da original, por cortesia e consideração com o autor, postei um comentário no site dele informando sobre a alternativa por mim criada. Já fazem alguns dias e o comentário não foi liberado para exposição, por razões que desconheço, mas registro aqui em nome da mesma cortesia e consideração.

Como funciona?

Não vou me estender em longas explicações com considerações básicas de marcação e estilização, pois a solução é bem simples e pode ser deduzida da simples análise do código fonte da página na qual coloquei a folha de estilo incorporada justamente para facilitar a consulta marcação/CSS no mesmo arquivo. Contudo não vou deixar totalmente por conta do meu leitor, com pouca intimidade com CSS, a tarefa de estudar o código e "se virar" sozinho. Tomarei como exemplo, para explicar como obter o efeito, o campo "Username" do formulário e a partir dele a técnica para os demais campos é a mesma.

Marcação típica

Observe a marcação do campo e leia a explicação em cada linha da marcação:

<form action-xhr="#" method="post" id="exemplo">
... 
<label for="user">Username:</label> /* Nome do campo */  <a href="#" tabindex="9"> /* ops! um link morto - agradeça ao IE6 que não entende :focus */    <input type="text" id="user" tabindex="10" /> /* campo de texto */      <b>Username? I am sure you know what this is.</b> /* a dica para preenchimento do campo */        <span></span> /* container para a setinha no lado esquerdo da caixa com a dica */  </a>
<hr /> /* o que esta linha horizonatal está fasendo aqui? */...
</form>

Os elementos b e spam contêm a dica e serão posicionados fora de visão na tela com uso da regra CSS a seguir:

form#exemplo a b, 
form#exemplo a span {
 position:absolute;
 left:-10000px;
 }

Quando o usuário passar o mouse sobre o link que, conforme mostra a marcação, é o campo input a dica é revelada com uso da seguinte regra CSS:

form#exemplo a:hover b, 
form#exemplo a:focus b {
 position:absolute; 
 top:-10px;
 left:370px;
 }
form#exemplo a:hover span, 
form#exemplo a:focus span {
 background:url(seta.gif) no-repeat;
 display:block;
 position:absolute; 
 top:-5px;
 left:361px;
 width:15px;
 height:22px;
 }

Estas duas regras de estilo fazem o dica funcionar. As demais regras complementam a estilização e para a folha de estilo completa veja o código fonte da página.

Se você preferir estudar offline faça o download da página com o formulário