Dividing html forms into different divs

Question

I just have a question about putting a single form with multiple inputs into different divs.

I have 4 main sections that I need to divide into separate divs but they all must get posted to a single php file. The separation is needed as I am trying to set the layout of the page.

    <div id="1">
    <form method="post" action="process.php"> 
    URL <input type="text" name="url" size="50"/>
    </div>

    <div id="2">
    <input type="checkbox" name="ck1" value="option1" />
    <input type="checkbox" name="ck2" value="option2" />
    <input type="checkbox" name="ck3" value="option3" />
    </div>

    <div id="3">
    <input type="checkbox" name="ck4" value="option4" />
    <input type="checkbox" name="ck5" value="option5" />
    <input type="checkbox" name="ck6" value="option6" />
    </div>

    <div id="4">
    <input type="submit" value="Submit">
</form>
    </div>

This does work but does not validate for obvious reason. I tried using the fieldset element but it has that line border around the filesets just dosen't seem to be suitable for my situation. What would be the proper way of formmating this and have it still work?

Answer 1

What you need to do is use fieldset tag, however, as always this is one option of many.

Example: fieldset

To illustrate this example, see my code/result here: http://jsfiddle.net/grARw/

Make sure that the form tags are at the top and bottom and not in between div elements.

Here's the code:

<form method="post" action="process.php"> 
    <fieldset id="f1">
        <label>URL</label><input type="text" name="url" size="50"/>
    </fieldset>    
    <fieldset id="f2">
        <p><input type="checkbox" name="ck1" value="option1" /> Yes</p>
        <p><input type="checkbox" name="ck2" value="option2" /> No</p>
        <p><input type="checkbox" name="ck3" value="option3" /> Maybe</p>
    </fieldset>  
    <fieldset id="f3">
        <input type="checkbox" name="ck4" value="option4" /> Great
        <input type="checkbox" name="ck5" value="option5" /> Average
        <input type="checkbox" name="ck6" value="option6" /> Poor
    </fieldset >
    <fieldset id="f4">
        <input type="submit" value="Submit">
    </fieldset>
</form>

Answer 2

The semantic way to do this is with the <fieldset> tag.

http://www.w3schools.com/TAGS/tag_fieldset.asp

Also, this is a big reason your code doesn't validate:

</form>
</div>