Awesome Form has been archived. This project is no longer supported. Find out why…

Awesome Form

Using simple and semantic HTML, this method uses comprehensive CSS to create visually pleasing and extremely accessible web page forms for all purposes.

Why not get stop using tables and other extraneous markup in your forms, while still keeping them easy to use and visually pleasing?

What's New

Changed class name from class="awesome" to class="awesomeform".
Class can now be used on a per-fieldset (or div) element basis. This is recommended as opposed to declaring it on the entire form.
Replaced negative margins with negative relative positioning to keep Internet Explorer 6/7 from drawing random borders throughout fieldsets.

Download

Example Form

General Stuff Just a Plain Input
Another Input

Sometimes elements need a longer description. They go here.

No Description
One More Time
Multiple Select Box
Select Box
Textareas

Default display for radios Yes
No

Default display for checkboxes Yes
No
Maybe

Those Radios and Checkboxes weren't all that awesome... let's get a fix for those...

Better Checks and Radios

The fix is extremely easy: checkboxes and radios can be displayed in opposite order, using <fieldset class="checks"></fieldset> or <div class="checks"></div>.
Note that it is highly recommended to use <fieldset class="checks"></fieldset> whenever there are multiple items.

Checkboxes Longer sets of checkboxes can be formatted differently
This display is actually more beneficial for forms
The grouping makes more sense visually
Don't question it

Radio Inputs Yes, it is true
Radio buttons can be displayed this way also
Doesn't this rock?

Alternative Labels When you need a longer label, you'll need to use the class 'long'. Generally, this would be used when asking a longer question for a large text input.
*Required Input
*Another Required Input

Documentation

In the following section, you will find detailed instructions on how to use this CSS to create beautiful forms with the most simple HTML possible. Don't be frightened! Awesome Form is incredibly easy to use!

HTML

Reference the class on your form

<form class="awesomeform" method="" action="">
	[...]
</form>

Or per Fieldset

<fieldset class="awesomeform">
	[...]
</fieldset>

General style:

<label for="idOfInput">Label Text</label>
<input type="text" name="nameOfInput" id="idOfInput" /><br />

Labels should be as concise as possible. As a general rule, they should not span more than a single line at the 200px width (see stylesheet for customization).

The same style follows for select and textarea objects.

<label for="select">Select Box</label>
<select name="select" id="select">
	<option>Option 1</option>
	[...]
</select><br />

Always include a <br /> following your INPUT, TEXTAREA, or SELECT object!

Extras

Using extra help and descriptions

Use the desc class on paragraphs to include more information about how to fill out a certain input field. This paragraph should follow after the <br /> that follows after the input.

<label for="idOfInput">Label Text</label>
<input type="text" name="nameOfInput" id="idOfInput" /><br />
<p class="desc">Extra information that will help the person fill out the information above should be placed here.</p>

Reverse-Display Checks and Radios

Use the checks class to reverse the display of checkboxes and radios as shown above. Remember to make the order of items input, label, br.

<fieldset class="awesomeform checks">
	<input type="checkbox" id="checkID" name="checkName" />
	<label for="checkID">Long description of checkbox</label><br />
	[...]
</fieldset>

Required Asterisks

Add a <span>*</span> directly preceding the label text within a label to note inputs that require an answer.

<label for="id"><span>*</span>Required Input</label>

More Help

Styles can be applied to individual items such as the width of an input or textarea using the attribute style="". Just be careful about trying to move the positioning of elements.

There isn't really much more that I can say on this. View the source of this example page to see how simple the code is. Once you get it working, you'll never want to mark up a form using anything else.

License

This work is licensed under a Creative Commons Attribution-ShareAlike 2.5 License.

Attribution: You must attribute the work in the manner specified by the author or licensor.
Share Alike: If you alter, transform, or build upon this work, you may distribute the resulting work only under a license identical to this one.

When using the CSS, you must keep the top section with the licensing information:

/* 
The following information must not be removed:
Awesome Form v2.1 CSS
Written by: Paul Armstrong, Paul Armstrong Designs
Site: http://paularmstrongdesigns.com
Example & Documentation: http://paularmstrongdesigns.com/awesome/form/index.html
Sun Dec 17 21:25:39 2006

Special thanks to Zach Johnson for helping and pushing me to make the changes.
Site: http://tech.no.logi.es (those aren't dots, they are diamonds)

This work is licensed under a Creative Commons Attribution-ShareAlike 2.5 License
http://creativecommons.org/licenses/by-sa/2.5/
*/