CSS Forms

Posted on January 26, 2007 in Tutorial | 2 Comments »

Everyone hates forms.

They are hard to style so that they work with your site design. They are hard to make them accessible. Yeah, yeah we have heard it all. But in reality, they are not that hard to do.

Since every other web developer/designer has their own method, I thought I would share my two cents.

When thinking through all of the HTML elements to find something that makes sense for forms, there are many options.

• Unordered List
• Ordered List
• DIVs
• Paragraphs
• Tables (Yes some people still use tables for forms)

There are probably others. But I like to use a more uncommon element: a Definition List. It is perfect for the job. You have got the definition term, which is essentially like the label. Then you have got the definition description, which is basically the actual form element.

Let’s start with some un-styled markup:

<form action="#" method="post" name="sendToFriendForm" id="sendToFriendForm">
	<dl class="forms">
		<dt><label for="name">Your Name:</label></dt>
		<dd><input name="name" id="name" type="text" /></dd>

		<dt><label for="senderEmail">Your Email Address: <span class="required">*</span></label></dt>
		<dd><input name="senderEmail" id="senderEmail" type="text" /></dd>

		<dt><label for="recipientEmail">Friend's Email Address: <span class="required">*</span></label></dt>
		<dd><input name="recipientEmail" id="recipientEmail" type="text" /></dd>
		<dd class="help">Use commas to separate multiple email addresses.</dd>

		<dt><label for="sex">Sex</label></dt>
		<dd class="radio"><input name="sex" id="male" type="radio" /> <label for="male">Male</label> <input name="sex" id="female" type="radio" /> <label for="female">Female</label></dd>
		<dt><label for="message">Message:</label></dt>
		<dd><textarea name="message" id="message"></textarea></dd>
	</dl>
	<button type="submit">Submit »</button>
</form>

I have created the page so you can see the output. Even un-styled, this form doesn’t even look bad. But lets add some style:

	form {
		margin: 0;
		padding: 0;
	}

	dl.forms {
		float: left;
		width: 100%;
	}

	dl.forms dt {
		margin: 0;
		padding: 10px 0 0 0;
		clear: left;
		float: left;
		width: 175px;
	}

	dl.forms label { font-weight: bold; }

	dl.forms dd {
		margin: 0;
		padding: 10px 0 0 0;
	}

	dl.forms dd.help {
		clear: left;
		padding-top: 2px;
		font-size: 90%;
		color: #999;
	}

	dl.forms input, dl.forms textarea { width: 300px; }

	dl.forms dd.radio input { width: auto; }

	dl.forms textarea { height: 150px; }

	.required {
		color: #FF0000;
		font-weight: bold;
	}

I don’t think I need to go step by step through that because it is pretty simple styling. I have created the styled page for you to see.

I personally like forms that have the label and the input element on the same line, but that’s just me. It is pretty flexible, try resizing the font two times. Still very readable. You could easily do the widths in ems or percentages; I just chose to use pixels since I don’t have any parent element containing it.

Should be pretty good in all browsers, especially since we didn’t do any crazy CSS. I know it looks good in FF, IE6 and IE7. I believe it works fine in Safari and Opera.

Obviously this isn’t the be all and end all to stying forms with CSS. But it is something to start with. So, go out and make it better. But be sure to share what you have created.

• Grab the RSS feed of comments for this entry