Estruturando formulários com listas não ordenadas
[update] É bom saber que eu não estou sozinho. Tudo bem que ele usa listas ordenadas, mas não é isso que realmente faz a diferença. 
[/update]
Formulários são sempre uma grande dor de cabeça na hora de desenvolver páginas web. Principalmente quando são complexos, com muitos campos, e mais ainda quando é necessário aplicar um layout mais complexo, o que, apesar das muitas implicações negativas quanto à usabilidade, acontece muito freqüentemente.
Eu tenho tido bastante sucesso usando listas não ordenadas (UL) para estruturar formulários e quero apresentar esta solução para vocês.
Algumas das vantagens de se usar listas para estruturar formulários são:
- O formulário fica visualmente bem organizado quando não há suporte a CSS
- Você ganha uma quantidade considerável de elementos para estilizar via CSS
- O código fica limpo e bem organizado, sem um monte de DIVs sem sentido ou, pior, tabelas
A argumentação mais provável que pode haver contra essa solução é quanto à semântica. Alguns podem argumentar que, usando listas, a estrutura deixa de seguir a semântica correta e, por isso, pode ser uma solução não apropriada.
Eu não penso dessa forma. A semântica do HTML é bastante genérica e dá margem a interpretações diferentes para o mesmo caso. Não acho que seja incorreto usar listas, já que um formulário é, basicamente, uma _lista_ de campos a ser preenchidos.
Existe um elemento em (X)HTML próprio para agrupar campos de formulários, o elemento FIELDSET. Dando uma olhada na definição do elemento FIELDSET no doctype do HTML 4.01 Strict, vemos que ele pode conter tanto elementos inline quanto elementos de bloco. Ou seja, podemos muito bem colocar uma lista não ordenada (ou ordenada, ou de definição) dentro de um FIELDSET, deixando assim a estrutura ainda mais semântica.
A marcação HTML ficaria mais ou menos assim:
<form action="" method="post"> <fieldset> <legend>Dados Pessoais</legend> <ul> <li> <label for="nome">Nome:</label> <input type="text" name="nome" id="nome" size="30"> </li> <li> <label for="email">Email:</label> <input type="text" name="email" id="email" size="30"> </li> [...] </ul> </fieldset> </form>
Cada campo do formulário fica encapsulado em um item de lista (LI) junto com seu respectivo rótulo (LABEL), o que é muito útil na hora de aplicar seu estilo CSS.
Claro que, para formulários muito simples, com poucos campos, isso é, na maioria das vezes, desnecessário. Mas quem já teve que lidar com formulários mais ou menos grandes e é safo o suficiente com CSS para estilizar listas de maneira indolor (o que não é lá muito difícil), vai perceber que dessa forma as coisas se tornam _muito_ mais simples.
Se for preciso exemplificar melhor, por favor, me digam.
E vocês, como resolvem o caso de formulários complexos, principalmente quando precisam seguir um layout altamente rebuscado que já foi aprovado pelo cliente e tem que ser seguido à risca? Algum de vocês usa listas como eu? Alguém tem um bom argumento contra essa abordagem? Vamos discutir.
[update]
Talvez eu não tenha me expressado muito bem, mas eu não quis dizer que se deve encapsular _todos_ os campos do formulário dentro de um mesmo FIELDSET.
No caso do código de exemplo acima, ele mostra um grupo de campos, intitulado “Dados Pessoais”. Se houver outros agrupamentos, a idéia é encapsular em outro FIELDSET e, se necessário, com outra lista. Ítens de lista (LI) podem conter FIELDSETs e FIELDSETs podem conter listas não ordenadas (UL).
Além disso, não estou querendo pregar que as listas são a grande panacéia do desenvolvimento web moderno. Simplesmente acho que, no caso de formulários elas carregam uma semântica que, na minha opinião (preciso mesmo dizer que é minha?) é correta, e não que devem ser usados como as tabelas de outrora, ou os DIVs de hoje, para alguns.
[/update]
9 Abr 2006 |
59 comentários... |
Comentar |
|
Oi Bruno…
Tenho seguido esta mesma linha de raciocínio, mas me pareceu mais lógico usar DL, DT e DD pra estruturar semânticamente os formulários.
O que vc pensa neste sentido?