Forms

Inline form, labels above fields

Click on the Save button to see error styling and click Cancel to hide the errors.

Form with labels beside fields

Click on the Save button to see error styling and click Cancel to hide the errors.

Fancy form, including tabs and sections

Click on the Save button to see error styling and click Cancel to hide the errors.

Form field shading

Adding just one more class to your form elements give them a modern, three-dimensional look.

Classes

• lotusForm2 - the main containing class
• lotusLeftLabels - an additional class to assign on the lotusForm2 form element when you want labels to align left.
• lotusFormTitle - the class assigned to the header element (or optional div)
• lotusHeading - the class assigned to the form heading (h1 element by default)
• lotusFormBody - wraps the body content of the form. Not needed for simple forms. Use for forms that have a form title and footer, for proper alignment.
• lotusFormField - class for each line in a form (label and field)
• lotusFormLabel - class assigned to a div when you want an "extra" label on an item or group of items that isn't the official html label assigned to the input field (you would most likely use a fieldset and legend to accomplish this, but this gives you an extra option)
• lotusFieldWrapper - assign this class to the divs within the lotusFormField class that wrap the input fields
• lotusFieldset - class assigned to a fieldset element when you want it to be visible
• lotusText - assigned to input type=text and textarea fields
• lotusCheckbox - assigned to checkboxes and radio buttons
• lotusFieldEmphasis - an additional class that is applied to text and list form elements to give them a subtle 3-dimensional style.
• lotusFormError - assigned to a div which contains error text.
• lotusFormErrorField - an additional class attached to the actual field in error to give it special styling.
• lotusFormErrorIcon - assigned to a span wrapping the error icon (and alternate text).
• lotusFormRequired - assign to a required field
• lotusFormSection - allows you to section your forms
• lotusFormFooter - bottom section of the form
• lotusMeta - Used for form description, section descriptions, help text under a field, and assigned as an additional class to the required field key.
• lotusIcon - assigned to the link wrapping the help icon.
• lotusNudge - use this class on form content when you want it to align with the form fields instead of the labels on forms with left-aligned labels (pushes the content over).
• lotusIndent10 - assigned for any text on forms with labels to the side of the form fields, when you want it to align with the labels but it is not a label (example, * Required).

Basic Implementation

See the code examples for specific code.

Assign lotusForm2 to the form element.

The form title (and any meta text) comes next.

The form body wraps all the form fields. Each set of form fields (with labels) is wrapped by a div classed with lotusFormField. Each form element is wrapped with a div classed with lotusFieldWrapper - this is to better support labels beside fields and error icons.

Any meta text for a field needs to go inside of the lotusFieldWrapper, after the form field.

A fieldset is used to wrap a group of radio buttons or checkboxes. Fieldsets are invisible (used for accessibility) unless you assign lotusFieldset to them, in which case they will draw a border around the input controls.

The lotusFormFooter comes after the lotusFormBody and contains buttons classed with lotusBtn.

Form Errors

When a field is in error, an icon shows after it. When error checking in real time (rather than on form submit), the error message appears in a Help tooltip while the field or error icon has focus and is in error (the error message also shows when you hover over the error icon). When error checking is done on submit, the error message is shown above the field or set of fields (like for a login form, where you don't know if user name or password is the field in error).

The lotusFormErrorField class is used as an additional class to style a field in error (input, textarea, select, fieldsets).

The lotusFormErrorIcon needs to come directly after the fieldset when flagging a group of radio buttons or checkboxes, or directly after the lotusFieldWrapper when flagging any other field type or a single checkbox field.

Variations

Forms that appear inline in a component (usually a data display component) have top and bottom borders.

For a form with labels beside the fields, assign the lotusLeftLabels class as an additional class on the form element.

If you want an "extra" label to appear on the form that is not assigned to a specific form field, use the lotusFormLabel class around the text, but don't wrap it in an html label tag.

On forms with fields to the side, because label text needs to align and required field asterisks hang, any non-label text that needs to align with the labels needs to use the lotusIndent10 class.

Accessibility

Use an H1 tag or aria-level="1" for the title of an inline form or when the form is the main content of the page and thus the form title is the title of the page.

Use aria-describedby for an element that has meta text, giving the meta text an id that aria-describedby uses as its value. Examples are form descriptions, section descriptions, and visible help text.

Labels:

• Make sure each form field has a label or assign label text using both aria-label and a title tag (the title tag will make the text appear on hover, and was the recommended way to add non-visual labels for accessibility and is still supported in more browsers/screen readers as ARIA works it's way into wider adoption).
• Use the label element "for" attribute to associate the id of the form field with the label. Each label can only have one form control associated with it, but a form control can have more than one label associated with it.
• For lotusFormLabel "labels," add aria-labelledby="[lotusFormLabelId]" to the associated form field(s)

Fields:

• Disabled fields: use the disabled attribute on the form element.
• Required fields: use aria-required="true" on the form element.

Fieldsets:

If you use a fieldset you must also use a legend, which is the caption for the group of form elements in the fieldset. If your fieldset is only for screen reader users, put the class lotusAccess on the legend tag, which moves it offscreen so the visual user won't see it.

If you include an optional label for the fieldset, as well as a legend (see left labels example), use aria-labelledby to point to the optional label.

• Visual fieldset: apply lotusFieldset to your fieldset tag. No class needed for the legend tag.
• Non-visual fieldset: no class needed for the fieldset tag. Apply lotusAccess to the legend tag.

Extras:

• Put aria-live="assertive" on the form element of any form that will display error messages.
• Put role="alert" on error messages that sit as text in the form.
• Create tooltip error messages as ARIA Tooltip Widgets. You would have to add the aria-describedby element only when the field is in error and remove it when the field is correct.
• See the Help component for accessibility information on including popup help in the form

High-level keyboard interaction:

• Create a logical tab order through links, form controls, and objects. (Use tabindex to do this if the order the user should tab through form elements doesn't follow the order of the elements in the html.)

Examples

• inline form & condensed inline form
• login form

Sample HTML - Labels Above Fields

Sample HTML - Labels Beside Fields

Sample HTML - Fancy Form

CSS (forms.css)

Theme CSS (formsTheme.css)

/*************** D E P R E C A T E D *****************/

lotusFormFieldRow was initially set up to go on the form table cells. The css has been enhanced to allow you to move it to the tr tag for each row in the form table. (It will still work the original way.)

A variation of the form to fit in the smaller left and right columns was added more recently.

April 2009 - added a class to allow designers to surround a text input or textarea field with a 4 pixel gray border.

May 2009 - documented how to put form labels on top. (Needed to add lotusNudge definition to the form css.) The rest of the change is just switching around the html.

Note: we made the decision to code forms as tables to support complex form designs/alignment.

/******************************************************/

October 2009 - Due to increased questioning about table forms, and the issues arising with spacing/localization, making many of the designers wanting labels above fields, we have created a div-based form, labels above. The previous table-version of the form, with labels above, has been removed. (There were issues with it in IE6 and IE7).

January 2010 - removed the fieldset from wrapping the whole form (so it can be used as a fieldset should be used, if required) and added the lotusFormBody class to wrap the form content between the header and footer.

April 28, 2010 - added lotusFieldset class to be applied to a fieldset when you want it to show for visual users. This allows for using a fieldset to group form elements for non-visual users when the lotusFieldset class is not applied. Also styled the legend element the same as the label element.

May 2010 - changed cancel links to be form buttons.

September 2010 - accessibility fixes surrounding the header including a new wrapping header element (you can omit if not using HTML5) and styling using the lotusHeading class rather than the h2 tag.

October 2010 - created a version of the div-based form that supports both labels on top (default) and labels on the left. Deprecated older table-based form. Removed lotusFormPlain class and just scoped the inline form background color to lotusTable. All other forms have a transparent background. Added more variety to the form examples.

January 2011 - updated form error handling to allow for real-time validation.

September 2011 - added lotusFieldEmphasis to enhance the look of text and list form fields.

December 2011 - removed aria-labelledby on most fieldsets. There is an implied relationship with the legend.

April 9, 2012 - added a width to the help text for forms with left-aligned labels. Set to the same width as the form fields.

April 24, 2012 - adjusted the vertical-align of the help icon for IE8 and 9.