CODEWITHSUNDEEP
formshtml
Kevin Jung
Kevin Jung

Reputation: 3103

Dividing html forms into different divs

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?

Upvotes: 9

Views: 26311

Answers (3)

Jason
Jason

Reputation: 15358

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>

Upvotes: 11

Jumpey
Jumpey

Reputation: 156

You need to put the <div> tags inside the <form> tag (IDs can't start with numbers, hence the Ds):

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

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

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

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

Upvotes: 2

Chris Sobolewski
Chris Sobolewski

Reputation: 12925

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>

Upvotes: 3

Related Questions