8

Tenho um formulário para desenvolver, serão 100 perguntas divididas em blocos (terão que ficar invisíveis, terá botão de avançar e voltar, validação do bloco etc), provavelmente a página do formulário ficará bem grande.

<table cellpadding="0" cellspacing="5" class="model1">
<tr>
    <td>1</td>
    <td>2</td>
</tr>
<tr>
    <td>1 <input type="radio" name="name1" value="1" /></td>
    <td>2 <input type="radio" name="name2" value="2" /></td>
</tr>
</table>

Devo usar vários div ou uma table para construir o formulário?

5
  • Depende muito de como você irá arquitetar seu código, em grande parte dos sites e sistemas que me deparo hoje utilizam div, eu usaria divs por deixar o código mais enxuto e mais fácil de dar manutenção. Espero ter ajudado. Abraços. 2/09/2015 às 12:53
  • 2
    Tabelas são para exibir dados apenas, alguns usam para alinhar campos ...
    – rray
    2/09/2015 às 12:56
  • 2
    O recomendado é sempre utilizar divs. Tabelas são para exibir dados. Você pode utilizar um framework front-end para agilizar a criação do seu formulário, como o bootstrap, por exemplo: getbootstrap.com
    – Joao Paulo
    2/09/2015 às 13:07
  • Baseado em opiniões porquê?
    – Jorge B.
    2/09/2015 às 13:28
  • Quem diz que é baseado em opiniões está equivocado. A recomendação do W3C é não utilizar tables como auxiliar para layouts, somente para dados.
    – Joao Paulo
    2/09/2015 às 13:59

3 Respostas 3

9

O ideal é não utilizar tabelas, já que a proposta para o elemento table é para tabulação de dados, como se fosse a forma visível de uma tabela do banco de dados por exemplo.

Na documentação das normas do W3C sobre a table diz o seguinte:

Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media.

Tradução Livre:

Tabelas não devem ser usadas puramente para estruturar o conteúdo no layout de um documento, pois isso apresenta problemas quando renderizados por mídia não visual.

Resumindo, tabelas podem parecer o caminho mais fácil para resolver essas questões, mas a um médio prazo, especificamente quando você precisar mudar algo é quando virá a dor de cabeça e você se arrependerá amargamente por não ter escolhido o caminho certo. Acredite eu já passei por isso.

Então a forma ideal é utilizar div's, melhor ainda, a forma ideal é utilizar um grid system como o do Bootstrap por exemplo. Outra grande vantagem de se utilizar frameworks como o Bootstrap é que eles são projetados para ser responsivo e você pode construir seu formulário (e o site no geral) para ser amigável tanto em dispositivos com telas maiores, como desktop's, quanto com telas menores, como tablet's e celulares.

Um exemplo funcional responsivo de um formulário (execute, clique em tela cheia e redimensione a janela do browser para ver a responsividade em ação):

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<form action="cadastro" method="POST">
   <div class="container">
      <div class="row">
         <div class="col-sm-4 col-xs-12">
            <div class="form-group">
               <label>Primeiro Nome</label>
               <input type="text" name="pnome" class="form-control" placeholder="Primeiro Nome">
            </div>
         </div>

         <div class="col-sm-4 col-xs-12">
            <div class="form-group">
               <label>Último Nome</label>
               <input type="text" name="unome" class="form-control" placeholder="Último Nome">
            </div>
         </div>

         <div class="col-sm-4 col-xs-12">
            <div class="form-group">
               <label>E-mail</label>
               <input type="email" name="email" class="form-control" placeholder="E-mail">
            </div>
         </div>
      </div>

      <div class="row">
         <div class="col-md-4 col-sm-12 col-xs-12">
            <div class="form-group">
               <label>Endereço</label>
               <input type="text" name="endereco" class="form-control" placeholder="Endereço">
            </div>
         </div>

         <div class="col-sm-4 col-xs-12">
            <div class="form-group">
               <label>Bairro</label>
               <input type="text" name="bairro" class="form-control" placeholder="Bairro">
            </div>
         </div>

         <div class="col-md-1 col-sm-4 col-xs-12">
            <div class="form-group">
               <label>UF</label>
               <select name="uf" class="form-control">
                  <option>Acre</option>
                  <option>Amazonas</option>
                  <option>Goiás</option>
                  <option>Santa Catarina</option>
               </select>
            </div>
         </div>

         <div class="col-md-3 col-sm-4 col-xs-12">
            <div class="form-group">
               <label>Cidade</label>
               <select name="cidade" class="form-control">
                  <option>Porangatu</option>
                  <option>Manáus</option>
                  <option>Goiânia</option>
                  <option>Joinville</option>
               </select>
            </div>
         </div>

      </div>
      <div class="row">
         <div class="col-xs-12"><button class="btn btn-primary" type="submit">Enviar</button></div>
      </div>
   </div>
</form>

Aqui tem uma lista de Frameworks CSS. Não tenho certeza se todos tem Grid System.

Outro Framework muito interessante que não tem na lista anterior é o Materialize. Particularmente eu nunca o utilizei, mas visualmente achei ele muito atraente.

3
  • ouvi dizer deste framework, ele é o futuro no front?
    – Denali
    2/09/2015 às 13:29
  • Já está sendo @Denali, a mais de um ano, existe outros muito bons também, ele é o mais popular. Aqui uma lista de Frameworks front-end.
    – KaduAmaral
    2/09/2015 às 13:55
  • @Denali outro muito bom também que não está nessa lista ai é o Materialize.
    – KaduAmaral
    2/09/2015 às 14:00
2

A tag <table> é para tabelas, qualquer coisa diferente disso está semanticamente errado, e semântica é um dos principais pontos do HTML 5.

Utilize divs para contêineres genéricos sem significado especial. sections não diferem tanto das divs nesse caso, mas é semanticamente mais forte/clara em sua intenção, então para as seções no seu formulário eu lhe indico a tag <section>.

0

Como foi falado, uma opção é SECTION. A tag section é utilizada para marcar as seções de conteúdo de uma página. Com Esse elemento agrupamos de forma lógica nosso conteúdo, separando a informação em áreas diferentes. Ai dependendo você pode até criar algumas DIVs dentro, o que não é recomendado mas pode, ou Articles.

<section id="rock">
  <h2>Rock </h2>
  <!-- vários elementos article podem vir aqui -->
</section>

<section id="jazz">
  <h2>Jazz </h2>
  <!-- vários elementos article podem vir aqui -->
</section>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .