Bem vindo ao SOS Designers

Faça o seu cadastro gratuito no Portal SOS Designers e tenha um acesso personalizado.

Empresas

Cadastre gratuitamente suas vagas, crie sua propria Lista de Curriculos Favoritos, e tenha um acesso personalizado.

Usuarios

Cadastre gratuitamente seu curriculo, crie sua propria Lista de Noticias Favoritas e tenha um acesso personalizado.

Área de Empresas | Vagas

Área de acesso a empresas cadastradas que desejam postar vagas de empregos no Portal e pesquisar curriculos.

Cadastre-se gratuitamente
Esqueceu a sua senha?

Área de Usuarios | Curriculos

Área do Usuario que deseja cadastrar seu curriculo e pesquisar vagas.



Cadastre-se gratuitamente
Esqueceu a sua senha?


Redes Sociais
Siga o Portal SOS Designers no Twitter Siga o Portal SOS Designers no Facebook

CSS


Você está aqui: Home » CSS » Formulários semânticos

Formulários semânticos


Pesquisar no Portal SOS Designers





Tempo Real



Siga o SOS Designers








pub_flash( 'http://www.sosdesigners.com/banners/web_flash_300x250.swf', 300, 250 ); " alt="Tecnoponta - 300 x 250 - webdesign" />

Como alinhar os elementos de um formulário sem usar tabelas?
Como fazer um formulário semanticamente correto?
Como fazer um formulário acessível?


Estas são algumas dúvidas que permeiam a mente de alguns desenvolvedores ao construir uma aplicação online qualquer. Pode ser uma página de contato de um site, de cadastro de currículo, um sistema de intranet para cadastro de clientes, enfim, os formulários têm inúmeras finalidades. Mas para que um formulário seja “o” formulário, ele deve ter as seguintes características:

  • Ser legível a qualquer dispositivo, incluindo leitores de tela;
  • Ser acessível mesmo para um usuário que não utilize mouse;
  • Solicitar ao usuário, corretamente, as informações necessárias;
  • Coletar e enviar, corretamente, as informações desejadas;
  • Não ser cansativo, para não desestimular o usuário a preenchê-lo. Se for o caso de um cadastro de currículos, por exemplo, é interessante dividir o formulário em etapas (não muitas), para que o usuário possa preencher um bloco de informações por vez;
  • Apontar, corretamente, os erros – se houver – no preenchimento e as informações faltantes.


Para construir um formulário com estas características, lançamos mão do xhtml, do css e do javascript. O XHTML nos fornece as tags necessárias para construir os campos, os botões e quaisquer outros elementos do formulário. Com o CSS, posicionamos os elementos e definimos sua aparência. E, finalmente, com o Javascript, validamos o formulário de modo que ele envie as informações ao servidor apenas quando todos os campos obrigatórios estiverem preenchidos corretamente. Há quem utilize, ainda, PHP (linguagem de programação server-side) para construir o action e determinar o modo como as informações preenchidas no formulário serão exibidas no e-mail do receptor. Neste post, entretanto, vamos nos ater apenas à construção do formulário com a programação client-side e, num post futuro, estudamos seu envio. Sendo assim, nosso formulário obedecerá aos princípios da acessibilidade, da usabilidade e dos webstandards.


Jakob Nielsen
, em seu artigo Forms vs. Applications, fala sobre as propriedades dos formulários para coletar informações sobre usuários. Ele usa o termo formulário para um conjunto pequeno de elementos a serem preenchidos, como no caso de páginas de contato de um website ou de cadastro de e-commerce, e o termo aplicação é designado a grandes blocos de elementos de formulários, como os utilizados em intranets de empresas, em que precisamos rolar a página verticalmente várias vezes para chegar a seu final. Tudo preenchido com elementos de formulários. Baseando-se neste texto de Jakob Nielsen, temos outras práticas que podem ser aplicadas tanto a formulários mais complexos quanto a formulários simplificados. Algumas delas:

  • Utilizar Foco. O foco indica o caminho do formulário ao usuário. Ao terminar de preencher o primeiro campo e pressionar a tecla TAB, por exemplo, o próximo recebe o foco com o ponteiro do cursor ativo e até mesmo com sua aparência modificada para indicar mais claramente ao usuário qual o campo a ser preenchido a seguir. Este recurso é feito com Javascript;
  • Oferecer ajuda de contexto. Se você dispõe de campos um tanto quanto subjetivos em seu formulário ou que possam gerar dúvidas aos usuários, ofereça pequenas informações de ajuda próximas a estes campos. Por exemplo, próximo ao campo CPF, informe “digite apenas números”, ou ainda, um exemplo de como o campo deve ser preenchido;
  • Evitar elementos “amontoados” na tela. Não diminua o tamanho de campos para que caibam vários em uma mesma linha ou para parecer que o formulário não é extenso. A poluição visual desestimula o usuário a concluir o preenchimento e o uso do foco, em alguns destes casos, pode ficar prejudicado e não seguir uma seqüência visual lógica;
  • Eliminar passos irrelevantes. Através de Javascript, pode-se evitar procedimentos utilizados em formulários de papel, por exemplo: “Se você respondeu ‘não’ na questão 24, pule para a questão 28″. Os campos disponíveis para o usuário devem ser aqueles que ele efetivamente vai preencher. Se você tem um campo que pede para o usuário assinalar seu estado civil, um campo que solicita o nome do cônjuge pode ser exibido apenas se a opção “casado” for assinalada. Se ele responde “solteiro”, não há necessidade de o campo “nome do cônjuge” ser visível, já que não será preenchido. Um “formulário dinâmico” demonstra cuidado com o usuário e personalização;
  • Oferecer flexibilidade no preenchimento. Podemos usar o exemplo de aplicações bancárias que adotam esta prática. Ao efetuar uma transferência, por exemplo, somos solicitados a informar o número do banco de destino. Ora, quem saber de cor o código do Banco Suriname? É de bom tom oferecer uma ajuda de contexto ao lado deste campo do tipo “consulte o código do banco”, em que o usuário pode, facilmente, clicar no banco desejado e ter o campo do código preenchido automaticamente. O mesmo conceito pode ser utilizado para o preenchimento de CEP, já que nem todos sabem seu CEP de cor;
  • Oferecer feedback. Para evitar erros de preenchimento, você pode oferecer uma confirmação de dados ao usuário. Utilizando o mesmo exemplo do código bancário, ao lado deste campo pode existir outro que exibe o nome do banco assim que o código for fornecido, apenas para que o usuário se certifique de que é este mesmo que deseja.


Este foi um apanhado geral sobre formulários. No próximo post, vamos iniciar a construção passo-a-passo de nosso formulário semanticamente correto, adotando algumas práticas de usabilidade e acessibilidade.

Sobre o Colunista:

Juliana Padron


Descrição: Juliana Padron é designer e sócia-diretora da W3P Projetos Web. Especialista em email marketing, é uma das responsáveis pela criação do projeto Templateria, um e-commerce dedicado a templates de email marketing.

Site: http://www.w3p.com.br

Deixe seu comentário:





© Copyright 2002-2018
Portal SOS Designers
Webmaster: Luiz Antonio Bovi