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: 34.968 ]

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

1 0

Denuncie Favoritos Indicar Impressora

Melhorando os campos de entrada de texto

A forma mais comum de um campo texto é: <input type="text">. Nós já vimos como o auto-foco dos campos no carregamento da página é uma boa melhora. Um truque útil para campos que devem iniciar com um valor padrão que serão posteriormente alterados é o seguinte:

Quando o campo receber o foco automaticamente o texto dentro dele é selecionado; ele deverá ser sobrescrito quando o usuário começar a digitar seu próprio texto.

Temos também um truque muito bom que está sendo usado para criar alguma coisa com o título bem óbvio, tipo um e-mail ou um artigo em um WebSite.

Isto cria um efeito similar ao encontrado nos mais populares programas de e-mail, onde o texto da barra de título da janela muda conforma o assunto e digitado. Isso pode ser particularmente útil em ambientes onde se abre várias janelas iguais, alguns clientes de webmail, por exemplo.

Em alguns casos é útil que você tenha um campo de formulário que seja preenchido baseado em outro, por exemplo no cadastro de uma pessoa física onde o campo contato é baseado no campo nome.

Página anterior 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

Paginação de resultados com a classe ADODB

Uma introdução à classe ADODB

Uma introdução à biblioteca GD

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

Select dinâmico com PHP, Javascript e MySQL

Formulários HTML: Problemas com campos desabilitados?

AJAX - Parte 1

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