I've marked up quite a few HTML forms in my day. On complex sites, the problem often becomes maintaining a consistent presentation of form elements across a variety of pages, columns widths, and so on.
In my experience, the best method for styling forms is to follow the KISS principle. Form elements are notoriously difficult to style with any sort of accuracy across browsers, so the safest bet is to do as little manipulation as possible. This is a result of form elements being embedded in the OS in most cases.
However, this doesn't mean forms need to be ugly or poorly laid out!
So, I'm sharing something of a "framework" that I've developed and, for the sake of alliteration, I've called it the Facile Forms Framework. More or less, this is a collection of HTML and CSS schemes for laying out forms and all types of form elements in various configurations. This is, in many cases, the basis of all the forms I ever mark up and style.
Let's dive into some HTML. First, each interactive form element should have a <label> that identifies its purpose. Second, each of these <label>/<input> pairs are grouped inside a <div> element to indicate a minor division and make it easier to float and position the elements inside. Both <fieldset> and <legend> are used to group these <label>/<input> pairs into logical, semantically meaningful groups.
Each <div> is given a number of classes to indicate its contents, order, and to force it to clear any contained floats.
The classes built into the FFF are:
- "clearfix"
- This class forces an element to clear (wrap around) any floated children - handy for positioning
<label>s and<input>s. - "text"
- This class indicates that the
<div>contains a<label>and text or file<input>. - "checkboxes-radios"
- Like it says on the box, this
<div>holds a group of either checkboxes or radio buttons! Each<label>/<input>pair here is separated by either whitespace or a line break. This allows the elements to be oriented horizontally or vertically and remain aligned. - "select-single", "select-multiple", "buttons"
- Beginning to see a pattern here? Thought so.
- "e" or "o"
- I've included these so that the
<div>s can give the effect of rows. Stands for "even" and "odd".
A simple example of two text <input>s inside a <fieldset>.
<fieldset>
<legend>Text Input Varieties</legend>
<div class="text e clearfix">
<label for="text-input-1">Text Input</label>
<input type="text" id="text-input-1" name="textinput1" tabindex="" value="" />
</div>
<div class="text o clearfix">
<label for="text-input-2">Text Input (w/ Add-ons) <abbr title="Required Field">*</abbr></label>
<input type="text" id="text-input-2" name="textinput2" tabindex="" value="" />
<span class="hint" title="Some helpful hint.">?</span>
<p>Provide further explanation of the function of this field. This is a simple paragraph and can be used in conjunction with or instead of the help icon (or vice versa).</p>
</div>
</fieldset>
You'll notice two other elements here: <p> and <span class="hint">.
Paragraphs are styled by default to line up with text <input>s and provide additional information related to the field. The <span> is there to provide a helpful tooltip (no scripting is included, but these are ideal for a bit of behavior-enhancing DOM scripting).
Yes, the semantics of <abbr title="Required Field">*</abbr> are a little bit questionable. Feel free to change that to another element of your choosing - I think an <abbr> suits it just fine.
In the FFF, there are many potential configurations, groupings, alignments, and orientations of elements. Please view the Facile Forms Framework demo for a large sample of these possibilities. Or download a ZIP file of the demo to play with, deconstruct, and use as a jumping off point for your own projects!