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

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


Validação



Validação do lado do cliente é uma das mais populares utilidades do Javascript. Eu não gosto do fato de construir uma aplicação que roda do lado do servidor e ter que validar todas as minhas entradas do lado do servidor, principalmente se posso validar do lado do cliente. Sei que isso pode causar problemas desagradáveis a nível de segurança - é muito fácil uma pessoa mal intencionada desabilitar o javascript em seu browser.

Validação é um tópico de grande importância, deveria ser extensivamente coberto por todos os tutoriais na Web. De preferência remodelando antigas idéias, como por exemplo o evento foco. Podemos por exemplo mostrar um ícone cada vez que o usuário sair de um campo, indicando se ele preencheu o campo corretamente ou não, ou ainda se ele deixou em branco um campo de preenchimento obrigatório. Podemos colocar ícones na TAG Label, assim que abrir o formulário e alterando esses ícones à medida que passamos pelos campos e os preenchemos. Os ícones darão o status dos campos.

Um exemplo para um campo de formulário requerido, verificado via CSS, Javascript e HTML.

<label for="subject" class="required">Subject:</label>
<input type="text" id="subject" name="subject" size="40"
      onblur="checkRequired('subject');">

Isso é muito simples. O elemento Label inicia com uma classe "required" para mostrar um ícone indicando que ele é de preenchimento obrigatório. A função Javascript checkRequired('subject') é chamada no evento OnBlur (ao perder o foco), e verifica sempre o campo de onde o foco acabou de sair.

<style type="text/css">
label {
  padding-left: 22px; /* To leave room for the icon */
}

label.required {
  background-image: url(required.gif);
  background-repeat: no-repeat;
  background-position: 3px 0px;
}

label.problem {
  background-image: url(caution.gif);
  background-repeat: no-repeat;
  background-position: 3px 0px;
}

label.completed {
  background-image: url(complete.gif);
  background-repeat: no-repeat;
  background-position: 3px 0px;
}
</style>

O CSS concede a cada label um espaço extra de 22 pixels, os ícones ocupam cerca de 15 pixels.

<script type="text/javascript">
function getLabelForId(id) {
   var label, labels = document.getElementsByTagName('label');
   for (var i = 0; (label = labels[i]); i++) {
     if (label.htmlFor == id) {
       return label;
     }
   }
   return false;
}

function checkRequired(id) {
   var formfield = document.getElementById(id);
   var label = getLabelForId(id);
   if (formfield.value.length == 0) {
     label.className = 'problem';
   } else {
     label.className = 'completed';
   }
}
</script>

Aqui nós definimos duas funções javascript: uma para encontrar a label associada a um ID específica, e outra para checar se o campo foi realmente preenchido. E conseqüentemente associando uma nova classe a label o que fará aparecer o ícone de status. Isso é uma maneira simples de fazer esse tipo de validação. Outras funções podem ser criadas para ser acopladas a essa função, como por exemplo funções para analisar se um endereço de e-mail foi preenchido em seu formato correto. Esta técnica pode ser implementada por exemplo para desabilitar o botão submit ate que o formulário tenha sido preenchido corretamente.

No último truque vamos contemplar os dados que somente devem permitir um formato específico. De preferência aqueles que rejeitam a entrada de dados que não estejam no formato certo. Um exemplo clássico disso é um número de telefone incluindo o código de área (82)555-5555. Com o javascript podemos receber a digitação do usuário ignorando tudo o que não for números e providenciando para que os números sejam exibidos como no exemplo acima.

<script type="text/javascript">
function checkPhone() {
   var phone = document.getElementById('phone');
   var label = getLabelForId('phone');
   var digits = phone.value.replace(/[^0-9]/ig, '');
   if (!digits) {
     return;
   }
   if (digits.length == 10) {
     phone.value = '(' + digits.substring(0, 3) + ') ' +  
       digits.substring(3, 6) + '-' +  
       digits.substring(6, 10);
   } else {
     phone.value = digits;
   }
}
</script>

<label for="phone">Phone Number:</label>
<input type="text" id="phone" name="phone" size="20"
      onblur="handlePhone();">

Essa técnica pode ser adaptada e tornar-se muito mais abrangente, sendo usada como por exemplo para formatar data, hora ou qualquer formato de campo que você queira padronizar. Veja esse exemplo para entrar datas, é recomendável que você cheque o código para saber como se faz.

Para ilustrar melhor as idéias desse artigo foi criado um formulário que faz uso de todas as técnicas comentadas aqui. Espero ter lhe inspirado a descobrir novos caminhos de prover usabilidade usando CSS e javascript.

Esse artigo foi traduzido e o original encontra-se em:
Desejo esclarecer que não gosto de fazer traduções "ao pé da letra", portanto em alguns pontos uso palavras e expressões diferentes das usadas pelo autor, mas que não alteram em nada a semântica do texto.

Obrigado

Página anterior    

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 à biblioteca GD

Utilizando PEAR

Uma introdução à classe ADODB

Leitura recomendada

Formulários HTML: Problemas com campos desabilitados?

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

Listar dados em MySQL utilizando PHP e 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

[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