API: CSS: Form

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
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.