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

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


Dicas visuais



Em um formulário longo onde não se preenche todos os campos é muito fácil você perder o ponto exato onde estava antes de ser interrompido. Um truque para resolver esse problema é o seguinte:

<style type="text/css">
input {
   border: 2px solid #ccc;
}

input:focus {
   border: 2px solid #000;
}
</style>

Isto faz com que todos os inputs tenham a borda com 2 pixels e fiquem cinza, mas quando receber o foco ficará com a borda preta diferenciando dos outros. Porém, há um problema: o IE não suporta a pseudo-classe :focus. Mas, há como replicar esse efeito usando o Javascript:

<input type="text" name="myfield" id="myfield"
      onfocus="this.style.border='2px solid #000'"
      onblur="this.style.border='2px solid #ccc'">

Isso vai trazer o efeito para o IE, com o custo de uma digitação extra. Se você tiver muitos campos em seu formulário, você pode optar por esse outro método, novamente fazendo uso do addEvent comentado no inicio do artigo.

<script type="text/javascript">
addEvent(window, 'load', function() {
  var input, textarea;
  var inputs = document.getElementsByTagName('input');
  for (var i = 0; (input = inputs[i]); i++) {
     addEvent(input, 'focus', oninputfocus);
     addEvent(input, 'blur', oninputblur);
  }
  var textareas = document.getElementsByTagName('textarea');
  for (var i = 0; (textarea = textareas[i]); i++) {
     addEvent(textarea, 'focus', oninputfocus);
     addEvent(textarea, 'blur', oninputblur);
  }
});

function oninputfocus(e) {
   /* Cookie-cutter code to find the source of the event */
   if (typeof e == 'undefined') {
      var e = window.event;
   }
   var source;
   if (typeof e.target != 'undefined') {
      source = e.target;
   } else if (typeof e.srcElement != 'undefined') {
      source = e.srcElement;
   } else {
     return;
   }
   /* End cookie-cutter code */
   source.style.border='2px solid #000';
}

function oninputblur(e) {
   /* Cookie-cutter code to find the source of the event */
   if (typeof e == 'undefined') {
     var e = window.event;
   }
   var source;
   if (typeof e.target != 'undefined') {
      source = e.target;
   } else if (typeof e.srcElement != 'undefined') {
      source = e.srcElement;
   } else {
     return;
   }
   /* End cookie-cutter code */
   source.style.border='2px solid #ccc';
}
</script>
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 à biblioteca GD

Utilizando PEAR

Uma introdução à classe ADODB

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?

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