Grid layout para formulários

May12007

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

<label class="small">Cidade * <input type="text" class="textfield" /></label>
<label class="x-small">Número * <input type="text" class="textfield" /></label>
<label class="large">Complemento * <input type="text" class="textfield" /></label>
<label class="x-small">Estado *
<select class="select">
<option value="RJ">RJ</option>
<option value="SP">SP</option>
<option value="MG">MG</option>
<option value="ES">ES</option>
</select>
</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

24 respostas para “Grid layout para formulários”

Sylvestre - 16/05/07 às 1:36 pm

Nossa muito legal isso, não vejo a hora de testar pra ver como funciona ao vivo.

To te passando um e-mail, responde o mais rápido que puder, please ;).
Hebert B. Alquimim - 8/06/07 às 10:42 pm

Muito bom, estava procurando algo do gênero para os meus sistemas e também para as minhas aulas.

Se não tiver problema, vou colocar essa matéria no meu site.
RamonPage - 10/06/07 às 12:39 am

Obrigado @Sylvestre e @Hebert.

@Hebert, desde que você cite a fonte, não há problema algum. ;)
Hebertphp - 3/09/07 às 12:59 pm

Olá, como disse coloquei um post sobre o seu gridlayout na minha página com os devidos créditos.

Aproveito para perguntar, têm como iniciar um campo na segunda ou terceira coluna sem colocar nenhum campo antes?
RamonPage - 4/09/07 às 10:51 pm

Olá @Hebertphp.

Sim! Você pode criar campos na coluna que desejar. Basta criar as colunas antecessoras com labels sem conteúdo.

[]‘s
Jader Rubini - 29/09/07 às 12:42 pm

Bacana.
Faço algo bastante parecido com isso, mas só que divido o grid em 5. Veja um exemplo no site da agência onde tabalho: http://interag.net/fal_con_inc.asp

A idéia também veio das tabelas, já que, quando cheguei na agência, eles usavam tabelas pra fazer layouts e eu fui o responsável (e ainda continuo sendo) pela mudança do desenvolvimento para os padrões. Aliás, árdua trajetória essa. :)
Jader Rubini - 29/09/07 às 12:56 pm

Vi que você, como eu, usa largura fixa pra definir o tamanho de seus campos…

Isso não é um problema quando se segue padrões consistentes na criação de layouts, mas quando se trabalha com designer que não têm um padrão definido (nem pra largura de páginas), é muito chato ficar editando linha por linha as larguras.
Vou tentar achar uma solução boa usando larguras relativas em %. Se quiser me acompanhar, o “desafio” está lançado. ;)

Começo o meu na 2ª feira. :)

PS.: desculpe pelo 2º comentário seguido. ;)
Web 2 Ponto 0 » Grid layout para formulÃ¡rios - 29/09/07 às 11:35 pm

[...] AÃ vai uma dica pra quem se mata pra criar bons formulÃ¡rios dentro dos padrÃµes: http://ramonpage.com/2007/05/01/grid-layout-para-formularios/ [...]
Tiago Celestino - 30/09/07 às 10:59 am

Bastante interessante. Vou testar em algum site que estiver formulários enormes. ;P
RamonPage - 30/09/07 às 12:34 pm

@Jader, realmente pode ser um passo interessante de desenvolvimento fazer o layout de forma flexível.

No mais, gostei da sua semântica em utilizar listas para compor os campos do formulário da sua página de contato. :)

@Tiago, obrigado pelo comentário. ;)
links for 2007-10-01 - 1/10/07 às 10:19 am

[...] Grid layout para formulÃ¡rios (tags: tutorial css formulÃ¡rios dicas) [...]
Jorge Luiz - 9/10/07 às 11:32 am

Muito bom, parabéns pelo artigo, realmente é uma ótima forma de organizar um formulário…
Lázaro D. Menezes - 19/11/07 às 8:02 am

Muito bom mesmo. Usei em meu site.

/**
* FORM GRID
*
* DICA DE ramonpage.com
*/
e-okul - 8/01/08 às 11:15 pm

A idéia também veio das tabelas, já que, quando cheguei na agência, eles usavam tabelas pra fazer layouts e eu fui o responsável (e ainda continuo sendo) pela mudança do desenvolvimento para os padrões. Aliás, árdua trajetória essa. thanks jarder buln
e-kitap - 8/01/08 às 11:18 pm

thanks you.
tedavisi - 8/01/08 às 11:19 pm

nice ;)
RamonPage.com . Web na ponta do lápis » Blog Archive » Sem querer blogar, já blogando... - 2/03/08 às 8:48 pm

[...] Para este ano estou preparando primeiramente um novo layot e uma atualização para o layout em grid para formulários. [...]
RamonPage.com . Web na ponta do lápis » Grid layout para formulários com botões arredondados - 4/05/08 às 3:29 pm

[...] Tirando algumas restrições, como o uso de javascript em alguns casos e <span> em outros, fiz uma mistura entre estas soluções e adicionei ao recurso já criado Grid layout para formulários. [...]
Tecnologia, Marketing e Design de Internet - 8/10/08 às 12:58 am

Princípio da Gestalt no alinhamento dos layouts de sites…

Qual a importância do Princípio da Gestalt no alinhamento dos layouts de sites? É estranho, mas é comum layouts de sites/interface web serem concebidos de forma a causar má sensação da percepção dos nossos olhos.
Decidi escrever sobre isso, de……
Nilo - 16/02/09 às 6:40 pm

Muito legal o grid, parabéns.
Estou apanhando somente para colocar um comentário em baixo do campo. Ele fica como uma nova linha, sendo assim quabra o layout.
Christiano Morais - 19/02/09 às 3:17 pm

Essa dica me acendeu um holofote nas idéias.
Timm - 30/03/10 às 8:37 pm

This idea does not belong to you!
What about to put the source?
José Abdala Pereira - 11/03/11 às 6:46 pm

Parabéns pela iniciativa… Encontrei sua idéia pesquisando na WEB. Funciona bem com Firefox e Chrome mas com IE 6,7,8 não… existe alguma forma de evitar uma programação específica para este navegador (IE) utilizando sua idéia?
Obrigado pela atenção
RamonPage - 11/03/11 às 6:54 pm

@José, no arquivo zip existe um CSS exclusivo para o IE, justamente para corrigir esses problemas.