Logo do siteSilhueta da face do Maujor seguida do texto Maujor o dinossauro das CSS

Menu hamburger Três barras horizontais na cor laranja destinadas a ser clicada para abrir o menu menu do site

Dicas em campos de formulário

Publicado em: 2008-06-16 — 28.924 visualizacoes

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="" 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

Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Visite o site dos livros.

Esta matéria foi publicada em: 2008-06-16 (segunda-feira). Subscreva o feed RSS 2.0 para comentários.
Comente abaixo, ou link para https://www.maujor.com/blog/2008/06/16/dicas-em-campos-de-formulario-com-css-puro/trackback no seu site.

12 comentários na matéria: “Dicas em campos de formulário”

  1. KensleyNo Gravatar disse:

    Otima solução, muito interessante. Geralmente eu uso o atributo “title” dentro das tags de input, mas funciona somente com o mouse sobre o campo, para o uso do tab essa solução eh muito melhor.

    Parabéns pela materia

  2. Hb EventsNo Gravatar disse:

    Muito bom galera… Música na cabeça…

  3. TetsuoNo Gravatar disse:

    Legal a solução, mas via tab não funciona nem no IE7 nem no Chrome. E não tem como fazer o balão aparecer quando o foco estiver no input, e não no link, como no exemplo original? É que é esquisito ter que dar dois tabs pra passar de um campo para outro.

  4. MaujorNo Gravatar disse:

    @soh dubom
    A solução com CSS funciona tanto para mouse como para tecla.

  5. soh dubomNo Gravatar disse:

    Bom o artigo, mas vale lembar q são 2 propostas diferentes e não algo como eliminar o js pq posso fazer o mesmo com css. Tudo bem q qdo utilizamos js temos q pensar em Graceful Degradation, mas imho qdo se trata de formularios utilizo a tecla TAB para navegar entre os form fields e q intenção no artigo original eh justamente mostrar o tooltip no momento da tabulação e não no mouse-over.

  6. AterNo Gravatar disse:

    Parabens, já me ajudou hoje.

    Sucesso!

    Téo

  7. viniciusNo Gravatar disse:

    Olá, estou de novo em seu site, e pela primeira vez no blog. Como sempre, suas soluções são ótimas, e o mais importante, simples. Na hora que passei o mouse logo pensei no hover, mas me lembrei que vi aqui no seu site que no ie6 e mais antigos só reconhecia o hover da tag a. Pensei naqueles códigos imensos que se propõem a fazer o ie reconhecer o hover artificialmente, mas quando olhei o fonte… Lá estava uma tag a envolvendo o input! Meus parabéns! Me fez rir de mim mesmo e na complexidade que eu estava criando desnecessáriamente. Abraço! Não tem um livro seu com desconto não?

  8. DurvalNo Gravatar disse:

    é um bom modo de gerenciar formularios
    Durval – http://www.hotmastersound.com.br

  9. James ClebioNo Gravatar disse:

    Ficou quase tão bom quanto a idéia original. Há problema com a tabulação durante o preenchimento; um tab não vai direto para o campo seguinte…

  10. DanielNo Gravatar disse:

    Legal a materia, e queria dizer que estou anciozissimo com o novo livro.
    Agardo ancioso.
    ============
    /* Abraços de Daniel… */

  11. Dicas em formulários disse:

    […] No blog do maujor foi publicado um ótimo artigo sobre como colocar dicas em campos do formulário somente com CSS. Confiram vale a pena: Dicas em campos de formulário  […]

  12. Newton de Góes HortaNo Gravatar disse:

    Bem interessante as dicas.

    Meus parabéns antecipados pelo novo best seller a ser lançado em julho.

Comentário:





Teclar "Enter" cria um novo parágrafo. Teclar "Shift + Enter" causa uma quebra de linha.

Subscribe without commenting

topo