Dicas simples para dar mais usabilidades aos formulários

tecdom

Desenvolvedores Web detestam criar formulários quase tanto quanto os usuários detestam preenchê-los, são duas tarefas infelizes da Internet, mas um pouco de JavaScript e CSS inteligente podem amenizar a chatice dessas situações. Neste artigo devo mostrar algumas dicas simples de como melhorar a usabilidade dos formulários e esperançosamente, inspirá-lo para que você possa criar seus próprios.

[ Hits: 35.342 ]

Por: Pedro César em 23/10/2004

1 0

Denuncie Favoritos Indicar Impressora

São as pequenas coisas que contam

Você certamente já encontrou essa dica antes; ela é usada pelo Google. Quando você o carrega o cursor salta imediatamente para o campo texto a ser preenchido e fica pronto para que você digite sua pesquisa. Isso acontece tão rapidamente que talvez você nem o perceba, mas, de fato, isso e muito útil em qualquer página onde o propósito principal é preencher um formulário. Isso pode ser feito de várias maneiras, contando que em cada uma delas você identifique o campo que você quer levar o foco com o atributo ID certo (no nosso caso "myfield"). Veja os exemplos:

Esse é mais ou menos o mesmo método utilizado pelo Google, simples, pequeno e vai direto ao ponto, para funcionar precisa que você use o evento OnLoad da TAG <body>, mas algumas pessoas acham isso "feio". Então usa-se isso:

Esse código pode ser inserido em qualquer parte do seu HTML ou até mesmo oculto em um javascript externo. Se você está usando muito javascript em sua página, então você pode juntar todos os códigos em um javascript separado do seu HTML. Esse método tem uma desvantagem, você somente poderá associar uma coisa ao evento window.onload por vez.

Esta seria uma boa forma de garantir o uso de várias funções ao evento.

O código acima somente funciona se for colocado dentro do código HTML e for depois do campo INPUT.

Labels

Uma forma rápida de aumentar a usabilidade de seus formulários é acrescentar Labels, se é que você já não as usa. A TAG <label> faz parte do HTML desde 1998, mas muitos desenvolvedores ignoram sua existência. Ela permite que você relacione o texto que descreve um campo com o próprio campo (seja um link para o campo). Quando você clicar na Label, o browser irá mover o foco para o campo relacionado. Ou pré-selecionar no caso de Botões de rádio ou CheckBox. Antes de você acrescentar a label, o campo INPUT deve ter o atributo ID configurado.

Veja um simples exemplo da utilização de label:

<label for="username">Username:</label>
<input type="text" name="username" id="username" size="10">

Clicando no label "Username", o foco irá para o campo texto username. Isso pode não parecer um efeito particularmente muito útil, mas tenho esse efeito como um gancho para estilizar e potencializar comandos Javascripts extras. Isso pode melhorar drasticamente a acessibilidade em softwares de ajuda.

No caso de somente uma CheckBox ou Botão de rádio, é útil para facilitar a seleção do mesmo por parte de usuário, por exemplo na aceitação de algum contrato.

<input type="checkbox" name="accepted" id="accepted">
<label for="accepted">I agree to the terms and conditions</label>

É claro que muitas pessoas não saberão que a label está ativa para receber cliques, então temos um simples truque de CSS para mudar o cursor do mouse ao passar sobre ela:

Por que essas duas declarações de cursor? O CSS padrão chama de POINT o "valor do cursor sobre o link". Desafortunadamente o IE versões 5 e 5.5 para Windows não reconhecem esse valor usando "HAND" para o mesmo. Então navegadores melhores lerão POINTER ignorando HAND e essas versões do IE farão o contrário.

Próxima página

Páginas do artigo

   1. São as pequenas coisas que contam
   2. Dicas visuais
   3. Melhorando os campos de entrada de texto
   4. Validação

Outros artigos deste autor

Uma introdução à classe ADODB

Uma introdução à biblioteca GD

Paginação de resultados com a classe ADODB

Utilizando PEAR

Leitura recomendada

Verificando a consistência de CPF e CNPJ em um formulário com JavaScript

Verificando a consistência de um formulário com JavaScript

Formulários HTML: Problemas com campos desabilitados?

Select dinâmico com PHP, Javascript e MySQL

Google AdSense: Técnicas de otimização dos anúncios

Comentários

[1] Comentário enviado por removido em 24/10/2004 - 11:38h

Fala ae!,

POww show o artigo.. gostei principalmente do <label> que já tinha visto ele mais nunca dei muita atenção. O PHP => SMARTY quando vc gera formulários com ele ele taca esse "labels".

vlwwwwwwwww

1 0

[2] Comentário enviado por Hernando em 03/05/2005 - 11:57h

Bom artigo para quem gosta de incrementar formulários...

0 0

[3] Comentário enviado por joshua.sm em 31/05/2006 - 12:45h

Um artigo muito útil, já tinha visto várias dessas técnicas implementadas, mas foi a primeira vez que eu as vi explicadas. Parabéns pelo artigo.

0 0

[4] Comentário enviado por rogespizzatto em 02/02/2007 - 14:20h

Muito bom !!!

0 0

[5] Comentário enviado por acharnobairro em 23/02/2007 - 17:51h

Excelentes Artigos e truques que vc nos disponibilizou.
Gosto de sua forma de separar as explicações.
Se for possível colocar exemplos ajudaria a informar se aquele script resolve algum problema que alguem está procurando respostas.
A forma de apresentar apenas parte dos scripts cria dificuldades de entendimento para os aprendizes, pois muitos não saberão onde e como coloca-los dentro das páginas para seu uso correto. Sei que sua proposta não é dar aulas mas se vc tiver alertado para ensinar diferente nós agradecemos ...
Grato - Flavio - hotstamp@globo.com

0 0