Form Layout System Functionality

In Perfect Layout, forms are used through a set of alignment classes to ensure a given input is to the right of the description label and the height of each won't effect other parts of the form.

The formRow class holds the label and input classes and insures that each form row is seperate from the previous one. The formLabel class bolds the description text and makes it 150 pixels wide. The formElement class is on the right of the label area with a left margin of 150 pixels. The CSS of these classes is less important than the use of seperation divs.

Here's a simple form:

I want to reiterate that the height of the label or element will not effect any other part:

---

Relevant HTML

<div class="formRow">
	<div class="formLabel">
		<label>Username</label>
	</div>
	<div class="formElement">
		<input name="username" value="" />
	</div>
</div>

<div class="formRow">
	<div class="formLabel">
		<label>Password</label>
	</div>
	<div class="formElement">
		<input type="password" name="password" value="" />
	</div>
</div>

Relevant CSS

.formRow
{
	width:100%;
	clear:both;
	font-size:1em;
}

.formLabel
{
	padding-bottom:1em;
	float:left;
	clear:both;
	font-weight:bold;
	text-align:left;
	width:150px;
}

.formElement
{
	margin-left:150px;
	padding:0 0 1em 10px;
}

---

« Back to Functionality Index