Forms don’t have to be ugly and boring, and certainly don’t have to be inside tables to look nice and aligned.
In this post we’ll take look at how to style a beautiful form using the power of semantic HTML and CSS.
The beginning: HTML markup
Let’s begin by creating a simple feedback form. Here’s an example of the markup for one:
<form action="form.php">
<p>Send us your comments and feedback:</p>
<ol>
<li>
<label for="name">Name</label>
<input type="text" name="name" id="name" />
</li>
<li>
<label for="email">Email</label>
<input type="text" name="email" id="email" />
</li>
<li>
<label for="website">Website</label>
<input type="text" name="website" id="website" />
</li>
<li>
<label for="message">Message</label>
<textarea name="message" id="message"></textarea>
</li>
<li>
<button type="submit" id="send">Send</button>
</li>
</ol>
</form>
Breaking down the markup
I used an ordered list to wrap the form elements so each list item is a pair for label + input/textarea. This will not only make it a bit easier to add the style to the form, but will also make the form look better and visually make more sense when no styles are applied to it.
Every element in the form has its own label (except those that have their value specified within the element itself, like buttons and submit inputs).
You might have previously seen forms on other websites that allow you to select the labels, resulting in the right input will becoming highlighted. This removes the necessity of having to point precisely to the input fields – isn’t it more user friendly?
The way to achieve this is by defining which label belongs to which input (or textareas, selects, etc.), and you do that with the for attribute (in the labels) in conjunction with the id attributes in the inputs.
When creating the form, I didn’t use the fieldset or legend tags because our form is simple and short, so there’s really no point to separating it into more than one fieldset, and the paragraph explains what the form is about without being repeated by the screen-readers with each and every label (like legends are).
It’s also worth noting that in this example I chose the button tag, instead of the input tag, for the submit button. This decision was made to give you more options in terms of what you can visually do with it.
Adding the style
Moving onto the CSS part of the form, we’ll start by resetting the default styles, adding some style to our form tag – font, background, margins and padding. We’ll also add a bottom margin to our paragraph.
body {
margin:0;
padding:0;
}
p {
margin:0 0 10px 0;
padding:0;
}
form {
font:13px Georgia, "Times New Roman", Times, serif;
background:#eee;
margin:20px;
padding:10px 20px;
width:330px;
}
Now, let’s style the ordered list and then make some tweaks for the one that holds the submit button (to which we gave a specific id of “send”).
form ol {
list-style:none;
margin:0;
padding:0;
}
form li {
padding:6px;
background:#e1e1e1;
margin-bottom:1px;
}
form li#send {
background:none;
margin-top:6px;
}
Our form is taking shape now, but we still need to style the labels, the inputs and the textarea. We should also add a different style for when our inputs are in focus.
form label {
float:left;
width:70px;
text-align:right;
margin-right:7px;
color:#0066CC;
line-height:23px; /* This will make the labels vertically centered with the inputs */
}
form input,
form textarea {
padding:4px;
font:13px Georgia, "Times New Roman", Times, serif;
border:1px solid #999999;
width:200px;
}
form input:focus,
form textarea:focus {
border:1px solid #666;
background:#e3f1f1;
}
Last, but certainly not least, let’s add some eye candy to the Send button:
form li#send button {
background:#003366 url(images/css-form-send.gif) no-repeat 8px 50%;
border:none;
padding:4px 8px 4px 28px;
border-radius:15%; /* Don't expect this to work on IE6 or 7 */
-moz-border-radius:15%;
-webkit-border-radius:15%;
color:#fff;
margin-left:77px; /* Total width of the labels + their right margin */
cursor:pointer;
}
form li#send button:hover {
background-color:#006633;
}
So what have we added in this last step? We changed the default border (border), background colour (background) and text colour (color) of the button to our own needs. We also added some padding to give the text some space to breath and extra left padding to add a little icon on the background.
The properties border-radius, -moz-border-radius and -webkit-border-radius are CSS3 properties that add rounded corners to our element. Because the border-radius property is still not widely implemented among browsers, we also have to use the browser specific properties that will make it work on Firefox (-moz-border-radius) and Safari (-webkit-border-radius). As you may have guessed, none of the available versions of Internet Explorer supports this feature, so it will be an added detail for more compliant browsers.
For the button to be nicely aligned with the other inputs, we have to add the 77 pixels of left margin (which is the sum of the 70 pixels of the labels + 7 pixels for their right margin).
The cursor:pointer bit is not really necessary, but we’ll then make sure that when a user hovers over the button, the cursor will change to the hand. For browsers other than IE6, it will also change its colour to green (thanks to the form li#send button:hover property).
Conclusion
When it comes down to creating forms, there are actually a lot more things that you can do than meets the eye, just by using some simple CSS. My point in this blog post has been to show that there’s no need to use a table to create visually attractive and usable forms. Especially when we can just as easily have a semantically correct and beautiful form with just a few lines of CSS and some extra hooks in your markup.
View example [download id=”5″]
P.S.: Don’t forget to give proper credit to famfamfam (if you use it), for the beautiful Send button icon, that is part of the Silk icons set.
Ciao!