15 de novembro de 2007

Dicas para criar formulários web

Atualmente, os formulários são uma das melhores formas de contato entre usuario e webmaster. Mas eles também são usados para muitas outras coisas como se cadastrar, fazer login, recuperar senhas, reportar bugs, etc.

Com essas dicas simples, você poderá melhorar a experiencia de seu visitante ao usar um formulário em seu site.



Use labels

É um crime contra a acessibilidade não usar label em seu formulário. Essas tags indicam o que é cada elemento de um formulário.


Estilize a pseudo-classe :focus

Com o :focus você pode aplicar estilos a uma tag quando ela estiver sendo usada. Adicione uma cor de fundo ao elemento quando o usuário estiver usando.

Escreva dicas dentro dos textareas (e depois limpe-as)

Escrever alguma coisa dentro de textareas ajuda o usuario a saber o que ele deve escrever ali. Por exemplo, você tem um formulário de contato e no textarea "mensagem" você pode escrever "Digite seu comentário ou mensagem aqui". Para fazer isso, simplesmente digite sua mensagem entre as tags textarea:

<textarea id="menssagem" rows="20" cols="20">Digite seu comentário ou mensagem aqui.</textarea>

Essa dica gera um problema. O usuario terá que deletar a sua dica manualmente, e isso não é bom. Mas nada que um javascript não resolva!

<textarea onfocus="this.value=''; this.onfocus=null;" id="menssagem" rows="20" cols="20">Digite seu comentário ou mensagem aqui.</textarea>

Proteja-se contra SPAMs, mas sem o CAPTCHA

SPAM é o grande problema dos formulários de contato. Pensando nisso foi criado o CAPTCHA, aquelas imagens com letras e números distorcidos que são usadas para confirmar se somos humanos. O grande problema do CAPTCHA é a falta de acessibilidade. Se quem tem uma visão perfeita fica com dificuldade para interpretar essas imagens imagine quem é deficiente visual.

Uma solução para isso é usar perguntas simples, geradas automaticamente, como "quanto é 1+1?".

Referencias


Criar formulários acessíveis
Formulários Acessíveis, parte 2
Tips for creating great web forms

Tags: , ,

3 comentários:

mortelenta disse...

muito bom o seu blog... principalmente pra quem tem um blog... eu li muitos posts e me ajudou muito...

http://juniormortelenta.blogspot.com

Guido disse...

Obrigado pelo comentário, fico feliz em ter te ajudado.

Abraços e volte sempre!

NerdMarcius disse...

Valeu pelas dicas, são muito uteis e vou utiliza-las em meus formulários.