Make your forms beautiful with CSS
11 Fix the explanation
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
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
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
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
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.
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!!!