Advanced tableless forms

XHTML/CSS Add comments

I am always looking for easy ways to use less tables in my markup. When designing a website I always aim for no tables but in a web application I may cheat from time to time.

Some time ago, thanks to an article on quirksmode, I began creating tableless forms. This trick was great for simple forms but I kept using tables for really complicated forms.

For example, if I needed a 2 or 3 column form I would just use a table because figured it was easier. Well, after playing with the orginal code from quirksmode I have found a simple way to create multi column forms with little to no extra effort. It just requires you to think about it ahead of time.

Let’s take a look at a simple example based on the original tableless form.

<!-- ----------
HTML
---------- -->
<form>

	<label for="firstname">First Name:</label>
	<input type="text" name="firstname" id="firstname"/><br/>

	<label for="lastname">Last Name:</label>
	<input type="text" name="lastname" id="lastname"/><br/>

	<label for="emailaddress">Email Address:</label>
	<input type="text" name="emailaddress" id="emailaddress"/><br/>

</form>
/* ----------
CSS
---------- */
label, input {
	display: block;
	float: left;
	width: 150px;
	margin-bottom: 10px;
}
label {
	width: 110px;
	text-align: right;
	padding-right: 10px;
	margin-top: 2px;
}
br {
	clear: left;
}

That code would produce a form that looked like this:

simple tableless form

But what if you want to do something a bit more advanced, say, like this:


advanced tableless form

We have made the form 2 columns and thrown in a select box and a textarea. Normally I would be preparing to use tables in a situation like this until a stopped and realized how easy it would be to do without tables.

The CSS hardly changes.

/* ----------
CSS
---------- */
label, input, select, textarea {
	display: block;
	float: left;
	width: 150px;
	margin-bottom: 10px;
}
label {
	width: 110px;
	text-align: right;
	padding-right: 10px;
	margin-top: 2px;
}
textarea {
	height: 50px;
}
br {
	clear: left;
}

All I’ve done is add the select and textarea selectors to the first definition. I also added a specific definition to make the textarea 50 pixels high.

Now the HTML doesn’t change too much either. There is just more of it, obviously.

<!-- ----------
HTML
---------- -->
<form>

	<label for="firstname">First Name:</label>
	<input type="text" name="firstname" id="firstname" tabindex="1"/>

	<label for="address">Address:</label>
	<input type="text" name="address" id="address" tabindex="5"/><br/>

	<label for="lastname">Last Name:</label>
	<input type="text" name="lastname" id="lastname" tabindex="2"/>

	<label for="city">City:</label>
	<input type="text" name="city" id="city" tabindex="6"/><br/>

	<label for="emailaddress">Email Address:</label>
	<input type="text" name="emailaddress" id="emailaddress" tabindex="3"/>

	<label for="province">Province:</label>
	<select name="province" id="province" tabindex="7">
		<option value="0">--Select a Province--</option>
		<option value="AB">Alberta</option>
		<option value="BC">British Columbia</option>
		<option value="MB">Manitoba</option>
		<option value="NB">New Brunswick</option>
		<option value="NL">Newfoundland</option>
		<option value="NS">Nova Scotia</option>
		<option value="ON">Ontario</option>
		<option value="PE">Prince Edward Island</option>
		<option value="PQ">Quebec</option>
		<option value="SK">Saskatchewan</option>
	</select><br/>

	<label for="comments">Comments:</label>
	<textarea name="comments" id="comments" tabindex="4"></textarea>

	<label for="postalcode">Postal Code:</label>
	<input type="text" name="postalcode" id="postalcode" tabindex="8"/><br/>

</form>

What you should notice is that the markup creates the fields from left to right. I have also added a tabindex to each field so that you can tab through them from top to bottom. So, the tabbing would start on the First Name field tab to the bottom on the left hand side fields then move tot he top of the right side fields and tab to the bottom of that column, exactly how it would if I had created the form with tables.

So in the end we have nice clean markup for our more advanced form with hardly any extra CSS and no messy tables. Enjoy!

kick it on DotNetKicks.com

Popularity: 16% [?]

If you liked this article consider subscribing to my free rss article feed to automatically get new articles in your feed reader.

5 Responses to “Advanced tableless forms”

  1. Kevin Jensen Says:

    Very cool!

  2. Stephen Orr Says:

    Trouble with this technique is, it breaks linearity for people who have CSS turned off.

  3. Justin Says:

    That is true so text only browsers or screen readers may display the fields in the wrong order but in regular browsers is that really a problem? I guess that depends on your target audience and whether that is an issue in a particular situation.

    For me I am either designing intranet applications or basic websites so this usually is not an issue for me.

  4. jerry dever Says:

    how does the text reply look? i am not sure how to get labels included in the reply that comes via email.

  5. Justin Says:

    The labels do not submit with the form they are for semantics and accessibility.

Leave a Reply

WP Theme & Icons by N.Design Studio
Entries RSS Login