Dicas simples para dar mais usabilidades aos formulários

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.279 ]

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


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:

<input type="text" name="myfield" id="myfield" size="30"
      value="This should be changed"
      onfocus="this.select()">

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.

<input type="text" name="title" id="title" size="30"
      onkeyup="document.title = 'New item: ' + this.value">

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.

<input type="text" name="title" id="title" size="30"
      onkeydown="document.getElementById('url').value =  
               this.value.replace(/[^a-z0-9 ]/ig,
               '').replace(/ /g, '_')">
<input type="text" name="url" id="url" size="30">
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

Uma introdução à biblioteca GD

Paginação de resultados com a classe ADODB

Uma introdução à classe ADODB

Utilizando PEAR

Leitura recomendada

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

Formulários HTML: Problemas com campos desabilitados?

Select dinâmico com PHP, Javascript e MySQL

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

Máquina Enigma e encriptação em XOR

  
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

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

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

[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.

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

Muito bom !!!

[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 - [email protected]

[6] Comentário enviado por fonoavancada em 17/05/2007 - 18:30h

ótimos truques!!

[7] Comentário enviado por caiquemd em 13/07/2007 - 20:00h

bom muito bom

[8] Comentário enviado por neon_ em 22/05/2008 - 22:22h

Realmente muito bom. Serão de grande valia as dicas. Parabéns.

[9] Comentário enviado por comfaa em 28/10/2008 - 11:56h

muito bom !!


[10] Comentário enviado por removido em 02/07/2011 - 11:26h

Valeu ai tava precisando
dessas dicas sei pouco de java script


Contribuir com comentário




Patrocínio

Site hospedado pelo provedor RedeHost.
Linux banner
Linux banner

Destaques

Artigos

Dicas

Tópicos

Top 10 do mês

Scripts