Official website for Web Designer - defining the internet through beautiful design
FOLLOW US ON:
Author: Dave Harfield
30th April 2009

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

Make your forms beautiful with 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

Make your forms beautiful with CSS

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

Make your forms beautiful with CSS

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

Make your forms beautiful with CSS

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: ,
  • Tell a Friend
  • Follow our Twitter to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.