A critical component of web standards design includes properly conceived and executed web forms. Historically, web forms have been considered by most designers as a troublesome area--dificult to make look good, function corectly, and be accessible.

The best practical approach is to use semantically correct markup (form, fieldsets, legends, labels, and elements) with appropriately defined titles with CSS to manage the appearance. This page presents snippits of semantic web form markup presented in a cut and paste format along with suggested CSS styling for a variety of  layouts also presented in cut and paste format. This coding can be mixed and matched as needed to accomplish the desired result.

The code fragments demostrate the use of text, select, radio button, checkbox, button, file, and image elements along with a suggested form container. Styling is provided for vertical, horizontal, columnar, and marginal layouts.

The following buttons launch separate pages demontrating the snippits below and how they might render using each of the four CSS layouts:

Note that the XHTML code is exactly the same, the variation is completely managed in CSS. The bulk of the heavylifting is in the fieldset, legend, and label rules, the remaining rules are for tweaking and customizing as needed.

With a few minor changes, it is possible to easily generate thousands of variations.

The following snippet implements a web form and wraps it in a CSS container for positioning.

The following snippet implements text, password, and textarea elements in an optional fieldset wrapper. The elements can be duplicated as needed.  When used, it should be structured according to the semantic meaning of the inputs, not the control type.

The following snippit sets up a single select element with an optional fieldset wrapper. The <optgroup> element can be used to style or sematically group <option> elements as needed.

The following snippet implements a typical three button radio control. The element count can be increased or decreased as needed. Note that the fieldset wrapper is semantically necessary.

The following snippet implements a typical three element checkbox control with optional fieldset wrapper. The element count can be increased or decreased as needed.

The following snippet implements a single file control with optional fieldset wrapper.

The following snippet implements submit button, reset button, and a definable function button in an optional fieldset wrapper.

The following snippet implements a single imagemap element with optional fieldset wrapper. This element returns the "x" and "y" coordinates where clicked.

The following styling implements a basic vertical form layout. This is the identical style sheet demonstrated.

The following styling implements a basic horizontal form layout. This is the identical style sheet demonstrated.

The following styling implements a basic columnar form layout. This is the identical style sheet demonstrated.

The following styling implements a basic marginal form layout. This is the identical style sheet demonstrated.