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> <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;
}
精彩评论