Skip to content
This repository has been archived by the owner on Sep 14, 2022. It is now read-only.

API: CSS: Form

Jump to bottom
nateemerson edited this page Oct 12, 2011 · 4 revisions

Description

The <form.form-full> entity and its variations form a distinct content area for a form that spans the full width of a page. It includes various stylings that can be applied as well such as .form-padded.

Intent

This entity can be employed by any module to create a standard full width form. Most commonly, it should contain an <h1> entity as the first child entity, and then a mixture of <input>, <textarea>, <select>, <label>, <p> and <div> tags.

Example Code

This is an example form that leverages several different components of form styling.

<form class="form-full form-padded">
    <h1 class="light form-first">{MENU_TITLE}</h1>
    <div>{CONTENT}</div>
    <label for="{ID_1}">{LABEL_1}</label>
    <input type="text" name="{NAME_1}" id="{ID_1}" />
    <input type="text" name="{NAME_2}" />
    <label for="{ID_3}">{LABEL_1}</label>
    <textarea id="{ID_3}"></textarea>
    <p>{TEXT}</p>
    <input type="submit" name="{NAME_SUBMIT}" class="form-last" />
</form>

In all cases, the containing entity of a menu is a form. This reduces the total number of entities required and makes the markup as semantic as possible, rather than requiring more complex markup for presentational aspects. The framework currently interprets .form-full as the definition of a form. In addition, it provides .form-padded for additional styling of entire form.

Within most forms, the first element will be an <h1> representing a form title. In this case, .light is available for further heading styling. Note that the <h1> element is technically optional within forms. After the header (or at the beginning of the form if no header element is defined) the entities <input>, <textarea>, <select>, <label>, <p> and <div> may be used. No additional classes are needed at the child level.

Directory Search Form

For maximal compatibility, the first element of the menu should be tagged .form-first and the last element should be tagged .form-last. This is not required for those browsers that support the :first-child and :last-child pseudo-classes, but these tags enable consistency across mobile browsers that do not provide full CSS 2.1 support.

Clone this wiki locally