(you can use accesskey 4)

Form Standards - framework design

Here are some standards for form elements which I have put together which allow easy design customisation and take in to consideration common layouts.

Any more complex layouts within these form standards would be coded as individual components overriding the common form styles.

Revision History

This version was compiled on

22 July 2011
Fixes to label for attributes and element ids/names
01 April 2011
Added examples for `label-detail` alongside `label-error-msg`
25 March 2011
Changed the error summary to use <label> tags instead of <a> tags

Display options (required JavaScript)

Form type:
  • This displays the label to the left of the inputs
  • This displays the label above the inputs

Form elements

Standard label and input

Basic


        <div class="field-item">
            <label for="formelements-basic" class="label-text">Email</label>
            <input id="formelements-basic" name="formelements-basic" type="text" />
        </div>

Example with required


        <div class="field-item">
            <label for="email1" class="label-text">
                Email <abbr class="required" title="required">*</abbr>
            </label>
            <input id="email1" name="email1" type="text" value="text" />
        </div>

Example with other elements


        <div class="field-item">
            <label for="other-select" class="label-text">Email</label>
            <select id="other-select" name="other-select">
                <option value="">options</option>
            </select>
        </div>
        <div class="field-item">
            <label for="textareaelem" class="label-text">Email</label>
            <textarea id="textareaelem" name="textareaelem" 
                rows="10" cols="30">text content</textarea>
        </div>

Wrap buttons in a button-group


        <div class="button-group">
            <input type="submit" id="buttongroup-input" 
                name="buttongroup-input" value="Button" />
        </div>

Grouped inputs

Vertical checkboxes/radios

Radio Group Default


        <div class="field-group cc">
            <span class="field-group-header">Name:</span>
            <ul class="field-radioItems">
                <li class="field-item">
                    <input id="surname-a" type="radio" name="surname" />
                    <label for="surname-a" class="label-text">Name Surname</label>
                    <div class="label-detail">
                        Further detail about a specific field item
                    </div>									
                </li>
                <li class="field-item">
                    <input type="radio" id="surname-b" name="surname" 
                        value="anonymous" />
                    <label for="surname-b" class="label-text">Anonymous</label>
                    <div class="label-detail">
                        Further detail about a specific field item
                    </div>									
                </li>
            </ul>
        </div>
Name:
  • Further detail about a specific field item
  • Further detail about a specific field item

Check Group Default


        <div class="field-group cc">
            <span class="field-group-header">Checks:</span>
            <ul class="field-checkItems">
                <li class="field-item">
                    <input type="checkbox" id="checks-a" name="checks-a" />
                    <label for="checks-a" class="label-text">Name Surname</label>
                </li>
                <li class="field-item">
                    <input type="checkbox" id="checks-b" name="checks-b" 
                        value="anonymous" />
                    <label for="checks-b"  class="label-text">Anonymous</label>
                </li>
            </ul>
        </div>
Checks:

Vertical tight left with no heading


        <div class="field-group cc">
            <ul class="field-radioItems">
                <li class="field-item">
                    <input type="radio" id="noheading-a" 
                        name="noheading" />
                    <label for="noheading-a" class="label-text">
                        Name Surname</label>										
                    <div class="label-detail">
                        Further detail about a specific field item
                    </div>									
                </li>
                ...
                <li class="field-item">
                    <input type="checkbox" id="noheading-chk-a" 
                        name="noheading-chk-a" />
                    <label for="noheading-chk-a" class="label-text">
                        Name Surname</label>
                </li>
                ...
            </ul>
        </div>
  • Further detail about a specific field item
  • Further detail about a specific field item

Inline checkboxes/radios


        <div class="field-group field-groupTh">
            <span class="field-group-header">Name:</span>
            <ul class="field-checkItems">
                <li class="field-item">
                    <input type="checkbox" id="inlinechks-a" name="inlinechks-a"
                        value="lorem"/>
                    <label for="inlinechks-a" class="label-text">Name Surname</label>
                </li>
            </ul>
        </div>
Name:

Force margin header


        <span class="field-group-header field-group-headerTmargin">Name:</span>
Name:

Force stack header


        <span class="field-group-header field-group-headerTstack">Name:</span>
Name:

Special

Date Fields


        <div class="field-group cp-dateField">
            <label for="day" class="field-group-header">Date:</label>
            <div class="field-item">
                <label for="day" class="label-text">Day</label>
                <input type="text" id="day" name="day" />
            </div>
            <div class="field-item">
                <label for="month" class="label-text">Month</label>
                <select id="month" name="month">
                    <option>Jan</option>
                </select>
            </div>
            <div class="field-item">
                <label for="year" class="label-text">Year</label>
                <select id="year" name="year">
                    <option>2010</option>
                </select>
            </div>
        </div>

Validation Examples

Error Summary


    <div class="form-errorSummary" style="display:none;">
        <h4>error header</h4>
        <ul>
            <li><label for="error1">errordetails</label></li>
            <li><label for="error2">errordetails</label></li>
            <li><label for="error3">errordetails</label></li>
            <li><label for="error4">errordetails</label></li>
            <li><label for="error5">errordetails</label></li>
        </ul>
    </div>

error header

Errors on field-item

  • Add field-itemTerror to field-item
  • Add error-num
  • Add label-error-msg
  • input id should correspond to label’s for attribute in error summary

    <div class="field-item field-itemTerror">
        <span class="error-num">
            <span>Error: </span>1
        </span>
        <label class="label-text">Email</label>
        <input id="fielditemerrorinput" type="text" />
        <label for="fielditemerrorinput" class="label-error-msg">there is a validation error</label>
        <div class="label-detail">field information</div>
    </div>
Error: 1
field information

Errors on field-group

  • You should hightlight the first input using a label

   <div class="field-group field-groupTerror cp-dateField">
        <label for="fieldgrouperror-day" class="field-group-header">Date:</label>
        <div class="field-item">
            <label for="fieldgrouperror-day" class="label-text">Day</label>
            <input id="fieldgrouperror-day" type="text" name="day" />
        </div>
        <div class="field-item field-itemTerror">
            <label for="fieldgrouperror-month" class="label-text">Month</label>
            <select id="fieldgrouperror-month" name="month">
                <option>Jan</option>
            </select>
        </div>
        <div class="field-item">
            <label for="fieldgrouperror-year" class="label-text">Year</label>
            <select id="fieldgrouperror-year" name="year">
                <option>2010</option>
            </select>
        </div>
        <label for="fieldgrouperror-day" class="label-error-msg">you have entered the wrong day</label>
        <div class="label-error-msg">there is a validation error</div>
    </div>
there is a validation error