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;
}
to find out about all the latest web development,
news, reviews, previews, interviews, features and a whole more.
Thanks a lot..
I definitely need to work on this. Thanks!
yeah… I like it. Thanks
its wonderful share and its really helpful for new comer CSS developer
Thanks for the tutorial! There are not very many good examples of stying forms on the net.
Try this Javascript refinement on the form… it works out better.
what a great course . Thanks a lot !
谢谢 ,写的很好
Thank you for your input.
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
Good tutorial. The form provided me with new ideas for my next form.
Thanks again
Nice :) Cool, Thanks for input :D
Thanks. Nice tutorial.
One of the best form examples I’ve seen in a while. Good job!
me too. like this one
Thanks lot!
very nice..
Good guide, picked up a few ideas. Many thanks! Ted
Nice helpful stuff. Thanks
Good guide, picked up a few ideas. Many thanks! Ted
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
Wow! Fantastic designs on this tutorial. I would really love to try this out on my own. Thanks for posting this one.
another wonderful tutorial.
You have written a very informative post. I came across your blog via google.com by searching relevant information. I have bookmarked your site and sent the link to sme of my colleagues are will also find that useful.
Thanks lot!
A Brilliant article in all, thankyo for sharing it, i’m sure the info here will be put to good use :)
found this blog interesting thanx for sharing
CSS has greatly helped in web design. You have provided a good tutorial about css.
This is a very useful tutorial, thanks for sharing. Small design ellements and CSS can make a huge difference to the appearance of a web form.
I keep checking the website for new tuts but this one has been very interesting and knowledge full . GREAT guys keep it up
Hm, I’m ok with this nevertheless not 100 % convinced, so i am going to research even more.
whatever you have to says i wil try to update on my company websites & clients sites. really it give some attractive look. thank you for share this post..
Its really nice and wonderful tutorial.so we learn more with the help of this.so keep share always…..
Post a live demo dude
Beardsley, eh? It might be worth the flight out there.
You really make it seem so easy with your presentation but I find this topic to be really something which I think I would never understand. It seems too complicated and very broad for me. I am looking forward for your next post, I will try to get the hang of it!
This is sweet! Thanks!!!
These are great starter points. I’ve always despised having to work with forms, but it’s a very necessary evil.
Very good design keep it up. Thanks
nice form design
nice material good one!
really its very useful for >a href=”http://websitedesigningcompanylondon.co.uk”>website designing company content.
by: Website Designing Company London Website Development Company London.
Good teaching..;.
Nice blog and great info thankyou for sharing i’m sure the info here will be useful