Tableless - Desenvolvimento inteligente com Padrões Web

27/10/2006
Geral

Cuidado onde você enfia essa tag aí!

Tenho respondido muito essa dúvida ultimamente. É o seguinte, se você tiver que usar formulários e tabelas, isso aqui: 123<table>     <form>         <tr> … É código inválido, errado, e não funciona no Firefox. Quando ele encontra a tag tr, ele fecha …

Por

Tenho respondido muito essa dúvida ultimamente. É o seguinte, se você tiver que usar formulários e tabelas, isso aqui:

1
2
3
<table>
    <form>
        <tr> ...

É código inválido, errado, e não funciona no Firefox. Quando ele encontra a tag tr, ele fecha automaticamente o form para você. É como se você estivesse criando um formulário vazio e colocando uma série de campos na tabela fora do formulário. Se você tem um submit comum, não via conseguir nem submeter o formulário. Se submete via javascript, por exemplo, ao final da função de validação, vai dar submit num formulário vazio. Não chega nada no server-side. O certo é fazer:

1
2
3
<form>
    <table>
        <tr> ...

A gente usava do jeito anterior na era pré-Tableless, porque sem CSS era impossível remover aquele espaço antes e depois do formulário. Vício do século passado, do qual você precisa se livrar. Hoje, basta:

1
2
3
form {
    margin: 0;
}

Ah, sim, se você validar seu código, vai detectar esse problema. Mais uma razão para validar.

Por Elcio Ferreira

http://elcio.com.br/

Veja os outros posts de

  • http://www.mercwars.net/handbook Douglas d’Aquino

    graças a deus nunca tive o azar de aprender da forma errada… hehe

    por extinto parece até lógico que a tag form tem que vir antes do table, mas infelizmente muita gente ainda se confunde…. acho que tem a ver com o hábito de utilizar tabelas no layout e estar acostumado com o fato de que “tudo vai dentro da tabela”. Logo o formulário deve ir dentro da tabela também.

    Bastante útil a dica para quem ainda se engana

  • http://www.mercwars.net/handbook Douglas d’Aquino

    aliás, só uma sugestão mais relativa ao layout do blog (que eu gostei bem mais desse jeito), não seria interessante colocar um estilo nos “inputs” do formulário de comentários? pra ficar mais parecido com o textarea pelo menos.

    abraço!

  • Manoel Netto

    Nada como recorrer a quem sabe.

    Eu tenho esse vício podre e tenho feito coisas funcionarem nessa base, mas a exeplo do problema de hoje, campos criados dinamicamente simplesmente não são “enxergados” e não são enviados para o outro lado.

    Mas concordo, funcionando ou não, o código está errado e basta um css pra resolver o espaçamento tosco do form. Preguiça mata :P

  • http://www.eugeniogrigolon.com/ Eugenio Grigolon

    Ótima dica.

    Estruturação de hierarquia é o mais importante.

  • http://thiagomachado.com thiago machado

    acabando com velhos vicios isso ai

    apoiado, companheiro cruj (rs)

  • http://project47.viscountbox.com Carlos Eduardo

    Além de tudo, fazer form com tabelas não é lá muito recomendável… o_O

  • http://www.promissao.net/festadopeao/ Tiago

    Legal o artigo , eu não saberia como fazer um form bem apresentável sem tabela , podia fazer um artigo sobre isso, inclusive com uma opinião sobre formularios com muitos campos , o melhor é usar tudo em uma coluna ? ou colocar varios campos por linha

  • http://www.ciin.com.br Daniel Accorsi

    Muito boa a dica!! Parabéns! Eu também praticava isso.

    Abraços!

  • http://www.jaderubini.wordpress.com Jader Rubini

    Não vejo porque usar

    1
    table

    , e não

    1
    ul

    , ou

    1
    ol

    …

    Sinceramente, acho que ficou faltando uma parte do post. A parte em que você explica a maneira (ou uma das) mais sensata de se construir formulários.

  • http://aquecimentoglobal.atspace.com Tiago

    Eu não acredito que estou lendo isto! E bem AQUI. Onde eu aprendi muita coisa sobre Tableless Web Standard, agora eu li que o camarada faz seus formulários com tabelas, e outros ainda que fazem com listas!!! Gente, vocês não estão se esquecendo da Sra. Semântica não?
    – para dados tabulares;
    – para listas(em texto).
    Deixa só o Henrique P. ver este texto.
    Concordo com o Rubini, falta a parte em que você explica como faz o formulário corretamente.

  • Janailson

    muita gente hj em dia, ainda não se preocupa com padrões como esse… só quero ver qdo lançarem o IE7, e o pessoal começar a usar bastante… a quantidade de erros q vai ter será impressionante…

  • Ronaldo Klais

    Engreçado, falam tanto de padrões, css válidos, e quando ví o resultado da validação do site a primeira coisa que me veio a cabeça foi: faça oque eu digo, não faça oque eu faço.

  • http://www.conexaomx.com.br Thiago

    com certeza web standards é algo muito bom.
    mais e os conceitos de IHC onde ficam, existem vários conceitos que mandam muita coisa aplicada em tableless por espaço… como esse botão “Fala!”… totalmente errado… se for feita uma avaliação de interface, meus pesames meus amigos… web standards não é tudo

  • Arthur Corenzan

    acho que o exemplo do post não se refere exatamente a construção de formulários, eu cai numa situação dessa mas não pra construir o formulario, por que havia uma tabulação de dados na qual eu precisava de alguns campos dentro da tabela…

    mas ainda tenho uma duvida, minha pegunta é, e se eu precisar de mais de 1 formulario na mesma tabela…

    e só achei um pouco estranho pq eu só precisava das primeiras linhas com formulario e para isso teria que colocar a tabela inteira dentro do form =/

    orbrigado, [][]‘s

  • http://ceticismo.wordpress.com Lealcy B. Junior

    Eu já tive problemas com as tags de comentário e xhtml-strict. Não é possível colocar tags de comentário — por algum motivo obscuro pelo visto, já que estas tags não participam da renderização da página — fora da tag body.

    Experimentem, o browser acusa um erro na folha de estilos XML.

  • http://www.andersonsa.com Anderson Sá

    Nossa! Realmente era horrível ter que colocar a tag entre a TR, mas era o único jeito. Tempos “modernos”…

  • http://www.igor.ferreira.nom.br/ Igor Oliveira Ferreira

    Essa dica me salvou! Muito obrigado! Agora o form fica idêndico no IE e no Firefox.

  • http://www.nyah.com.br Michael

    Nossa cara! Eu havia colocado o dentro de um table e quando enviava no FF ele não pegava o valor dos inputs criados dinâmicamente, enquanto que no IE ia normal.

    Coloquei o ANTES da table e agora funciona normalmente! E eu tava quebrando a cabeça tentando entender porque funcionava em localhost mas no servidor não.

    Valeu mesmo!
    Um abraço!

  • Tiago

    Qual a solução para colocar vários formulários dentro de uma mesma tabela?

  • Tiago

    …Complementando… Não se pode colocar um form como um filho de uma table, mas como então colocar em cada linha da tabela uma coluna em que se pode editar o conteúdo? Cada linha tem que ter um submit, como fazer isso?