Go Back   Aioforum > Aio Forums Zone > Tutorial Section > Programming > CSS and XML


Your Ad Here

Donation Goal
Goal amount for this month: 600 USD, Received: 92 USD (15%)
Donation Will Be Used To Pay for our hosting Service, software licensing fees, and maintenance Costs Only! - Annoying Pop-ups removed from Aioforum..Glad you will help now!

Post New Thread Reply
 
Share LinkBack Thread Tools Display Modes
Old 06-14-2008, 06:43 AM #1 (permalink)
KoOL's Avatar
KoOL
Cr@zY Ai0 MeG@ RetIREd


Join Date: Oct 2007
Location: In Your Mind
Age: 27
Reputation: 190133
Posts: 12,525
Thanks: 349
Thanked 17,742 Times in 2,876 Posts
 

Improving the usability of forms with CSS :focus

Here is a really simple technique that will help Firefox (along with its spinoffs, flock...), Safari and Opera users better enjoy online forms. I am sure most of you have used safari at least once. When using it you would have noticed that anytime you go to input information into a form field the field displays a light blue glow around the field. This greatly helps a user find which field is selected as well as it is just overall more visually pleasing.

This type of effect can be duplicated using the CSS selector :focus. Problem is it currently only works in Firefox, Opera, and Safari so poor IE users are out of luck. This includes IE7 users. So that's a good 70% of the online users who will not see these effects. This percentage is dropping somewhat quickly though as people adopt more modern browsers. Also, there are ways to simulate the focus selector using javascript so that it works in IE but to me it's too much work for what it's worth, and since the :focus selector has no negative effects in IE there is no reason not to use it. Enough bickering, now on to how it is accomplished.

We are going to add some basic styles to our form first.

input, textarea {
width:200px;
color: #333;
background: #eee;
border:1px solid #666;
padding:3px;
}
Check it out so far in action.
You will notice there is no change when the user clicks on a field. It's somewhat hard to see which form field is selected until you start typing in text. So now we want to change how the field looks when the user clicks on an input field. To do this we will need the following.

input:focus, textarea:focus{
border:1px solid #333;
background:#FFF;
}
Check it out so far in action.
As you can see the :focus selector works basically like a :hover for a link, but it is applied to form elements.
In this example these slight color changes can make it easier for the user to see what part of the form they are on. As well as the form being more visually appealing to the user. Combining this tip along with my previous tips about background images within form fields, you could create quite a visually attractive, and user friendly form.
Remember forms don't have to look like crap. With a little time and some css, they can be one of the best parts of your design.. Now if only I listened to my own advice more often.
__________________
For Download Links U need to Press Button
[/CENTER]

Please don't PM me For Posts, Request and Not Working Threads. Use Button.
KoOL is offline

Reply With Quote
The Following User Says Thank You to KoOL For This Useful Post:
barnick (06-28-2008)
Click here to Donate to remove the Advertisments.
Reply

Tags
css, focus, forms, improving, usability

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On


Similar Threads
Thread Thread Starter Forum Replies Last Post
Improving system performance of your Vista hackproof Windows Vista 2 09-10-2008 07:58 PM
Focus DVD-CD Cover Maker ver.2.1 PaNkAJ Other 0 05-01-2008 02:36 AM
Fast Forms 2.991 KoOL Appz Zone 0 03-15-2008 06:28 PM
Focus DVD Copy 1.9 ijhtio Appz Zone 0 01-10-2008 08:36 PM
Balanced Website Design: Optimising Aesthetics, Usability and Purpose sharad_mlk Garbage Bin 0 05-01-2007 01:50 AM


All times are GMT. The time now is 07:04 PM.


Powered by vBulletin® Version 3.8.4
Copyright ©2000 - 2009, Jelsoft Enterprises Ltd.

Aioforum Tinydl PhazeDDL Warez InfiniteWarez.com - Free Full Version Downloads! RapidShare Links

Katz Downloads Freshwap Downloads Rapidshare Movies Warez-BB Rapidshare Forums
Rapidshare Forums Rapidshare Search Full Downloads Share Wallpapers Mediafire Movies