The ideal way to build forms is to use table or div?

Question

I have a form to develop, will be 100 questions divided into blocks (will have to be invisible, will have forward and back button, block validation etc), probably the form page will be very large.

<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>

I must use several div or a table to build the form?

Answer 1

The ideal is do not use tables, since the proposal for the table is for data tabulation, as if it were the visible form of a database table for example.

In the documentation of W3C standards on the table says the following:

Tables should not be used Purely as a Means to layout Document content as this may present problems when Rendering to non-visual media.

Free Translation:

Tables should not be used purely to structure the content in layout of a document, as this presents problems when rendered by non-visual media.

In short, tables may seem the easiest way to resolve these issues, but in the medium term, specifically when you need to change something is when the headache will come and you will regret bitterly for not choosing the right path. Believe me I’ve been there.

So the ideal way is to use div's, better yet, the ideal way is to use a grid system like the one on Bootstrap for example. Another great advantage of using frameworks like Bootstrap is that they are designed to be responsive and you can build your form (and website in general) to be friendly on both devices with larger screens, such as desktop’s, as with smaller screens, as tablet’s and cell phones.

A functional responsive example of a form (run, click full screen and resize the browser to see responsiveness in action):

<!-- 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>

Here’s a list of Frameworks CSS. I’m not sure everyone has Grid System.

Other Framework very interesting that has not in the previous list is the Materialize. Particularly I never used it, but visually I found it very attractive.

Answer 2

The tag <table> is for tables, anything other than this is semantically wrong, and semantics is one of the main points of HTML 5.

Utilize divs for generic containers with no special meaning. sections do not differ so much from divs in this case, but it is semantically stronger/clearer in its intention, so for the sections in your form I indicate you the tag <section>.

Answer 3

As stated, one option is SECTION. The Section tag is used to mark the content sections of a page. With this element we logically group our content, separating the information into different areas. Ai depending you can even create some Divs inside, which is not recommended but can, or 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>