Is it ideal to build forms using table or div?

Navigation
8

I have a form to develop, there will be 100 questions divided into blocks (they will have to be invisible, push forward and back, block validation etc), the form page will probably 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>

Should I use multiple div or a table to build the form?

    
asked by anonymous 02.09.2015 / 14:40

3 answers

9

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

In the W3C standards documentation on 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 the layout of a document, as this presents problems when rendered by nonvisual media.

In short, tables may seem like 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 one. Believe me I've already gone through this.

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

A responsive functional example of a form (run, click fullscreen and resize the browser window to see the 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 CSS Frameworks . I'm not sure if everyone has Grid System .

Another very interesting Framework that you do not have in the previous list is Materialize . Particularly I never used it, but visually I found it very attractive.

    
02.09.2015 / 14:55
2

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

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

    
02.09.2015 / 15:21
0

As mentioned, 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 on 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>
    
02.09.2015 / 18:31
How to enable and disable fields when clicking button What is the difference between Function and Procedure?