DeutschDeutschEnglishEnglish | Imprint | Login
Yet Another Multicolumn Layout | An (X)HTML/CSS Framework

3.10 The Form Construction Kit

Forms, necessary though they may be, are no fun to program.  Their elements are limited in their flexibility, as most browsers automatically display them to conform to the user's operating system.  The difficulty of a uniform presentation is only increased by certain CSS bugs in Internet Explorer.  

YAML 3.1 introduces a Form Building Kit as a new building block in the layout framework.  As with the subtemplates, it is a system of HTML building blocks and the corresponding CSS.  The markup is programmed according to best practice rules and is written to support accessibility standards.  

An example for using the kit as well as the two basic design options (linear or column-based) is here:

/examples/01_layouts_basics/styling_forms.html

Apart form this simple structure, with the help of subtemplates also multi-column forms can be easily implemented.

/examples/01_layouts_basics/multicolumnar_forms.html

3.10.1 The Markup

Of course you are free to program your forms any way you wish - using YAML does not force you to use the Form Construction Kit.  

To begin using the kit, assign the surrounding <form> element the CSS class yform.

<form method="post" action="" class="yform">
  <fieldset>
    <legend>fieldset heading</legend>
    ...
  </fieldset>
</form>

You can structure your form by using the <fieldset> tag, though this element is not required. Use fieldsets to group elements in longer forms.  Short forms (like a simple contact form) will not require such subgroupings.

HTML Blocks for Form Elements

The following overview contains the standard markup for all the form elements of the Construction Kit.  As you can see, each HTML block consists of a form element (INPUT, TEXTAREA, SELECT etc.), the corresponding label, and an enclosing DIV container. The CSS class for the container determines its design and position.

Textfield

<div class="type-text">
  <label for="your-id">your label</label>
  <input type="text" name="your-id" id="your-id" size="20" />
</div>

Textarea

<div class="type-text">
  <label for="your-id">your label</label>
  <textarea name="your-id" id="your-id" cols="30" rows="7"></textarea>
</div>

Select

<div class="type-select">
  <label for="your-id">More Options</label>
  <select name="your-id" id="your-id" size="1">
    <option value="0" selected="selected" disabled="disabled">Please choose</option>
    <optgroup label="First options to choose from">
      <option value="value #1">Option 1</option>
      <option value="value #2">Option 2</option>
    </optgroup>
    <optgroup label="Yet more options to choose from">
      <option value="value #3">Option 3</option>
      <option value="value #4">Option 4</option>
      <option value="value #5">Option 5</option>
    </optgroup>
</select>
</div>

Checkbox

<div class="type-check">
  <input type="checkbox" name="your-id" id="your-id" />
  <label for="your-id">Your checkbox label</label>
</div>

Radio-Buttons

<div class="type-check">
  <input type="radio" name="your-id" value="value #1" id="your-id" />
  <label for="your-id">Your radio-button label</label>
</div>

Button-Set

<div class="type-button">
  <input type="button" value="button" id="button1" name="button1" />
  <input type="reset" value="reset" id="reset" name="reset" />
  <input type="submit" value="submit" id="submit" name="submit" />
</div>

(Kopie 4)

You can transfer these blocks to your source code just by copying and pasting.  Make sure that you use a unique name for the attribute id="your-id", as it must be used in the for="your-id" attribute of the label in order to connect the label to the correct form element.

Note: the "name" attribute within the form element is optional and may be left out.  A few JS-based form validators use this attribute: should you choose to use one of these scripts, make sure you use the same word for the name as well as for the id.

The visual appearance of the form elements is controlled indirectly, by a surrounding div container with a particular CSS class (for instance: type-text). This method allows us to influence input fields, checkboxes, and radio buttons even in older versions of Internet Explorer (IE5.x and IE6).  If we were using attribute selectors, like input[type="text"] { ... }, we could never design for these browsers as they do not understand the constructs. 

The following predefined classes are ready to use:

CSS Class of the Parent Element (DIV)

Affected Form Elements

type-text

input fields, text areas

type-select

select boxes

type-check

checkboxes, radio buttons

type-button

buttons (i.e.: reset, submit)

Note: hidden input fields (type="hidden") can be inserted anywhere in these predefined containers.  They are always invisible, no matter how the other input elements are defined.

3.10.2 The CSS of the Form Components

The second component of the Form Construction Kit comprises the stylesheet forms.css, which is saved in the folder yaml/screen/. This is not a core component of the framework which may not be edited, but a stylesheet that you are free to change to meet your needs.

Visual Design of the Form Elements

The stylesheet forms.css is divided into two sections.  The first part contains all the CSS rules for the visual presentation of the individual elements. 

This part can be edited at will to suit the appearance of your forms, the fieldsets, as well as all the various form elements to your own site design.

/**
 *  YAML Forms - visual styling
 *
 *  (en) visual form styling area
 *  (de) Festlegung des optischen Erscheinungsbildes
 */

form.yform {
  background: #f4f4f4;
  border: 1px #ddd solid;
  padding: 10px;
}
...

The visual design includes colors, borders, margins, and perhaps images for specifying the appearance of the various form elements -- including the :focus, :hover and :active conditions.

Technical Basis of the Form Construction Kit

The second section contains the definitions for positioning the elements in a way which increases the accessibility of the forms.  The standard form is a vertical, linear sequence of labels and form elements. 

/**
 * Vertical-Forms - technical base (standard)
 *
 * |-------------------------------|
 * | fieldset                      |
 * |-------------------------------|
 * |   label                       |
 * |   input / select / textarea   |
 * |-------------------------------|
 * | /fieldset                     |
 * |-------------------------------|
 *  
 * (en) Styling of forms where both label and ...;
 * (de) Formulargestaltung, bei der sowohl Label als auch ...
 *
 * ...
 */

/* General form styling  | Allgemeine Formatierung des Formulars */

.yform { overflow: hidden; }
.yform fieldset { overflow: hidden; }
.yform legend { background: transparent; border: 0; }
.yform label { display:block; cursor: pointer; }

...

The specifics of the CSS rules cannot be explained here.  The construction of the form components bases on proven best practice rules and ensures correct display in all relevant browsers, in fixed and in flexible layouts.

Note: the CSS contains further preventive measures to preclude display errors in older versions of Internet Explorers, in particular relating to the relative positioning of the form elements.  Again, the complexity of the bugfixes is too great to explain here in the space available.

Alternative Display Variation

As an alternative to the vertical ordering of labels and fields, the Form Construction Kit offers the css class .columnar.  When added to a form element, a fieldset, or a DIV container, this class forces the form elements into two columns.

Each label then appears in a row with its corresponding form element (based on floats), with labels in the first column and the elements in the next.

/**
 * Columnar forms display - technical base (optional)
 *
 * |-------------------------------------------|
 * | fieldset                                  |
 * |-------------------------------------------|
 * |                                           |
 * |   label   |   input / select / textarea   |
 * |                                           |
 * |-------------------------------------------|
 * | /fieldset                                 |
 * |-------------------------------------------|
 *
 * (en) Styling of forms where label floats left of form-elements
 * (de) Formulargestaltung, bei der die label-Elemente nach links fließen
 *
 * ...
*/

/* Columnar display | Spalten-Darstellung */
.columnar .type-text label,
.columnar .type-select label {
  float: left;
  width: 30%; /* Can be fixed width too | Kann auch eine fixe Angabe sein */
}

/* Indent Checkbox fields to match label-width ... */
.columnar div.type-check { padding-left: 30%; }
.columnar div.error .message { margin-left: 30%; }

.columnar div.type-text input,
.columnar div.type-text textarea { width: 67.8%; }
.columnar div.type-select select { width: 69.4%; }
 
/* width adjustments for IE 5.x & IE6 ... */
* html .columnar div.type-text input,
* html .columnar div.type-text textarea { width: 67.2%; }
* html .columnar div.type-select select { width: 68.8%; }

The columns are set to 30% width for the label and 70% for the form element.  The widths of the elements have been chosen carefully and thoroughly tested: avoid changing them if you can.

The odd-looking numbers are a result of the necessary jiggling for flexible width layouts: the exact width of the form elements cannot be determined, as paddings on the side are generally given in PX or EM.  Even more annoying, select elements generally have different widths in various browsers.  The given widths ensure an extremely similar width for all element types and simultaneously avoid annoying line breaks in the floated surroundings.

Adjustments for Internet Explorer

As in the elements for the page layout, Internet Explorer versions 5.x - 7.0 still need help in displaying forms that will look like those in the other browsers.

General Adjustments

Many display errors are connected to the use of <fieldset> elements -- fieldset backgrounds are not completely rendered, for example.  These problems are so general that they are corrected in the iehacks.css file for the entire YAML framework.

/**
 * Form related bugfixes
 *
 * @bugfix
 * @affected   IE 5.x/Win, IE6, IE7
 * @css-for    IE 5.x/Win, IE6, IE7
 * @valid      no
 */

fieldset, legend { position:relative; }

The bugfix for these display problems involves assigning the property position:relative. This property generally does not influence a form's design, so it can be assigned directly to the elements and thus correct all forms within any YAML layout.

 /**
  * Global fixes for YAML's form construction set
  *
  * @workaround
  * @affected IE 5.x/Win, IE6, IE7, IE8
  * @css-for IE 5.x/Win, IE6, IE7, IE8
  * @valid no
  */

.yform, 
.yform div,
.yform div * { zoom:1; }

The second part specifically concerns the Form Construction Kit. Therefore the definitions are located in forms.css.  The kit elements are assigned the property zoom:1 to activate hasLayout -- just in case.  As this method could change existing forms, it is limited to the YAML form kit (.yform) as a preventive measure.

Note: zoom is a proprietary CSS property of the Internet Explorer that does not validate. This error can be ignored as this property doesn't have any influence on other browsers.

Correct Display of Legends Within Fieldsets

A further problem in Internet Explorer is the problematic display of fieldsets with legends, anytime these are centered above the upper edge of the fieldset.  Unfortunately, this is the exact default position for legends in any other web browser, so a workaround had to be built into forms.css.

/**
 * Forms Fieldset/Legend-Bug in IE
 * @see ...
 *
 * @workaround
 * @affected IE 5.x/Win, IE6, IE7, IE8
 * @css-for IE 5.x/Win, IE6, IE7, IE8
 * @valid no
 */
  
/* all IE */
.yform { padding-top: 0\9; }
.yform fieldset { padding: 0 5px\9; padding-top:1em\9; }
.yform legend { position:absolute\9; top:-.5em\9; *left: 0\9; }
.yform fieldset { position:relative\9; overflow:visible\9; margin-top:1.5em\9; zoom:1; }

/* IE5.x, IE6 & IE7 */
.yform legend { *padding: 0 5px; }
.yform fieldset { *padding-top:1.5em; }

/* IE5.x & IE6 */
* html .yform { padding-top: 10px; }

The workaround uses absolute positioning to place the legend above the fieldset and thus allow a display equivalent to the standard default.

As it is absolutely positioned, the legend drops out of the normal text flow: this means that the upper padding and margin of the fieldset must be adjusted so that neighboring and child elements can continue to be placed precisely.

Note: the necessary CSS hacks for this IE workaround will not validate. However the adjustments of the padding and margins of the fieldset depend upon the individual layout (visual presentation of the forms, see above).  This means that developers must be able to edit these properties: thus they are included at the very end of forms.css.