←
→

May12007

Grid layout para formulários

Durante alguns dias e alguns projetos, estive pensando numa melhor forma de criar meus formulários. Como de costume, fiz alguns estudos e os coloquei em prática. No final das contas, acabei chegando numa solução que me satisfez e que devo manter como RC para meus formulários por algum tempo, até que novos estudos surjam para o aperfeiçoamento deste.

A solução se trata de formulários baseados em grid layout. Usa solução simples, que usa um punhado de CSS e alguns conceitos de acessibilidade para formulários.

Princípios básicos de acessibilidade em formulários

  • Utilizar <label> para o texto descritivo (título) de cada campo;
  • Associar este <label> ao campo à que o título se refere (ex. <label for="txtnome"> Nome </label> ou <label> Nome <input type="text" name="txtnome" id="txtnome" /></label>);
  • Colocar todo título acima do campo à que ele se destina;
  • Ordenar campos por tabindex;
  • Usar accesskeys; E por aí vai.

A idéia veio das tabelas!

A solução mais prática para criar formulários acessíveis, seria, então, colocar cada controle um abaixo do outro, formando, assim, um extenso formulário a ser navegado. A partir daí, nasceram os questionamentos: e para os campos pequenos, como UF e datas? Ficariam um abaixo do outro também? Não seria uma idéia legal ter um formulário não muito grande, com uma rolagem desnecessária.

Num tempo não muito distante (aliás, hoje ainda se faz isso), muitos web designers usavam/ usam tabelas para separar os campos de seus formulários. Visualmente ficam trabalhos realmente muito bem feitos, mas quando nos deparamos com a marcação, nascem os problemas.
O Web Standards Project, num artigo sobre acessiblidade em formulários, arremata:

Another accessibility gotcha with forms is that they are invariably set out using tables to achieve a nice grid-like effect. This is not always an automatic accessibility problem, but it can be – a table layout is irrelevent to a screen reader which effectively reads the content in the order it appears in the source code. [...]

Pois é, tabelas podem complicar a vida misturando a ordem dos controles na marcação. Então, por que não criar uma solução tableless?

Criando o grid

Para explicar os grids para formulários, criei um grid de aproximadamente 81px para cada coluna. Assim sendo, num formulário de 750px de largura é possível usar até 9 campos por linha.

Grid Form

¹ – O uso do <BR /> é importante para o caso de linhas que precisam ser quebradas antes do seu fim. Por exemplo, ter de quebrar a linha imediatamente depois de usar um label x-mall

A grande sacada do alinhamento é deixar os labels “soltos” na marcação e separar, apenas, as quebras de linha com <BR />¹. O CSS tratará do resto, usando classes específicas para cada tamanho de label. As possibilidades são²:

  • X-small label (81px);
  • Small label (2 * x-mall + margens);
  • Large label (4 * x-mall + margens);
  • X-large label (6 * x-mall + margens);
  • Full label (Aproximandamente x-mall * 9 colunas).

² – Não foram levados em conta na contagem os ajustes de tamanho que foram necessários para o IE 6 (argh).

Como criar uma linha

  1. <label class="small">Cidade * <input type="text" class="textfield" /></label>
  2.    <label class="x-small">Número * <input type="text" class="textfield" /></label>
  3.    <label class="large">Complemento * <input type="text" class="textfield" /></label>
  4.    <label class="x-small">Estado *
  5. <select class="select">
  6.   <option value="RJ">RJ</option>
  7.   <option value="SP">SP</option>
  8.   <option value="MG">MG</option>
  9.   <option value="ES">ES</option>   
  10. </select>
  11. </label><br />

Isso resulta em

Linha Grid Form

Agora, o resultado final

Resultado Grid Form

Crie seu próprio formulário

Fique livre para usar a minha solução. Baixe os arquivos que resultaram nas imagens de exemplo.

Criação: 1/05/07 às 10:54 pm
Categoria(s): Acessibilidade, Layout, webdesign

22 respostas para “Grid layout para formulários”

Poste um comentário




Você pode utilizar as seguintes tags para formatação: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Oscomentários

Comentários diversos dos visitantes

Rosana Perez Pousa disse:

Olá Ramon, achei GENIAL a ferramenta para corrigir textos de acordo com a reforma ortográfica. Mas, fui testá-la, agorinha, e NÃO CONSEGUI ESCREVER...

Felipe disse:

Gostei do post, foram claros os seus argumentos. Estou fazendo um blog também extremamente clean, somente com recursos necessários. Acho que a grande ...

Annelise disse:

Ramon, Por favor, verifique as palavras compostas. Por exemplo: guarda-chuva, a aplicação está considerando como certa "guardachuva" também... :(...

Gustavo Henrique disse:

Bom dia Ramon, Alguma novidade sobre o widget? ;-) Abraço...