Tableless - Desenvolvimento inteligente com Padrões Web

09/04/2006
Artigos

Subjetividade na Semântica

O Bruno escreveu um artigo sobre estruturação de formulários com listas não ordenadas. Este artigo me lembrou um assunto interessante que podem levar alguns à dúvida. Se você ler o artigo, perceberá que o Bruno sugeri uma solução para a …

Por

O Bruno escreveu um artigo sobre estruturação de formulários com listas não ordenadas.

Este artigo me lembrou um assunto interessante que podem levar alguns à dúvida.

Se você ler o artigo, perceberá que o Bruno sugeri uma solução para a estruturação de formulários manipulando listas não ordenadas (UL). Já o Fábio Caparica, fez um comentário dizendo que prefere usar uma estrutura baseada em DL, DT e DD. Eu, posso seguir a mesma linha de raciocínio, só que eu acho “mais semântico” fazer com listas ordenadas, já que o formulário segue uma linha lógica e dependendo das vezes uma linha de prioridade.

Mas quem está correto? Você que já tem algum tempo no mundo dos Padrões Web deve ter outra solução.
Esse assunto, por exemplo é totalmente subjetivo. Os três modos seguem uma idéia semântica, é difícil apontar qual está errado (ou certo) e dar motivos para tal. É diferente de ver um bloco de texto dentro de um div com classe “paragrafo”. Normalmente, estes erros são grotescos, fáceis de identificar – e mesmo assim muitos o cometem por aí afora.
Nestas situações é melhor usar o bom senso. Uma boa pesquisa na internet é uma boa idéia para saber quais soluções os desenvolvedores estão usando para tais situações. Claro, filtrando ocasiões como a do div “paragrafo” citada acima.

Por Diego Eis

Diego Eis criou o Tableless para disseminar os padrões web no Brasil. Como consultor já treinou equipes de empresas como Nokia, Globo.com, Yahoo! e iG. É palestrante e empreendedor.

http://twitter.com/diegoeis/

Veja os outros posts de

  • http://sinistras.aranha.com.br Fábio Caparica de Luna

    Acabo de responder um mail ao Bruno dando continuidade na conversa…

    dizia mais ou menos assim:

    Eu penso como se fosse uma analogia a um formulário impresso onde precisamos “preencher as lacunas”.

    Nome (dt -> Termo/Definição/Label)
    input (dd -> Lacuna que precisa ser preenchida)

    etc…

    Me parece muuuuito mais “elegante” que um flow puro e simples de campos.
    Quanto ao formulário seguir uma “ordem” hierarquica (Prioridade), o uso de DL não elimina este flow de importância de maneira alguma. Ele apenas introduz uma nova hierarquia mais bem definida entre o que é Label (dt) e o que é input (dd).

  • http://alexandre.gaigalas.net Alexandre

    O Formulário não possui conteúdo, ainda, é um recurso interativo, portanto deve seguir a semântica de um recurso interativo e não de um conteudo textual normal.

    As tags fieldset e legend podem ser encadeadas, é assim que se faz pra estruturar formulários.

    Um campo com três radio buttons, por exemplo, tem que ficar dentro de um fieldset, e a pergunta relacionada ao mesmo dentro de um legend. E cada uma das descrições de cada radio dentro de seus respectivos labels.

    Existem uma porção de tags semânticas pra formulários e vocês insistem em usar listas? Listas parece que estão virando as tabelas da nova geração.

    Completamente desnecessário e enfadonho usar um fieldset ao redor de todos os campos! Qual a semântica disso?

    Enfim, vejam um exemplo do que estou falando. Salvem e tirem o CSS pra ver como fica também:

    http://alexandre.gaigalas.net/forms.html

    OBS: Precisa de uns retoques no CSS, para o Internet Explorer, fiz os estilos rapidamente só pra ilustrar.

  • http://brunotorres.net Bruno Torres

    Alexandre, acho que você não entendeu, ou eu não me expliquei muito bem. Não disse que devemos colocar TODO o formulário dentro de um fieldset e sim, colocar dentro do fieldset cada grupo de campos e, dentro desse fieldset, usar uma lista não ordenada para estruturar os campos.

    De qualquer maneira, a idéia é discutir. Como eu disse, a semantica do HTML é genérica demais e dá margem a interpretações. Talvez nem eu e nem você estejamos errados, só interpretando de maneiras diferentes a mesma coisa.

  • http://f-ranieri.com.br Felipe Ranieri

    Acho que o mesmo comentário que eu fiz para o post do Bruno Torres serve para o seu Eis. Como eu disse naquele post, não sei se o comentário tem total relação com o raciocínio a ser usado na hora de desenvolver um formulário e se não tiver, por favor me digam hehehe.

    Comentário feito por mim em brunotorres.net:

    “Complicado este assunto, mas arrisco dizer que uma sequência lógica, ou semântica, pode ter mais de uma solução dependendo do caso. Creio nisso pelo seguinte motivo: um dia já estudei desenvolvimento de sistemas, e naquela época, quando estudei lógica computacional e tentava aplicar meus estudos em linguagem C, o mesmo problema era resolvido de 2, 3, maneiras. Nenhuma delas estava errada, mesmo seguindo um raciocínio lógico diferente. Não sei se o exemplo tem tanto a ver, nem se ficou tão claro, mas acho que pode se encaixar ao “problema” formulário no sentido de que não há uma solução correta e sim algumas soluções.”

  • Maurus Henriques

    Bem, kd nosso pensamento simples galera? :D
    Pra q serve a semântica? Identificação da função de
    cada elemento do site.(p/ humanos e maquinas).

    Será que a presença das Tags “form, legend, fildset, label..” em um código HTML jah não identifica
    que ali existe um formulário e conseqüentemente uma lista(lista de campos)?

    Será que precisamos “ainda” marca-los com as tags “UL, OL ou DL, DT, DD…”
    Gente, todo formulário eh uma lista com labels e campos.
    A não ser que tenha apenas um campo.
    Mas precisamos usar lista(UL) em nosso formulário apenas pra dizer q ele
    contem mais de um campo?

    Bruno, note oq vc fala aqui:
    “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”

    “Ainda” mais semântica? Basta ser “semântica” apenas, não? :)
    Acredito que esse “ainda” soh deixa nosso código HTML consideravelmente maior e mais confuso. Abraços!

  • http://simonevb.com s1mone

    Alexandre,
    concordo com a sua solução para o mundo ideal. Há casos, por razões de apresentação ou comportamento, que não podemos usar o fielset. Imagine um formulário onde temos um input “CEP”, outro “cidade” e um select “estado”. Eles devem estar todos na mesma linha por causa de uma validação de CEP. Ou então, quando o designer pede para botar o campo “data de nascimento” ao lado do “telefone” para o formulário ficar menor. Semanticamente, todos estes campos não estão ligados entre si. O que fazer?

    Sobre a questão principal, comentei lá no Bruno. 8:)

    []s

  • http://alexandre.gaigalas.net Alexandre

    Simone, cada campo contém seu ID e podemos definir flutuações e o modo (bloco ou inline), tanto para fieldsets quanto para inputs e labels, o que nos permite posicioná-los livremente.

    Bruno, perdão pela má interpretação, é que no exemplo que você dá no seu artigo você usa somente um fieldset.

    Sim, o HTML tem uma estrutura semântica bem genérica, mas ela não é homogenea. Dependendo do caso é preferível utilizar uma tag em favor de outra. Um texto é uma lista de parágrafos, mesmo assim eu não os coloco em uma lista não-ordenada, porque a tag p satisfaz minha condição. É por esse motivo que eu discordo dessa adoção das listas não-ordenadas como “coringas” semânticos.

    Você consegue nomear uma lista, por exemplo “minha lista de compras”, ou “lista de tarefas”. Uma lista de formulário não tem nome específico. Em um formulário o conceito em comum entre os itens de lista é apenas “o formulário”, que é um conceito abstrato. Os inputs só ganham carga semântica para atribuir relações quando o usuário incluir informação lá, até esse ponto eles são meramente recursos interativos sem correlação semântica (para humanos E máquinas).

    O GoogleSets é uma ferramenta para expandir itens de uma lista. Ele, por exemplo, não conseguiria expandir um set de uma lista feita para um formulário, porque ela não tem carga semântica até que o usuário escreva nos campos. http://labs.google.com/sets

    Essa é a minha interpretação ;)

  • http://dudufigueiredo.com Dudu Figueiredo

    Falando sobre formulários, o que vcs acham de alguém do tamanho do Textpattern(CMS) gerar os formulários de comentário, estruturado em uma tabela ?? Particularmente eu acho um absurdo, pode ser perdoado se for um imenso formulário que o usuário tem que praticamente resumir sua vida. Mas um simples formulário de comentários, é sacanagem.

  • Henrique Boaventura

    Acho que do meu ponto de vista… kiss (keep it simple stupid) é a melhor solução… sempre.

  • http://www.numclique.net Joares

    Sinceramente… acho q os formulários são um saco… eu mesmo os faço com tabelas… é muito sacal organizá-los, mas… esse esquema de lista não ordenada é muito massa…

  • http://www.mountainbikebh.com.br Icaro Brito

    Eu ainda tenho minhas duvidas sobre as vantagens de se fazer o formulário em listas.

    No que diz respeito a semântica fica mais “correto”, porem gera praticamente o mesmo numero de tag de uma tabela e não resolve o problema visual de alinhamento dos inputs com os labels.

    Estou muito errado de pensar assim???

  • Cadu

    O Alexandre está correto.

    Há tags que auxiliam na criação de um formulário (FIELDSET, LEGEND, LABEL, ETC) que o deixam semanticamente correto e de fácil formatação por CSS.

    Não concordo com o uso de listas para a criação de formulários. Talvez possamos abrir uma exceção somente para o uso de uma lista de radios, ou de checkboxes (neste caso uma lista real), ainda assim, dependendo do contexto.

    Seguindo esta linha de raciocínio, daqui a pouco temos o “listless”, pois quase todo o site pode ser considerado listas, listas e sublistas.

  • Ricieri Garcez Rosa

    Está totalmente correto, a idéia de usar as listas é somente e exclusivamente para facilitar a vida do desenvolvidor.

    Parabéns Bruno Torres =d>

  • tigo

    tradução da seção sobre formulários das Recomendações do W3C para o HTML 4.01:
    http://www.maujor.com/blog/w3c/rec-forms.html

  • Pingback: Aplicações comem conteúdo. Só os bem tratados. - Tableless

  • http://www.adcortes.com.br Adriana Cortes

    Bom, ninguem comentou mas eu concordo com o Maurus Henriques, nao entendo a discussao e nao vejo razao pra usarmos listas ordenadas ou nao para um form.

    como o Maurus disse:
    ” Será que a presença das Tags “form, legend, fildset, label..” em um código HTML jah não identifica que ali existe um formulário e conseqüentemente uma lista(lista de campos)? ”

    pra que lista, pq nao “estilizar” os campos relativos ao form (descritos acima)? isso sim estaria semanticamente correto!

    ate agora nao entendi o pq da discussao do uso de listas… se nao me parece necessario…

  • Alexandre Henrique

    Maurus Henriques, concordo plenamente.

    É legal ver que é possível solucionar o mesmo problema de várias formas. Mas acho que os padrões definidos na HTML não estão equivocados nem são inúteis, não há porque não utilizar as tags apropriadas da própria linguagem. A solução das tags “UL, OL ou DL, DT, DD…” no formulario, é redundância e mais complicado!!

  • Antonio Augusto André Silveira

    Concordo com o:
    - #04 | Marcus Henriques
    - #06 | Alexandre
    - #11 | Cadu
    - #15 | Adriana Cortes
    - #16 | Alexandre Henrique

    Abomino:
    - #9 | Joares

    Quanto a divisões, para tornar o layout mais agradável visualmente, aplicamos classes a tags divs semânticas apenas para dividir o espaço, nada de usar listas em um lugar que não é pra listar nada padrozinado. Não vejo input’s como uma coisa que segue naturalmente como ABCDE[...], que nós sabemos o que segue e como segue.

    Ano passado desenvolvi algum form de cadastro para um site.
    http://www.laroya.com.br/cadastro.asp
    Se você apenas olhar o código do form, irá gostar. O resto tá +/- em vários sentidos. Mas, em breve eles vão fazer update e já tenho a versão do site nova com tudo certinho, hehe.