Forms Example Styling

From CSS Standards FAQ

Contents 1 Label and input side by side 1.1 Only float the <label> 1.2 Float both <input> and <label> 2 Removing the <fieldset> border 3 List form 3.1 Using dl

Label and input side by side

To make the label and input elements display in a column like manner start out with:

<form action="" method="get">
        <fieldset>
                <legend>Search!</legend>
                <div>
                        <label for="q">Query: </label>
                        <input type="text" name="q" id="q">
                </div>
                <button type="submit">Go!</button>
        </fieldset>
</form>

Only float the <label>

You could only float the <label>:

form div.field {
        clear:both;
}       
form div.field label {
        display:block;
        width:40%;
        float:left;
}       
form div.field input {
        width:40%;
}       

Float both <input> and <label>

Or float both <input> and <label>. Notice the overflow:auto set on the containing div. It clears the floats inside it.

form div {
    overflow:auto;
}
form div.field * {
    width:40%;
    float:left;
    display:block;
}

Removing the <fieldset> border

To remove the <fieldset> in most browser, use:

fieldset {
    border: 0;
}

List form

Using dl

<form action="#" method="post">
    <fieldset>
	<legend>Legend for the form</legend>
	    <dl>
		<dt><label for="form_id_input_id">Label text</label></dt>
		<dd><input type="text" name="form_id_input_name" id="form_id_input_id" value="" class="text" /></dd>
		<dt><label for="form_id_input_id_2">Label text example two</label></dt>
		<dd><input type="text" name="form_id_input_name_2" id="form_id_input_id_2" value="" class="text" /></dd>
		<dd class="input-info"><em>Information or note goes here.</em></dd>
		<dt><label for="form_id_input_id_3">Label for textarea</label></dt>
		<dd><textarea name="form_id_input_name_3" id="form_id_input_id_3" cols="50" rows="10"></textarea></dd>
		<dt>Reason for checkboxes</dt>
		<dd>
		    <ul>
			<li class="fli">
			<input type="checkbox" name="form_id_checkbox[]" id="form_id_checkbox_1" checked="checked" class="checkbox" />
			<label for="form_id_checkbox_1">Checkbox 1 (Checked)</label>
			</li>
			<li>
			<input type="checkbox" name="form_id_checkbox[]" id="form_id_checkbox_2" class="checkbox" /> 
			<label for="form_id_checkbox_2">Checkbox 2</label>
			</li>
			<li>
			<input type="checkbox" name="form_id_checkbox[]" id="form_id_checkbox_3" class="checkbox" /> 
			<label for="form_id_checkbox_3">Checkbox 3</label>
			</li>
			<li class="lli">
			<input type="checkbox" name="form_id_checkbox[]" id="form_id_checkbox_4" class="checkbox" />
			<label for="form_id_checkbox_4">Checkbox 4</label>
			</li>
		    </ul>
		</dd>
		<dt>Reason for radio buttons</dt>
		<dd>
		    <ul>
			<li class="fli">
			<input type="radio" name="form_id_radio" id="form_id_radio_1" class="radio" />
			<label for="form_id_radio_1">Radio Button 1</label>
			</li>
			<li>
			<input type="radio" name="form_id_radio" id="form_id_radio_2" class="radio" />
			<label for="form_id_radio_2">Radio Button 2</label>
			</li>
			<li>
			<input type="radio" name="form_id_radio" id="form_id_radio_3" class="radio" checked="checked" /> 
			<label for="form_id_radio_3">Radio Button 3 (Selected)</label>
			</li>
			<li class="lli">
			<input type="radio" name="form_id_radio" id="form_id_radio_4" class="radio" />
			<label for="form_id_radio_4">Checkbox 4</label>
			</li>
		    </ul>
		</dd>
		<dd class="input-info"><em>Information about the radio buttons goes in here</em></dd>
	    </dl>
    </fieldset>
</form>