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.
¹ - 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
Agora, o resultado final
Crie seu próprio formulário
Fique livre para usar a minha solução. Baixe os arquivos que resultaram nas imagens de exemplo.
Meu nome é Ramon Bispo. Sou web developer/ designer e natural do Rio de Janeiro, Brasil.
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……