Yes, HTML forms are the worst things known to web designers. Yes, HTML forms have to be accessible and usable. No, HTML forms do not have to be an eyesore.

As the unwanted orphan of web pages, forms are neglected by many and designed by few. Most people are content to put in some text fields, some bold text and a submit button. I’ve come across quite a few tutorials on how to make forms as eye-achingly colourful as possible, and on how to customise form widgets in ways that Safari promptly ignores, but I can’t find any articles telling you how to use semantic, accessible code along with CSS to make better form layout. Layout is where most of the problems lie with forms – grouping objects, labeling fields, helping the user cope with the amount of information that they have to fill in. The only article I could find relating to Standards and form layout was a rather oldish Eric Meyer throwback. So, as a service to the web design community, I have journeyed into the foul depths of forms for the last few days, and come out all the more wiser. Here is the tale of my travels …
The semantics

The code I’ve used in my form templates is all the same, and entirely semantic. There’s more than enough valid form data tags to give CSS the ability to style all elements, so there’s no need to introduce any superfluous divs or spans. (Note: The “horizontal” and “margin” forms mightn’t look terribly hot in Safari or Opera. This is easily rectified using divs to clear the floated elements, but I didn’t want to clutter up the code. Feel free to add them in your own experimentation)

For usability and accesibility reasons, every form element on a page should have an associated label. Not only do labels let you focus a form element by clicking on its label text (no more fiddling around clicking on the exact circle that is the radio button), but they enable non-visual browsers to create an association between the label text and the form element, allowing each distinct item to be more readily identified.

To assign a label to a form element, you need to give the element an id, then reference that id using the label’s “for” attribute:

<label for="elementID">
Label text
<input id="elementID" type="text" />
</label> 

The form element doesn’t have to be nested inside the label tag, but I’ve used this method as it gives an extra level for the CSS to refer to.

Aside from the label tag, the only other item that may be unfamiliar to you is the “fieldset” tag. A fieldset tag groups together semantically similar form elements, for instance the three elements that could make up someone’s name: title, first name, last name. By grouping these three elements using a fieldset tag it helps to quantify their association, and allow visual and non-visual browsers alike to more easily navigate a form. The legend tag works alongside the fieldset tag, providing it with a title, like so:

<fieldset>
<legend>
Fieldset title
</legend>
<label for="elementID">
Label text
<input id="elementID" name="elementID" type="text" />
</label>
<label for="elementID2">
Label text 2
<input id="elementID2" name="elementID2" type="text" />
</label>
</fieldset>

Once you’ve coded up the HTML for your form, it’s then a simple matter of applying some CSS rules to turn it from an inline mess to a floated wonder. Each of the templates has a description of how it’s styled at the top, this should help you if you decide to play around with the CSS rules. I’ve purposely not styled any of the form elements themselves (beyond width and positioning), as the focus here is on structure and layout. Undoubtedly, further styling would increase the aesthetics and usability of the forms, but such design is much more site-dependent and best left to your own imagination.
Gripes

Probably the only difficulty in styling semantic forms is the legend tag. It is insufferably variable across browsers. In Mozilla, the legend tag is not left-indented from the body of the fieldset, in IE and Opera it is. In Mozilla, the legend tag is positioned in between the fieldset’s border and its content, in IE and Opera it is positioned inside the content. This makes it very hard to move the legend inside the fieldset border, or position it flush to the left of the fieldset, as you get varying effects across browsers. I’d use a CSS hack, but that’s not me. This means you either neglect the legend tag – and its obvious accessibility benefits – for hx tags (as in my last example), or you retain the standard fieldset border, with legend at the top. I don’t know … I’m growing to like the fieldset borders.

Demo: http://www.themaninblue.com/experiment/InForm/fieldset.htm

Source: http://www.themaninblue.com/writing/perspective/2004/03/24/

Related Listings:

1. Form Layout Stylish and Accessible Yes, HTML forms are the worst things known to...
2. Accessible CSS Forms In a recent study of web design patterns, Dr. Melody...
3. Form With Style – Ajax Script Forms are not very friendly when it comes to CSS...
4. Trimming form fields Script Web forms often ask visitors for non-essential information, but long...
5. Form Style This form is available for you to create your own...

Do you like this post?

Email: