Official website for Web Designer - defining the internet through beautiful design
FOLLOW US ON:
Subs House Ad
Apr
30

Make your forms beautiful with CSS

by Dave Harfield

11 Fix the explanation
We’ve got a nice result for the labels, but we also need to sort out the text at the top of the form. This star is also located inside a span tag, but the span itself has a class of required in this case. The CSS is a little more complex because we can’t hide the whole span – we’re going to need that to act as the container for the background image. Instead, we’ll have to set the line-height, vertical align and use a negative text indent to hide the *. Add the rules below to the style sheet.

p span.required {
display: inline-block;
vertical-align: middle;
line-height: 3.4em;
width: 25px;
line-height: 3.4em;
text-indent: -10000px;
overflow: hidden;
background: transparent url(required.gif) no-repeat center right;
}

12 Add definition to sections

p64step12
The sections of the form, as defined by the fieldsets, are useful – especially for screen readers – but look a little ‘default’. We’ve designed a nice background image to complement the rest of the design and make the most of the fieldset characteristics. Replace your existing fieldset section of CSS with the code below to load the background graphic into each fieldset.

fieldset {
margin: 10px 0 00;
padding: 0;
background:transparent url(fieldsetbg.gif)
no-repeat bottom right;
}

13 Selectively remove the background

p64step13

The fieldset background makes a big difference to the feel of the whole form, but it isn’t always desirable. Have a look at the last fieldset, which only contains the submit button. It doesn’t really make sense to have either a border or a background to this fieldset, so let’s get rid of both by adding the code below at the bottom of your CSS file.

fieldset#submitform {
background-image: none;
border-style: none;
}

14 Add other elements to suit

p64step14

We’ve left room in this template to accommodate error feedback to the right-hand side of the input elements. Alternatively, you could add a space beneath each field for your error-handling feedback to the user. In this case, we’re going to handle form validation server-side so there’s no need to include error handling, but read last month’s tutorial on jQuery validation to learn how to achieve the effect you see here.
fieldset#submitform {
background-image: none;
border-style: none;
}

15 Test in all browsers

p64step15

We’ve deliberately chosen rules that will work across all browsers, and avoided PNG files for our design elements to accommodate Internet Explorer 6 without having to use any browser-specific hacks, but you should still conduct a full test of your forms in all browsers to make sure you’re not excluding any users from being able to use your page. By ensuring you use a semantic, accessible approach to the HTML and conducting a thorough cross-browser check, you can guarantee your forms will be user-friendly and nice to look at.

Pages: 1 2 3 4

Bookmark and Share

39 Comments »

What's your opinion?

Add your comment below, or trackback from your own site. You can also subscribe to these comments via RSS.

Be nice. Keep it clean. Stay on topic. No spam.