Author: Dave Harfield

30th April 2009

40 comments

Make your forms beautiful with CSS

Forms are a mainstay of the web, but too little thought is put into their appearance

Forms are a mainstay of the web, but too little thought is put into their appearance. This is where some CSS comes in

Forms are an essential part of your website. Users will participate and give feedback to your site through them, whether your site is a social community, an eCommerce store or just a random page with a humble contact form. Why, then, are forms so often left to the browser’s default appearance when so much time and energy is spent on creating beautiful page designs?
In this tutorial, we are going to examine how to take a standard form and then make it special with some simple CSS tricks and techniques. We will improve the usability, aesthetics and layout, while picking up design cues from the existing design elements.
We have provided the HTML page on the disc, but will only be adding and changing CSS in this tutorial. To learn more about why we have coded the HTML as we have, and to pick up some tips on how to structure your own HTML for maximum semantic value and accessibility, then read the In Detail section at the end of this tutorial.

Download all the files needed for this tutorial here http://www.webdesignermag.co.uk/tutorial-files/issue-152-tutorial-files/

This tutorial originally appeared in issue 152 of Web Designer magazine and was written by Sam Hampton-Smith

01 Load HTML and CSS

To begin, open up the index.html and screen.css files in your favourite editor. Preview the page in your browser to get a feel for the look of the page and form before we start. We’re only going to edit the CSS, but keep the HTML file open so you can cross-reference the rules to the mark-up. Preview the changes in your browser after each step.

02 Add the basic rules

The first area to look at involves adding some basic rules to add padding and margin to the fieldset and legend elements. These rules simply add a margin to the top of each fieldset. Right now, add the code below to your style sheet under the /* Begin Form Elements */ comment.
fieldset {
margin: 10px 0 0 0;
padding: 0;
}

legend {
margin-left: 1em;
}

03 Finish the foundations off

We’ve formatted the form elements inside ordered lists, which is great for usability. Also, in a circumstance where the style sheet doesn’t load for whatever reason, the form will degrade more gracefully as a result of the default behaviour of the list items. We don’t want that default appearance when the style sheet loads successfully, though, so let’s remove the numbers from the list elements and apply some padding at the same time. Add the code below to your style sheet.
fieldset ol {
padding: 10px 10px 0 10px;
list-style: none;
}
fieldset li {
position: relative;
padding-bottom: 1em;
}

04 Style the legend

Let’s make more of the legend tags (section headings). To co-ordinate with the rest of the page, we’re going to style these to be reversed out, have a bigger font size and all be upper case. Change the rule you set for the legend tag in Step 2 to read as shown in this step. Note that we’ve added some padding to the legend as this will ensure that the text doesn’t touch the edge of the reversed-out background.
legend {
text-transform: uppercase;
font-size: 1.3em;
padding: 5px;
margin-left: 1em;
color: #ffffff;
background: #493F0B;
}

05 Align the fields

One of the reasons designers used to use tables to lay out forms was the ease of aligning elements in a uniform manner. CSS isn’t as immediately obvious, but has some very powerful selectors available. We’re going to align all our input elements nicely. Add the code below beneath the existing rules in the style sheet. We’re setting a fixed width for the label element and floating it left. This has the effect of pushing the input fields out to the right the same amount as the width plus the margin (here, five pixels). Finally, we set the text to align to the right to butt the labels up against the form fields.
label {
position: relative;
clear: left;
float: left;
width: 15em;
margin-right: 5px;
text-align: right;
}

Pages: 1 2 3 4

Tags: CSS, forms

Did you enjoy this article? Share it!

Follow our

to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.

40 Comments »

Hendy Prima said:

Thanks a lot..

# 3 May 2009 at 4:25 am

Franky said:

I definitely need to work on this. Thanks!

# 4 May 2009 at 1:00 am

Artover said:

yeah… I like it. Thanks

# 4 May 2009 at 8:50 am

Rockstar said:

its wonderful share and its really helpful for new comer CSS developer

# 7 May 2009 at 10:37 am

Bill Lowden said:

Thanks for the tutorial! There are not very many good examples of stying forms on the net.

# 7 May 2009 at 2:50 pm

Rob said:

Try this Javascript refinement on the form… it works out better.

# 7 May 2009 at 11:24 pm

LED flashlight said:

what a great course . Thanks a lot !

# 1 June 2009 at 4:51 am

wnick123 said:

谢谢 ,写的很好

# 24 June 2009 at 6:15 am

Andy said:

Thank you for your input.

# 28 July 2009 at 2:37 am

Organ Grinding Monkey said:

This was a great tutorial, I did pick up 1 or 2 new techniques that I’ll use in my next form. I do however have a question, how would you go about creating a Li with 2 text boxes within it i.e. Lets say you want to have title and first name next to each other or if the space for the fieldset requires a 2 or 3 column layout?

A tutorial showing that would be great

# 31 July 2009 at 1:12 pm

Rosile said:

Good tutorial. The form provided me with new ideas for my next form.

Thanks again

# 16 August 2009 at 6:35 am

Clécio Oliveira said:

Nice Cool, Thanks for input

# 28 August 2009 at 12:39 am

Akmal Adnan said:

Thanks. Nice tutorial.

# 10 September 2009 at 1:28 am

Web Design Rob said:

One of the best form examples I’ve seen in a while. Good job!

# 5 November 2009 at 11:15 pm

Joseph Kurt Leonardo said:

me too. like this one

# 25 February 2010 at 4:15 am

Elijah said:

Thanks lot!

# 17 March 2010 at 11:22 am

ranjit said:

very nice..

# 30 March 2010 at 7:29 am

Yorkshire Web Design said:

Good guide, picked up a few ideas. Many thanks! Ted

# 22 April 2010 at 5:59 pm

Aditya said:

Nice helpful stuff. Thanks

# 26 April 2010 at 11:50 am

hermes kelly bag said:

Good guide, picked up a few ideas. Many thanks! Ted

# 9 July 2010 at 2:53 am

Web Design Southampton said:

It is so important to keep on top of the latest techniques, articles like this are great for improving skills and always giving the end user a good experience when visiting your website. Thank you

# 9 July 2010 at 3:04 pm