/CSS/ Designing simple, accessible forms
07/12/2006 | Filed under Develop > CSS
John Oxton demonstrates how it’s possible to keep forms simple in order to attract and retain clients, while also ensuring they are in keeping with your site
I want to start with a quote from a web developer from who I take inspiration and, when he’s offering it, advice. Garrett Dimon (www.garrettdimon.com) has the following to say on the subject of forms:
“There are many things worth investing time to develop and implement. Customising the look and feel of form fields is absolutely not one of them. This is especially true if the method involves JavaScript to change the appearance. Browser form fields may not be the prettiest things in the world, but people are used to and comfortable with them. It’s not surprising that the sites I come across with custom-designed forms often have significant usability problems.
Don’t focus on breaking one of the few remaining consistent interface conventions only because you think it looks better. The average person is comfortable using their browser and that browser’s style of form fields. By changing the appearance of those form fields, not only are you wasting time on a frivolous aspect of design, but you’re also adding additional code and potential usability problems. The goal is less code and more stable code.
There’s no point adding code to your site to change the behaviour of aspects that work very well as they are. That time would be much better spent improving the experience in areas that matter and provide clear value.”
In the wrong hands that incredibly long piece of advice could be very dangerous indeed. I don’t believe Garrett is suggesting for a minute that forms should just be bunged together as they always have, but just not bother with the luminous green border and bright red background. No, I think before you can really read that quote properly you have to understand a little about forms and the HTML behind them. I’m going to show you how to approach form design, and when I’ve finished, the quote will make much more sense.
The most important point to remember is forms are often mission critical. They are the route via which an existing, or potential client will get in touch, the way they’ll send you vital information, or make the leap from interested browser to purchaser of services or products. Forms, therefore, should be easy to use and accessible. But they’re often confusing monsters – it would be interesting to find out how much money is lost in sales through bad form design.
So what makes for good form design? In this case, CSS has only a little to do with it, though, as you’ll see later on it does have an important role to play. For the most part, though, HTML has all the tools required to put together a good looking, useable form.
Input tags
These days everyone knows the input tags – they’re the ones you see day in, day out taking usernames, passwords, comments, email addresses, telephone numbers, submit buttons, cancel buttons, search forms and credit card details, but so often they’re let loose without labels, fieldsets or legends. Despite this, they’re the unsung heroes of form design and development, and have an important role to play. Next I’m going to take a quick look at some form HTML and then look through the less familiar tags:
<form action=”sendit.php” method=”post”>
<fieldset>
<legend>Tell us a little about yourself</legend>
<label for=”your_Name”>Your name: <em>(required field)</em></label>
<input type=”text” name=”your_Name” id=”your_Name” class=”required_Field”>
<label for=”your_Email”>Your email address: <em>(required field)</em></label>
<input type=”text” name=”your_Email” id=”your_Email” class=”required_Field” >
<label for=”your_Postcode”>Your postcode:</label>
<input type=”text” name=”your_Postcode” id=”your_Postcode” class=”required_
Field” >
</fieldset>
<fieldset>
<legend>Tell us a little about your preferences</legend>
<label for=”favourite_Food”>What’s your favourite food?</label>
<input type=”text” name=”favourite_Food” id=”favourite_Food”>
<label for=”favourite_Movie”>What’s your favourite movie?</label>
<input type=”text” name=”favourite_Movie” id=”favourite_Movie”>
<label for=”favourite_Car”>What’s your favourite car?</label>
<input type=”text” name=”favourite_Car” id=”favourite_Car”>
</fieldset>
<input type=”submit” value=”Send it!”>
</form>
The first tag you may notice is the fieldset and it’s used to group the form elements. They’re grouped together because they share something in common and that grouping is described by the next tag, the legend.
The legend is used to describe the group of form elements. It’s worth keeping in mind that this tag is meant to be human-readable, which is why I’ve tried to make the examples friendly and welcoming while remaining as clear as possible.
Together, fieldset and legend earn you big brownie points when it comes to accessibility (www.w3.org/WAI) but they also provide some handy hooks on which to hang some styles. Of course, as Garett’s opening quote says, you shouldn’t want to add style simply for the sake of it, so what’s the justification in this case? Well, by adding a little CSS to the fieldsets you can make your forms a little more useable, too, by showing the clear grouping and also breaking the form up a little so it looks like manageable chunks as opposed to the long slog through a large scrolling form. On this occasion I’m simply going to tidy up the default border and add a background colour:
fieldset{
border:1px solid #666666;
background-color:#cccccc;
}
Additionally, I want to make the legend bigger and bolder than the rest, and the CSS should be written in just those terms:
legend{
font-size:bigger;
font-weight: bolder;
}
Okay, so there are no design awards coming my way for this, but you can probably see the potential for some pleasant and useful stylings.
If you’ve been following this tutorial in your browser you’ll have noticed that the form elements are all very neatly lined up horizontally, and while in some cases this might be ideal, more often than not a vertical line is what’s required. This can be achieved with just one line of CSS as long as you’re happy with the label being just above the input, and I’ll assume you are:
label{
display:block;
}
Again, this is pretty basic styling but this particular CSS trick does illustrate ways to reduce the amount of HTML needed to get a (visual) job done while keeping all of the accessibility points. What this did was change the label (visually at least) from an inline element to a block level-element, thus causing a line break to occur in visual browsers.
The label is another tag that will earn you big accessibility points. The for attribute should match the corresponding ID attribute within the input element and doing this bonds the two together, which is a good thing. A visual representation of this goodness can be seen in most modern browsers (although for reasons known only to Apple, not Safari) by simply clicking on the text contained within the label. You’ll note that clicking the label text will focus the cursor into the correct input element. It may not be something your average web user would think to do, but it’s a powerful idea nonetheless, and the keyword here is accessibility. It’s possible to apply a little CSS (for the more capable browsers) to show off this technique further:
input:focus{
background-color: #ffffcc;
color:#000000;S
}
Now click the label and you’ll note that the input that belongs to it gets a light yellow background. Actually if you click your mouse inside the input you’ll get the same effect but it shows how the label and the input can work together in this case to uphold, I would say, the ideals of Fitts’ Law (www.mezzoblue.com/archives/2004/08/19/fitts_law).
I applied colour because it’s generally accepted that if a background colour is applied to something, thus overriding the default, it’s sensible to also override the default font colour, too. You could have a little fun with this idea by doing something like this:
input{
color:#ccc;
}
Adding the code shown just above the input:focus rule in your CSS will have the effect of setting the text of an input field not in focus to a different, lighter, colour.
By wrapping the words (required field) in an em tag to give it more emphasis, it’s clear that this field must be filled in and that it’s important. In nearly all visual browsers the em tag will render in italics, which is a useful visual indicator, but there are also a number of other CSS techniques you can use to make these required fields really stand out. Again, keep in mind that the aim of this is simply to illustrate a point, not to win awards.
The first thing you could do is manipulate the em itself; make it bold and a different colour perhaps, maybe a nice shade of red (which all designers will hate):
em{
font-weight: bold;
color:#ff0000;
}
You’ll note from the HTML sample I gave earlier that the required fields have a class attribute within them that is conveniently called required_Field and, as you would expect, you can use this to give required fields a distinct look. In keeping with the tremendously ugly red bold emphasised text you can also give the left border of these required inputs a three-pixel solid red treatment:
input.required_Field{
border-left:3px solid #ff0000;
}
There is a problem with this: you may notice that even our minimal stylings have had an impact on the submit button. Normally this is going to be undesirable and there are a number of ways to solve the issue.
In keeping with the thinking that forms are best left with as little styling as possible, probably the best answer to this problem is to use classes on the input fields to target them for styling (as I did for required fields) rather than just styling inputs as a whole with CSS. This method will preserve the default stylings of any buttons and remove hassle further down the line, saving time for that allimportant blog reading!
Another method would be to use either an image as a button using <input type=”image” src=”theimage.gif” alt=”Submit button”> but this confl icts with issues such as letting browsers render forms according to their particular styles. In a similar vein the <button> tag is also available, which enables you to use a normal text link or an image as a button, but that causes the same problem. In addition, even used as a normal <button type=”submit>Submit</button> it will render as a grey Firefox-like button in Safari, something Safari users will not be used to, or particularly pleased about.
In the right hands, though, image-based buttons can be a great success, and an enviable addition to any site. Of course, the silver lining in this particular cloud is that you can, with good reason, put forward a good excuse why you should have virtually no styling on the forms.
There are lots of other form fields such as text areas, radio buttons, check boxes, drop-down menus and so on that I would like to cover but space is limited. Instead, the following links will provide you with further reading on the topic. Some of them may confl ict with things I’ve written here, but eventually you’re going to have to make your own decisions about form stylings based on the project and your client. Read more on the subject at the following sites:
* Styling form controls (tinyurl.com/naxt5)
* Simple Tricks for More Usable Forms (tinyurl.com/66po6)
* Accessible, stylish form layout (tinyurl.com/ad4zw)
* <button> the forgotten element (nickcowie.com/presentation/s5-button.html)
* Stylish, accessible forms (tinyurl.com/yvs6y)
* Create Accessible Forms with Dreamweaver 8 (tinyurl.com/nrql2)
* The Duality of Forms (tinyurl.com/pmtmy)
* Tableless forms (www.quirksmode.org/css/forms.html)
* Trimming form fields (tinyurl.com/7kwr3)
* Accessible HTML/XHTML Forms: Beginner Level (tinyurl.com/ehmvf)
* Improving Form Accessibility with DOM Scripting (tinyurl.com/husxo)
Bookmark with:
Comments
mark / 09/12/2006 / 17:53 / http://free-playstation-3.blogspot.com
Good tips. Thanks.
John Oxton / 09/12/2006 / 20:40 / http://joshuaink.com
It seems like a real shame that we have tinyurl links in brackets rather than the title of the articles being the actualy links...
Geoff / 11/12/2006 / 11:50 / http://www.crazypixel.co.uk/portfolio
Very nice points John,
As im sure most web monkeys find, forms are so very dull and tedious yet are so vital in importance for a site, with a little bit of planning and understanding lets hope we can keep form design clean concise and simple for the end user.
Geoff
jason / 11/12/2006 / 17:49
whats the point in using tinyurl's? seriously.
neil / 14/12/2006 / 10:16 / http://www.boroughmuir.edin.sch.uk/
And isn't it interesting that this comment form employs none of the suggestions above!
Mike Rowesoft / 14/12/2006 / 15:03
Yes neil, it is.
Mind you, these points are good ones.
Felicity / 19/01/2007 / 03:24
Being pedantic, shouldn't it be, "a web developer from <strong>whom</strong> I take inspiration" (1st line)?
That aside, this is a great article; whose advice I must implement, I fear (up to this point) my forms have been at best, disappointing...
Pop Stalin Design / 26/01/2007 / 17:36 / http://www.popstalin.com
It's so tempting to "prettify" these elements on a site but Garret makes a darn good point about leaving well enough alone!
Jasmin Maßat / 29/03/2007 / 23:24 / http://www.einemillioneurohomepage.de
Great and excellent article t’s realy helpful. Thanks again.
F. Hernandez / 30/04/2007 / 02:27 / http://www.maca-kapsel.de
hello from germany! I am new on the matter but i am learning. thxs
Kevin Francis / 01/08/2007 / 10:03
It's great to have articles like this, but I think those authoring the html examples needs to take a little more care.
I'm asuming the example html is supposed to be xhtml? If so then inputs must be self closing /> Also the submit button must have a parent block level element such as P, DIV, FIELDSET, (form dosen't count.)
Hope I'm not to critical.
JB / 24/09/2007 / 15:30
I like the articles here, but it seems that the more challenging problems are often overlooked. Text input boxes match up well to the non-table approach, but what about the other input elements? Are there ways to group checkboxes and select boxes similarly to avoid having to use tables?
george gurrola / 21/03/2008 / 18:33 / http://www.gurroladesign.com
good article... but when all is done... this form is pretty butt-ugly...
Steve / 26/03/2008 / 19:54 / http://www.gadgets4nowt.co.uk
You say that "these days everyone knows input tags" but I'm not sure we are all so familiar with the coding side. I certainly wasn't but am grateful for the code, it's something I will certainly be looking to use.
Lol @ George, I take it you didn't like the look of the form !
Derek / 01/04/2008 / 18:34 / http://www.gimme4free.co.uk/free-stuff/forums
Great article. Good form design is one of the most overlooked aspects of web design, yet is crucial to the success of any website. After all, once your client gets to the position of actually entering information into your site via your form, this is the moment of make or break. A poorly designed form may actually lose you customers. Aesthetics are not necessarily the be-all and end-all of form design either - you want a functional and intuitive layout above all else.
John / 28/04/2008 / 04:34 / http://www.nuesion.com
What do you guys think is the best way to authenticate users for posting (captcha, logic questions, math, etc)?
Eddie / 06/06/2008 / 21:37
As a solution for the "minimal stylings have had an impact on the submit button"....
Why not just implement the "input:focus" style as "fieldset input:focus"? Since the submit button is outside of a fieldset it should appear as a default button.
james / 01/08/2009 / 07:55 / http://www.hsonlinesolutions.com
It's great to have articles like this, but I think those authoring the html examples needs to take a little more care.
I'm asuming the example html is supposed to be xhtml? If so then inputs must be self closing /> Also the submit button must have a parent block level element such as P, DIV, FIELDSET, (form dosen't count.)
Alan / 02/04/2010 / 12:42 / http://www.enetdesign.co.uk
Are things like tab index also important for accessibility. And is there a webpage that assesses your accessibillity. Bit of a toungetwister!
Dave / 27/06/2010 / 20:55 / http://www.doreymedia.com/professional-web-design
I really try to avoid contact type forms altogether, I much prefer publishing loads of contact options for the visitor and encouraging them to start a relationship on their own terms rather than their first contact with my clients organisation being a stilted, assumptive and sterile 'your enquiry will fit our form' approach. Of course not all forms are contact forms, and where they are appropriate they really must be accessible. They are so ugly too!
SHAMSU / 18/08/2010 / 13:22
i loves computing
