Yet Another Divs Vs Tables Issue: Forms

Yet Another Divs vs Tables issue: Forms

What I usually do is :

<form>
 <label for="param_1">Param 1</label>
 <input id="param_1" name="param_1"><br />
 <label for="param_2">Param 2</label>
 <input id="param_2" name="param_2"><br />
</form>

and in a CSS :

label,input { display: block; float: left; margin-bottom: 1ex; }
input { width: 20em; }
label { text-align: right; width: 15em; padding-right: 2em; }
br { clear: left; }

Of course, you'll have to define the width according to your actual data :-)

First, give label and input display: block, so that it can be assigned a size and be lined up.
They both get float: left because Explorer does things a bit differently
Format the label nicely
hack the br so that there's a clear: left somewhere, and I remember that putting it on the label didn't work on some browser.

Plus, with the br you get a nice formatting even if the browser does not support CSS :-)

Complicated form table vs div

I would go the div route. As long as you're careful of your widths when you apply floats, it's actually pretty straightforward to get the layouts to work properly in different screen resolutions.

Here are a few rules:

Set a max width on your form or your form's wrapper element. If you want to float elements on one row make sure their width's added together does not exceed this width.
If you are adding horizontal padding/margins to your floated elements remember that these add to the total width of the element.
Avoid mixing percentage widths with pixel padding and margins. Apply the percentage width to a parent element and the pixel padding/margins to a child element.
Use clearing elements between your rows of elements to keep everything in line.

As to the markup, you can use the form elements along with CSS to create a semantic structure:

<fieldset>
    <legend>Fieldset Title</legend>

    <label for="input1">Input 1:</label>
    <span><input type="text" id="input1" name="input1"/></span>
    <label for="input2">Input 2:</label>
    <span><input type="text" id="input2" name="input2"/></span>

    <br/>

    <label for="input3">Input 3:</label>
    <span><input type="text" id="input3" name="input3"/></span>
    <label for="input4">Input 4:</label>
    <span><input type="text" id="input4" name="input4"/></span>
</fieldset>

And the CSS:

fieldset {
    padding: 20px 0;
    width: 600px;
    margin: 0;
    border: 0;
}

legend {
    display: block;
    width: 100%;
    background: black;
    color: white;
}

label, span{
    float: left;
    width: 150px;
}

input {
    width: 120px;  
}

br {
    clear: both;  
}

You can see the result here.

Is it acceptable to use tables for forms? Or is it still more correct to use divs?

Both are correct.

I preffer using some div/li, as that allows me to make some different layouts, but tables for forms are not frowned upon.

Actually, by default, Django gives you table formated forms.

Are tables replaced by DIVs?

To be semantically correct, tables should only used for tabular data and not for laying out a page.

David Dorward brought something to my attention in a comment. According to the HTML 4.01 Specification's section on Tables in HTML Documents:

Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheets to control layout rather than tables.

What are the advantages of DIVS over tables?

This question gets asked a lot. Take a look at these:

Why not use tables for layout in HTML?

DIV's vs. Tables or CSS vs. Being Stupid

Yet Another Divs vs Tables issue: Forms

Tables instead of DIVs

The whole "Tables vs Divs" thing just barely misses the mark. It's not "table" or "div". It's about using semantic html.

Even the div tag plays only a small part in a well laid out page. Don't overuse it. You shouldn't need that many if you put your html together correctly. Things like lists, field sets, legends, labels, paragraphs, etc can replace much of what a div or span is often used to accomplish. Div should be used primarily when it makes sense to indicate a logical division, and only appropriated for extra layout when absolutely necessary. The same is true for table; use it when you have tabular data, but not otherwise.

Then you have a more semantic page and you don't need quite as many classes defined in your CSS; you can target the tags directly instead. Possibly most importantly, you have a page that will score much better with Google (anecdotally) than the equivalent table or div-heavy page. Most of all it will help you better connect with a portion of your audience.

So if we go back and look at it in terms of table vs div, it's my opinion that we've actually come to the point where div is over-used and table is under-used. Why? Because when you really think about it, there are a lot of things out there that fall into the category of "tabular data" that tend to be overlooked. Answers and comments on this very web page, for example. They consist of multiple records, each with the same set of fields. They're even stored in a sql server table, for crying out loud. This is the exact definition of tabular data. This means an html table tag would absolutely be a good semantic choice to layout something like the posts here on Stack Overflow. The same principle applies to many other things as well. It may not be a good idea to use a table tag to set up a three column layout, but it's certainly just fine to use it for grids and lists... except, of course, when you can actually use the ol or ul (list) tags.

Dynamic Input error within tables or divs

One thing to point out is that always process form input when the form is submitted.

And your markup is a little bit wrong, its the other way around. The table must be inside the form.

<?php
// handle form inputs when the form is submitted
if($_SERVER['REQUEST_METHOD'] == 'POST') {
    $eng = implode(',', array_filter($_POST['engineers']));
    echo $eng;
}

?>

<div class="form_table">
<!-- form must wrap the table -->
    <form method="POST">
        <table>
            <tr>
                <th><label for="engineers">Engineers</label></th>
                <td>
                    <button type="button" id="add">Add Another Engineer</button>
                    <div id="items">
                        <div><input type="text" name="engineers[]" /></div>
                    </div>
                </td>
            </tr>
            <tr>
                <th colspan="2">
                    <input type="submit" name="" value="Add Job" class="submit" />
                </th>
            </tr>
        </table>
    </form>
</div>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script>
$(document).ready(function(){
    //when the Add Filed button is clicked
    $("#add").click(function (e) {
        //Append a new row of code to the "#items" div
        $("#items").append('<div><input type="text" name="engineers[]"> <button class="delete">Delete</button></div>');
    });

    $("body").on("click", ".delete", function (e) {
        $(this).parent("div").remove();
    });
});
</script>

Sample Output

Yet Another Divs Vs Tables Issue: Forms