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

Você está no BLOG do Maujor. IR PARA O SITE

Dicas em campos de formulário

Publicado em: 2008-06-16 — 22.482 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

Livros do Maujor

Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Clique a "capinha" para visitar o site do livro.

capa livro Grid Layout   capa livro html5   capa livro css3   capa livro HTML5 e CSS3   capa livro RWD   capa livro jQuery   capa livro Bootstrap3   capa livro ajaxjQuery   capa livro css   capa livro html   capa livro javascript   capa livro jQuery Mobile   capa livro jQuery UI   capa livro SVG   capa livro foundation   capa livro Sass e Compass

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 http://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