Page Selections
Default model Contrast fashion (lower vision) No style Past Entry
Future-proof
Next Entry
Ow
Accessible, trendy kind layout
24 March 200472 comments » Form layout templates « 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 kind widgets in ways that Safari promptly ignores, but I can't find any articles telling you how to use semantic, available 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 type layout was a rather oldish Eric Meyer throwback. So, as a service to the web design community,
Office 2007 Product Key, 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 kind templates is all the same, and entirely semantic. There's more than enough valid kind data tags to give CSS the ability to model 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 type element on a page should have an associated label. Not only do labels let you focus a kind 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 type element, allowing each distinct item to be more readily identified. To assign a label to a sort element, you need to give the element an id,
Office 2010 Clé, then reference that id using the label's "for" attribute: <label for="elementID"> Label text <input id="elementID" type="text" > <label> The sort element doesn't have to be nested inside the label tag,
Office Standard 2007, 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 type 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 sort. 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 sort, 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,
Windows 7 Ultimate Product Key, 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,
Office 2007 Pro Plus Key, 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. Hopefully my efforts haven't been in vain, and you find something useful in my kind experimentation; I at least know that I did. If you have any queries about the techniques involved, don't hesitate to ask.
Categories
forms, html, css, webstandards, tutorial
Office Standard 2007 The Man in Blue Accessible,
Linear Mode
