Style Your Form Fields with Icons to Improve Usability

Are you new here?

If this is your first time visiting our website, welcome! Learn more about us and what we do, or look through our complete blog archives for more good ideas.

From a usability standpoint, long forms with plain-text labels can be quite boring visually. One way to avoid this problem is to use icons within your input fields to visually indicate what the field is asking for. It’s a nice design touch that you as a designer can do to help make your forms a bit more usable.

The reason I bring up this topic is because last week, I was installing the Search Everything plugin on this blog, and had to decide how to style the new search form. I knew from the start that I wanted to include a little icon in it to convey its purpose; I had seen that done elsewhere and really liked the look of it, and felt that it would work here.

When and how to use icons

This is a nice design effect, and I believe that it could have a place on most websites, in one form or another. But here are a few pointers that I think are worth mentioning regarding when and how to use icons on your forms:

• Use sparingly – Icons shouldn’t be used within every input field in all the forms on your website. It will work best on forms with a small number of input fields – search bars, contact forms, and blog comment forms, for example. On shorter forms like these, you can use it on all the input fields without making it seem like you went overboard.
• You still need a label – You’re not using an icon as a replacement for an input field’s label – you’re using it as a way to accentuate the label. An icon can give some extra usability and design benefits, but that’s presuming that your form is already well-designed and usable to begin with. (If they’re not, you might want to read through an earlier post I wrote about how to design your forms to emphasize their usability.)

Step-by-Step Instructions

For those of you who aren’t reading this on my website and aren’t able to scroll up the page to see the search for yourself, here’s what my search field looks like:

If you’re interested in creating a similar look on your website, here are the steps I went through to make my search field look that way, complete with the styles that I used in my CSS to achieve that look.

1. Step 1 – Create the blue outer wrapper that the search bar resides in. This element isn’t totally necessary, so feel free to skip this step if you want to. (One note: I used a <div> tag here, but you could use a <fieldset> instead – it would do the same thing.)

   #search {
   width:230px;
   padding:10px;
   border-radius:5px;
   -moz-border-radius:5px;
   -webkit-border-radius:5px;
   background-color:#98afc8;
   background-image:url(images/search_bg.png);
   background-position:bottom;
   background-repeat:repeat-x;
   border:1px solid #849ab2;
   text-align:left;
   height:1%;
   overflow:hidden;
   }

2. Step 2 – Create the actual search bar. What you’re doing here is simply creating the <div> tag that the input field will be placed within; the background image for this <div> will be your icon. Just make sure to leave enough padding on the left so that the input field doesn’t overlap with the icon.

   #search #searchField {
   background-image:url(images/search.png);
   background-position:10px;
   background-repeat:no-repeat;
   background-color:#ffffff;
   border:1px solid #849ab2;
   border-radius:10px;
   -moz-border-radius:10px;
   -webkit-border-radius:10px;
   height:1%;
   overflow:hidden;
   padding:0 20px 0 34px;
   float:left;
   margin-right:10px;
   }

3. Step 3 – Style the actual input field. I want it to be seemingly invisible within the <div> tag, so I’m making both the border and background color of it white, which will match the color of the <div> tag.

   #search #search_field input {
   border:1px solid #ffffff;
   background-color:#ffffff;
   }

4. Step 4 – Create the submit button that people will click on.

   #search button {
   padding:3px;
   background-color:#da5e2a;
   color:#ffffff;
   font:bold 13px Arial, Helvetica, sans-serif;
   border:none;
   margin-top:3px;
   cursor:pointer;
   border-radius:5px;
   -moz-border-radius:5px;
   -webkit-border-radius:5px;
   }

Here’s how the final HTML code will look:

<div id="search">
<div id="searchField">
<form method="get" id="searchform" action="http://www.addicottweb.com">
<input type="text" value="Search" onblur="if(this.value=='') this.value='Search';" onfocus="if(this.value=='Search') this.value='';" title="Enter the terms you wish to search for" class="srch-txt" name="s" id="s" size="15" />
</div>
<button type="submit" class="SE5_btn" id="searchsubmit">Go</button>
</form>
</div>

What if you want to style multiple input fields?

My approach works well if you’re only styling one input field. But if you wanted to use icons within multiple input fields, my way isn’t the best solution. You would have to add multiple styles for each icon you’re using, which would make your CSS more bloated than necessary.

Fortunately, that’s where Javascript comes in. As I was researching this topic, I came across a good article by Janko Jovanovic where he describes how to accomplish this technique using Jquery to style multiple input fields. This automates the process a bit, and helps you keep your CSS to a minimum.

Thoughts?

If you’re a web designer, what kinds of websites do you think this would work well with – blogs only, or other websites too? Do you think that it should be used selectively, such as for search bars (which you currently see), or do you think there’s a greater need for this? Share your thoughts using the comment form below!

Trackbacks/Pingbacks

1. CSS: style Forms and Search fields « My Graphic Friend's blog says:

   January 8, 2010 at 2:40 pm

   [...] style Forms and Search fields http://www.addicottweb.com/2009/03/style-form-input-fields-with-icons-to-improve-usability/ This entry was written by Gnocchi, posted on January 8, 2010 at 7:40 pm, filed under CSS. [...]

   Reply

• Get the
  Feed
• Get Email
  Updates