CSS to align label and inputs on form - html

I have a problem with aligning my labels and input fields in a form. Time and again I end up with something like this:
Which is produced with HTML like so:
...
<ul>
<li>
<label for="STREET">Street</label>
<input data-val="true" data-val-required="The Street field is required." id="STREET" name="STREET" type="text" value="P.O. Box 1053" />
</li>
<li>
<label for="SUITE">Suite</label>
<input id="SUITE" name="SUITE" type="text" value="" />
</li>
<li>
<label for="city">City</label>
<input data-val="true" data-val-required="The City field is required." id="city" name="city" type="text" value="Dalton" />
</li>
...
Naturally my issue is that the labels and the inputs don't line up, so the display is all jaggy, etc. I can personally think of many ways around this, using a table, setting a bunch of divs, and picking widths, etc. so that everything lines up properly.
It's not that these approaches don't work, but they don't seem to be more of a hack than a real solution, and then I end up having to manipulate the label widths if the label text / font changes, etc.
Is there an easier way to solve this type of problem, while preserving simple HTML / CSS or should I stick with the classic approach of hard coding widths, divs, using tables, etc ?


Here's an option
ul {
display: table;
}
li {
display: table-row;
}
label, input {
display: table-cell;
}
Of course you should adapt the css to your specific form, but this gives you table layout without sacrificing the markup. Here's a fiddle


it should be enough to set a width to the labels that is larger than the largest label-text
example css
label {
display:inline-block;
width:350px;
}
so all inputs would line up after 350px, is that your desired effect ?
http://jsfiddle.net/dKjpk/5/


Here is an option using floating inside the label if it's possible to give ul a fixed / relative width:
ul{
width:500px; // or 100%;
}
li{
width:100%;
display:block;
}
li{
list-style:none;
clear:both;
}
li label{
float:left;
}
li input{
float:right;
}
here's a fiddle


Arguably you could justify using a table here, since semantically you can consider that form to be tabular data.
Otherwise you need to either float the input elements right within their container so they are all flush, set a fixed width on the label elements, or use some kind of fluid grid to handle this (I usually use Foundation so I would use columns for this, with both label and input elements set to width: 100% within their fluid containers).


try it like this
by creating a table your things are in the same area beneath each other
<html>
<head>
<style>
label{
font-weight:bold;
}
</style>
</head>
<body>
<form>
<table>
<tr>
<td><label for="street">Street</label></td>
<td><input type="text" name="street"></td>
</tr>
<tr>
<td><label for="suite">Suite</label></td>
<td><input type="text" name="suite"></td>
</tr>
<tr>
<td><label for="city">City</label></td>
<td><input type="text" name="city"></td>
</tr>
<tr>
<td><label for="state_region">State or Region</label></td>
<td><select><option>Arizona</option></select></td>
</tr>
<tr>
<td><label for="pc">Postal Code</label></td>
<td><input type="text" name="pc"></td>
</tr>
<tr>
<td><label for="country">Country</label></td>
<td><select><option>USA</option></select></td>
</tr>
<tr>
<td><label for="phone">Phone</label></td>
<td><input type="text" name="phone"></td>
</tr>
<tr>
<td><label for="fax">Fax</label></td>
<td><input type="text" name="fax"></td>
</tr>
<tr>
<td><label for="email">Email</label></td>
<td><input type="text" name="email"></td>
</tr>
</table>
</form>
</body>

Related

Aligning input fields [duplicate]

I'm new to HTML and I'm trying to learn how to use forms.
The biggest issue I am having so far is aligning the forms. Here is an example of my current HTML file:
<form>
First Name:<input type="text" name="first"><br />
Last Name:<input type="text" name="last"><br />
Email:<input type="text" name="email"><br />
</form>
The problem with this is, the field box after 'Email' is drastically different in terms of spacing compared to first, and last name. What is the 'proper' way to make it so that they 'line-up' essentially?
I am trying to practice good form and syntax...a lot of people might do this with CSS I am not sure, I have only learned the very basics of HTML so far.

The accepted answer (setting an explicit width in pixels) makes it hard to make changes, and breaks when your users use a different font size. Using CSS tables, on the other hand, works great:
form { display: table; }
p { display: table-row; }
label { display: table-cell; }
input { display: table-cell; }
<form>
<p>
<label for="a">Short label:</label>
<input id="a" type="text">
</p>
<p>
<label for="b">Very very very long label:</label>
<input id="b" type="text">
</p>
</form>
Here's a JSFiddle: http://jsfiddle.net/DaS39/1/
And if you need the labels right-aligned, just add text-align: right to the labels: http://jsfiddle.net/DaS39/
EDIT: One more quick note: CSS tables also let you play with columns: for example, if you want to make the input fields take as much space as possible, you can add the following in your form
<div style="display: table-column;"></div>
<div style="display: table-column; width:100%;"></div>
you may want to add white-space: nowrap to the labels in that case.

Another example, this uses CSS, I simply put the form in a div with the container class. And specified that input elements contained within are to be 100% of the container width and not have any elements on either side.
.container {
width: 500px;
clear: both;
}
.container input {
width: 100%;
clear: both;
}
<html>
<head>
<title>Example form</title>
</head>
<body>
<div class="container">
<form>
<label>First Name</label>
<input type="text" name="first"><br />
<label>Last Name</label>
<input type="text" name="last"><br />
<label>Email</label>
<input type="text" name="email"><br />
</form>
</div>
</body>
</html>

A simple solution for you if you're new to HTML, is just to use a table to line everything up.
<form>
<table>
<tr>
<td align="right">First Name:</td>
<td align="left"><input type="text" name="first" /></td>
</tr>
<tr>
<td align="right">Last Name:</td>
<td align="left"><input type="text" name="last" /></td>
</tr>
<tr>
<td align="right">Email:</td>
<td align="left"><input type="text" name="email" /></td>
</tr>
</table>
</form>

I find it far easier to change the display of the labels to inline-block and set a width
label {
display: inline-block;
width: 100px;
text-align: right;
}
<form>
<label>First Name:</label><input type="text" name="first" /><br />
<label>Last Name:</label><input type="text" name="last" /><br />
<label>Email:</label><input type="text" name="email" /><br />
</form>

You should use a table. As a matter of logical structure the data is tabular: this is why you want it to align, because you want to show that the labels are not related solely to their input boxes but also to each other, in a two-dimensional structure.
[consider what you would do if you had string or numeric values to display instead of input boxes.]

For this, I prefer to keep a correct HTML semantic, and to use a CSS simple as possible.
Something like this would do the job :
label{
display: block;
float: left;
width : 120px;
}
One drawback however : you might have to pick the right label width for each form, and this is not easy if your labels can be dynamic (I18N labels for instance).

using css
.containerdiv label {
float:left;
width:25%;
text-align:right;
margin-right:5px; /* optional */
}
.containerdiv input {
float:left;
width:65%;
}
this give you something like:
label1 |input box |
another label |another input box |

I'm a big fan of using definition lists.
They're easy to style using CSS, and they avoid the stigma of using tables for layout.
<dl>
<dt>Username:</dt>
<dd><input type="text" name="username" /></dd>
<dt>Password:</dt>
<dd><input type="password" name="password" /></dd>
</dl>

It also can be done using CSS and without tables or floats or fixed lengths by changing the content direction to rtl and then back to ltr, but the labels must go after each input.
To avoid this markup reordering, just set the label's text in a data-* attribute and show it using an ::after pseudo-element. I think it becomes much clearer.
Here is an example setting the label's text in a custom attribute called data-text and showing them using the ::after pseudo-element, so we don't mess with markup while changing direction to rtl and ltr :
form
{
display: inline-block;
background-color: gold;
padding: 6px;
}
label{
display: block;
direction: rtl;
}
input{
direction: ltr;
}
label::after{
content: attr(data-text);
}
<form>
<label data-text="First Name">
<input type="text" />
</label>
<label data-text="Last Name">
<input type="text" />
</label>
<label data-text="E-mail">
<input type="text" />
</label>
</form>

Clément's answer is by far the best. Here's a somewhat improved answer, showing different possible alignments, including left-center-right aligned buttons:
label {
padding-right: 8px;
}
.FAligned,
.FAlignIn {
display: table;
}
.FAlignIn {
width: 100%;
}
.FRLeft,
.FRRight,
.FRCenter {
display: table-row;
white-space: nowrap;
}
.FCLeft,
.FCRight,
.FCCenter {
display: table-cell;
}
.FRLeft,
.FCLeft,
.FILeft {
text-align: left;
}
.FRRight,
.FCRight,
.FIRight {
text-align: right;
}
.FRCenter,
.FCCenter,
.FICenter {
text-align: center;
}
<form class="FAligned">
<div class="FRLeft">
<p class="FRLeft">
<label for="Input0" class="FCLeft">Left:</label>
<input id="Input0" type="text" size="30" placeholder="Left Left Left" class="FILeft" />
</p>
<p class="FRLeft">
<label for="Input1" class="FCRight">Left Right Left:</label>
<input id="Input1" type="text" size="30" placeholder="Left Right Left" class="FILeft" />
</p>
<p class="FRRight">
<label for="Input2" class="FCLeft">Right Left Left:</label>
<input id="Input2" type="text" size="30" placeholder="Right Left Left" class="FILeft" />
</p>
<p class="FRRight">
<label for="Input3" class="FCRight">Right Right Left:</label>
<input id="Input3" type="text" size="30" placeholder="Right Right Left" class="FILeft" />
</p>
<p class="FRLeft">
<label for="Input4" class="FCLeft">Left Left Right:</label>
<input id="Input4" type="text" size="30" placeholder="Left Left Right" class="FIRight" />
</p>
<p class="FRLeft">
<label for="Input5" class="FCRight">Left Right Right:</label>
<input id="Input5" type="text" size="30" placeholder="Left Right Right" class="FIRight" />
</p>
<p class="FRRight">
<label for="Input6" class="FCLeft">Right Left Right:</label>
<input id="Input6" type="text" size="30" placeholder="Right Left Right" class="FIRight" />
</p>
<p class="FRRight">
<label for="Input7" class="FCRight">Right:</label>
<input id="Input7" type="text" size="30" placeholder="Right Right Right" class="FIRight" />
</p>
<p class="FRCenter">
<label for="Input8" class="FCCenter">And centralised is also possible:</label>
<input id="Input8" type="text" size="60" placeholder="Center in the centre" class="FICenter" />
</p>
</div>
<div class="FAlignIn">
<div class="FRCenter">
<div class="FCLeft"><button type="button">Button on the Left</button></div>
<div class="FCCenter"><button type="button">Button on the Centre</button></div>
<div class="FCRight"><button type="button">Button on the Right</button></div>
</div>
</div>
</form>
I added some padding on the right of all labels (padding-right:8px) just to make the example slight less horrible looking, but that should be done more carefully in a real project (adding padding to all other elements would also be a good idea).

The traditional method is to use a table.
However, many would argue that tables are restricting and prefer CSS. The benefit of using CSS is that you could use various elements. From divs, ordered and un-ordered list, you could accomplish the same layout.
In the end, you'll want to use what you're most comfortable with.
Hint: Tables are easy to get started with.
Example:
<table>
<tbody>
<tr>
<td>
First Name:
</td>
<td>
<input type="text" name="first">
</td>
</tr>
<tr>
<td>
Last Name:
</td>
<td>
<input type="text" name="last">
</td>
</tr>
</tbody>
</table>

I know this has already been answered, but I found a new way to align them nicely - with an extra benefit - see http://www.gargan.org/en/Web_Development/Form_Layout_with_CSS/
basically you use the label element around the input and align using that and then with css you simply align:
label {
display: block;
position: relative;
}
label span {
font-weight: bold;
position: absolute;
left: 3px;
}
label input,
label textarea,
label select {
margin-left: 120px;
}
<label><span>Name</span> <input /></label>
<label><span>E-Mail</span> <input /></label>
<label><span>Comment</span> <textarea></textarea></label>
you do not need any messy br lying around for linebreaks - meaning you can quickly accomplish a multi-column layout dynamically
the whole line is click-able. Especially for checkboxes this is a huge help.
Dynamically showing/hiding form lines is easy (you just search for the input and hide its parent -> the label)
you can assign classes to the whole label making it show error input much clearer (not only around the input field)

Well for the very basics you can try aligning them in the table. However the use of table is bad for layout since table is meant for contents.
What you can use is CSS floating techniques.
.styleform label{float:left;}
.styleform input{margin-left:200px;} /* this gives space for the label on the left */
.styleform .clear{clear:both;} /* prevent elements from stacking weirdly */
<div class="styleform">
<form>
<label>First Name:</label><input type="text" name="first" />
<div class="clear"></div>
<label>Last Name:</label><input type="text" name="first" />
<div class="clear"></div>
<label>Email:</label><input type="text" name="first" />
<div class="clear"></div>
</form>
</div>
An elaborate article I wrote can be found answering the question of IE7 float problem: IE7 float right problems

Insert input tags inside an unordered lists.Make the style-type none.
Here's an example.
<ul>
Input1
<li> <input type="text" />
Input2
<li> <input type="text" />
<ul/>
Worked for me !

The CSS I used to solve this problem, similar to Gjaa but styled better
It's very simple, and I'm just beginning, but it worked quite nicely
Here is my CSS and HTML, used specifically for a simple registration form with no php code
p {
text-align: center;
}
.styleform label {
float: left;
width: 40%;
text-align: right;
}
.styleform input {
float: left;
width: 30%;
}
<form id="registration">
<h1>Register</h1>
<div class="styleform">
<fieldset id="inputs">
<p><label>Name:</label>
<input id="name" type="text" placeholder="Name" autofocus required>
</p>
<p><label>Email:</label>
<input id="email" type="text" placeholder="Email Address" required>
</p>
<p><label>Username:</label>
<input id="username" type="text" placeholder="Username" autofocus required>
</p>
<p>
<label>Password:</label>
<input id="password" type="password" placeholder="Password" required>
</p>
</fieldset>
<fieldset id="actions">
</fieldset>
</div>
<p>
<input type="submit" id="submit" value="Register">
</p>
</form>

<form>
<div>
<label for='username'>UserName</label>
<input type='text' name='username' id='username' value=''>
</div>
</form>
In the CSS you have to declare both label and input as display: inline-block and give width according to your requirements. Hope this will help you. :)

Simply add
<form align="center ></from>
Just put align in opening tag.

CSS: remove all padding from cell with input field

I have a table row with an input field in each cell that is used to filter a column.
How can I remove all padding from the td's in this row so that there is no extra space between the input field borders and the td's containing them ?
Currently the td's containing input field appear much bigger because of this.
Note: This is just needed for one specific row, all other rows will stay standard-formatted.
My tr looks like this:
// ...
<tbody>
<tr>
<td><input type="text" name="input1" /></td>
<td><input type="text" name="input2" /></td>
<td><input type="text" name="input3" /></td>
</tr>
// ...
</tbody>
Many thanks for any help with this, Tim.

Firstly add a class to the :
<tbody>
<tr class="noPadding">
<td><input type="text" name="input1" /></td>
<td><input type="text" name="input2" /></td>
<td><input type="text" name="input3" /></td>
</tr>
</tbody>
Then in your CSS:
.noPadding td { padding: 0; }
If you find you're still getting extra spacing there may be some margins applied to the inputs themselves (depends on your other CSS / browser defaults) if so worth trying:
.noPadding td input { margin: 0; }
Hope this helps.

It looks like what you're seeing is margin created by the form fields by default, try this:
Css to be placed in your style tags in the head:
.noMargin { margin: 0; }
Hint: you can assign margin a minus value to reign in the space more, in this instance:
.noMargin { margin: -2px; }
worked for me (using safari, but will vary by browser)
Your html:
<tbody>
<tr>
<td><input type="text" name="input1" class="noMargin" /></td>
<td><input type="text" name="input2" class="noMargin" /></td>
<td><input type="text" name="input3" class="noMargin" /></td>
</tr>
</tbody>
I hope this helps.

You can use jquery to remove padding of all the table tds where it has text input boxes
$(function () {
$('.myTable').find(':text').parent('td').css('padding','0');
});
as shown in http://jsfiddle.net/WTBsp/1/

Align Forms correctly

I have this form:
<form action="insertar-modelo.php" method="post" enctype="application/x-www-form-urlencoded">
<table>
<tr><td class=Forms>ICAO: <input type="text" value="" name="ICAO" /><br/><br/></td</tr>
<tr><td class=Forms>Name: <input type="text" value="Airbus A320" name="nombre" /><br/><br/></td></tr>
<tr><td class=Forms>Price: <input maxlength="9" value="1000000" type="text" name="precio" /> €<br/><br/></td></tr>
<tr><td class=Forms>Number Classes: <select name="numberclasses" id="numberclasses" onchange="callAjax()">
<option>Select Number of Classes</option>
<?php
echo'<option value="1">One</option>';
echo'<option value="2">Two</option>';
echo'<option value="3">Three</option>';
?>
</select><br/><br/></td></tr>
<tr><td class=Forms>First Class: <input disabled="disabled" type="text" name="classes1" /><br/><br/></td></tr>
<tr><td class=Forms>Bussines Class: <input disabled="disabled" type="text" name="classes2" /><br/><br/></td></tr>
<tr><td class=Forms>Economy Class: <input disabled="disabled" type="text" name="classses" /><br/><br/></td></tr>
<tr><td class=Forms>Capacidad: <input maxlength="3" value="150" type="text" name="pax" /> pasajeros<br/><br/></td></tr>
</table><br />
<input type="submit" name="enviar" value="Insertar"/>
</form>
And the CSS class Forms is:
td.Forms {
text-align: left;
text-indent: 10px;
font-family: Century Gothic;
font-weight: normal;
font-size: 15px;
white-space: nowrap;
}
The boxes start when the title finish and I want the boxes start all in the same part. I think the idea is see the titles in one colum and the boxes in other, like this http://i48.tinypic.com/2nbd2m8.png, but I have this http://i49.tinypic.com/1exb80.png

You need to add extra cells (<td>) for your input fields so that they all start on the same position. Additionally you may want to define a width to ensure that you have enough space between one cell and another on a row. I defined it to all <td>'s by adding width: 200px; to your td.Forms. Lastly to give spacing between rows I added:
td {
padding: 10px 0;
}
Which adds 10px padding to the top and bottom of every cell.
Checkout this fiddle to see the code in action.

Below is the correct html markup (assuming you're going to use table layout for this). Here is a demo.
<form action="insertar-modelo.php" method="post" enctype="application/x-www-form-urlencoded">
<table>
<tr>
<td class=Forms>ICAO:</td>
<td><input type="text" value="" name="ICAO" /></td>
</tr>
<tr>
<td class=Forms>Name:</td>
<td><input type="text" value="Airbus A320" name="nombre" /></td>
</tr>
<tr>
<td class=Forms>Price:</td>
<td><input maxlength="9" value="1000000" type="text" name="precio" /> €</td>
</tr>
<tr>
<td class=Forms>Number Classes:</td>
<td>
<select name="numberclasses" id="numberclasses" onchange="callAjax()">
<option>Select Number of Classes</option>
<?php
echo'<option value="1">One</option>';
echo'<option value="2">Two</option>';
echo'<option value="3">Three</option>';
?>
</select>
</td>
</tr>
<tr>
<td class=Forms>First Class:</td>
<td><input disabled="disabled" type="text" name="classes1" /></td>
</tr>
<tr>
<td class=Forms>Bussines Class:</td>
<td><input disabled="disabled" type="text" name="classes2" /></td>
</tr>
<tr>
<td class=Forms>Economy Class:</td>
<td><input disabled="disabled" type="text" name="classses" /></td>
</tr>
<tr>
<td class=Forms>Capacidad:</td>
<td><input maxlength="3" value="150" type="text" name="pax" /> pasajeros</td>
</tr>
</table>
<input type="submit" name="enviar" value="Insertar"/>
</form>

I am going to give you the answer - but first I want to explain some semantics and how one can properly code a form WITHOUT using tables.
Html form have been around since the inception of html. You will be amazed how many html form elements ARE NOT utilized when they simply exist to help you code properly semantic html. Proper semantic html means:
1) Your code is accessible to text viewers such as Google search engine and browsers used by blind people
2) Fulfills federal law (US laws require school/government websites to be accessible)
3) Will make it easier for you to code the backend (php) in the long run.
A form at its barebones should include:
<form>
<fieldset>
<div>
<label for="first-name">First Name</label>
<input type="textbox" name="first_name" id="first-name" value="" />
</div>
<div>
<label for="gender_selection">Gender</label>
<select name="gender" id="gender_selection">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</div>
</fieldset>
</form>
You must have a fieldset tag for each form tag.
label tag is used to define what the form element stands for. THIS IS WHAT tells a text viewer what each form element stands for! Sure you can do without but why when this tag was created for exactly that purpose.
The div tags will allow you to easily style errors/corrections needed.
CSS
form div {
overflow: hidden;
}
form div label {
float: left;
width: 120px;
padding: 0 20px 0 0;
}
form div input, form div select {
float: left;
width: 220px;
}
Simple css (not tested) to mimic your tabular forms with the added advantage of not using tables, being accessible, and using proper html.
Now if a user made an error with in let us say first name we simply add class .error to that div:
<div class="error">
<label for="first-name">First Name</label>
<input type="textbox" name="first_name" id="first-name" value="" />
</div>
CSS:
div.error label {
color: red;
}
div.error input {
border: red;
color: red;
}
ANSWER TO YOUR QUESTION:
Your html form "label" elements do not have a fixed width. Add a fixed width by either adding an extra <td> column or using the code I provided above.
Hopefully this post will help you for the future.

HTML text and password input fields have difference size internet explorer

I am using this form setting for my login form :
<tr>
<td class="label"> Username:</td>
<td> <input id="id_username" type="text" name="username" maxlength="30" /></td>
</tr>
<tr>
<td class="label"> Password:</td>
<td> <input a="text" type="password" name="password" id="id_password" /></td>
</tr>
when using firefox both input boxes having the same size. However when I am on IE 9 , the password field is smaller.
What is the best way to get rid of this behavior ?

Use CSS to apply a fixed width value to the elements, for example:
.fixed-input {
width: 150px;
}
....
<input class="fixed-input" id="id_username" type="text" name="username" maxlength="30" />

i was having the same problem. i added the width style and they still looked different.
it turned out that the padding and border color were also not the same for text and password inputs and this was causing the difference.
make sure you set the following style attributes for both password and text inputs:
width: 200px;
font-family: sans-serif;
font-size: 15px;
padding: 3px;
border: 1px solid black;

The best way would be to define style for this elements and set appropriate width. It may be possible, that maxlength attribute increases size of user field.

Details View and CSS Compliance

I'm still having a hard time not wanting to use Tables to do my Details View Layout in HTML. I want to run some samples by people and get some opinions.
What you would prefer to see in the html for a Details View? Which one has the least hurddles cross browser? Which is the most compliant? Which one looks better if a I have a static width label column that is right aligned?
By Details view i mean something similar to the following image.
Table
<table>
<tr>
<td><label /></td>
<td><input type="textbox" /></td>
</tr>
<tr>
<td><label /></td>
<td><input type="textbox" /></td>
</tr>
</table>
Fieldset
<fieldset>
<label /><input type="textbox" /><br />
<label /><input type="textbox" /><br />
</fieldset>
Divs
<div class="clearFix">
<div class="label"><label /></div>
<div class="control"><input type="textbox" /></div>
</div>
<div class="clearFix">
<div class="label"><label /></div>
<div class="control"><input type="textbox" /></div>
</div>
List
<ul>
<li><label /><input type="textbox" /></li>
<li><label /><input type="textbox" /></li>
</ul>

Those approaches aren't mutually exclusive, personally I'd mix them up a bit:
<fieldset>
<label for="name">XXX <input type="text" id="name"/></label>
<label for="email">XXX <input type="text" id="email"/></label>
</fieldset>
Although to get a right aligned label (something I'd personally avoid because it's harder to scan visually) you'll need to have an extra element around the text that isn't around the input, so I'd go for
<fieldset>
<div class="label_input"><label for="name">XXX</label><input type="text" id="name"/></div>
<div class="label_input"><label for="email">XXX</label><input type="text" id="email"/></div>
</fieldset>

Actually I take that back for simple textbox only inputs I find that the Fieldset option works well.
However, typically I will have multiple controls in a single "row", therefore I go with the div based layout, that way I can put inputs, validators and all into a single element.

I prefer the fieldset containing divs. The label divs are float:left; width:20em and the content divs just have a fixed left margin of 21em or 22em for example. But you have to remember to include a clear div for that to work:
<fieldset>
<div class="labels"><label for="name">Name</label></div>
<div class="data"><input ....</div>
<div style="clear:both"/>
// repeat for next fields
</fieldset>

CSS:
label{
float:left;
text-align:right;
width:115px;
margin-right:5px;
}
input{
margin-bottom:5px;
}
HTML:
<label for="username">UserName:</label><input type="text" id="username" /><br />
<label for="username">UserName:</label><input type="text" id="username" /><br />
Obviously you then can add a div or use the form around it to get a background-color for your whole form etc.

I find that forms are one of the hardest thing to deal with in css because if you're wanting tight control, there's often a lot of css to add that old school HTML would take care of for you. However, if you're willing to accept a uniform natural treatment, then the cleanest way to separate the content and presentation would be:
form { margin: 0; padding: 0; }
fieldset { whatever treatment you want }
#details div { margin: 5px 0; width: 100%; overflow: hidden; /* ensures that your floats are cleared */ }
#details label { float: left; width: 190px; text-align: right; }
#details input { margin-left: 200px; }
<form>
<fieldset id="details">
<div id="item1div">
<label for="item1">item1 label</label>
<input type="" id="item1" />
</div>
<div id="item1div">
<label for="item1">item1 label</label>
<input type="" id="item1" />
</div>
</fieldset>
</form>

You CAN use tables to format forms tabularly but use CSS to add styles to the forms. CSS purists will probably say that you shouldn't but the reality is that many browsers often render CSS forms differently and can cause accessibility issues. A table-based form is much more consistent across browsers and much more accessible as well.