How to layout a form

Let's say I want to layout my page like this:

Label: <inputField>        Label: <inputField>
Label: <inputField>        Label: <inputField>

<-------------------- LINE ------------------>

Label: <inputField>
Label: <inputField>
Label: <inputField>
Label: <inputField> <inputField>

<-------------------- LINE ------------------>

<butto开发者_开发技巧n> <button> <button> <checkbox>

I would do it using <table> for layouting the form objects and <hr> for the lines.

But I'm not sure if this is a "nice" solution. (I don't like all the tables beeing generated...)

Shoud I better use <div> elements for this layout? Or how would you do it?

With a form, you can style the labels and the inputs. You should do it that way.

EDIT

The quick and dirty version. Adjust as necessary.

<div class="labelLeft"><label>left label</label> <input /></div> 
<div class="labelRight"><label>right label</label> <input /></div> 

<br />

<div class="labelLeft"><label>left label</label> <input /></div> 
<div class="labelRight"><label>right label</label> <input /></div>

<br />

<div class="labelLeft"><label>left label</label> <input /></div> 
<div class="labelRight"><label>right label</label> <input /></div> 

<hr />

<label>label</label> <input /><br /><br />
<label>label</label> <input /><br /><br />
<label>label</label> <input /><br /><br />
<label>label</label> <input /> <input />

<hr />

<button></button> <button></button> <button></button> &nbsp;<input type="checkbox" /> 

div.labelLeft{float:left; width:250px;}
div.labelright{float:right; width:250px;}
label{border:1px solid red;}

http://jsfiddle.net/jasongennaro/XzhDd/

you can get away without <h:panelGrid> add styleClass for each input and handle the css for these labels

You probably just need these two attributes : display : inline and float : left / right

You may take a look a blueprintCSS for an example how they do their form layouts. Basically they've a 960-grid-system which you can also use to layout your forms.

960.gs is also worth a look.

Here is a working example: http://jsfiddle.net/gcummins/HHMu7/ . You can float the labels/inputs that are on the left, and provide a left-margin for the label on the right to force them beyond the left inputs.

Markup:

<form id="sebi_form">
    <label for="input1"class="left_column">Input 1</label>
    <input name="input1" id="input1" type="text" class="left_column" />
    <label for="input2"class="right_column">Input 2</label>
    <input name="input2" id="input2" type="text" class="right_column" /><br class="clearfix" />
    <label for="input3" class="left_column">Input 3</label>
    <input name="input3" id="input3" type="text" class="left_column" />
    <label for="input4"class="right_column">Input 4</label>
    <input name="input4" id="input4" type="text" class="right_column" />
</form>
<hr />
<!-- More elements as needed -->

CSS:

.left_column {
    float: left;
}
label.right_column {
    margin-left: 60px;
}
.clearfix {
    clear: both;
}