Skip to main content link. Accesskey S

Forms

Forms can appear inline in some content (for editing), on a page, in a dialog, or in a separate window.

Directionality:

Div-based form, labels above

Table-based form, labels on left

Classes

These are classes for a new, div-based form, with labels on top:

  • lotusForm2 - the main containing class
  • lotusFormBody - wraps the body content of the form
  • lotusFormField - class for each line in a form (label and field)

LotusFormFieldRow and lotusFormLable are no longer used for div-based forms. The rest of the classes are the same as for the table-based form.

  • lotusForm - the main containing class
  • lotusFormPlain - an additional class to place on the lotusForm div when you need the form to have a plain background (when it sits by itself on a page).
  • lotusFormFieldRow - class for each line in a form
  • lotusFormLabel - class assigned to the field labels
  • lotusFieldset - class assigned to a fieldset element when you want it to be visible
  • lotusFieldBorder - class assigned to a div that wraps a lotusText field to make it stand out from the rest.
  • lotusText - assigned to input fields
  • lotusCheckbox - assigned to checkboxes
  • lotusFormError - to display individual form errors
  • lotusFormErrorSummary - summary of errors at the top of the form
  • lotusFormRequired - assign to a required field
  • lotusFormTable - assigned to a table within a form (for layout)
  • lotusFormSection - allows you to section your forms
  • lotusFormFooter - bottom section of the form
  • lotusFormButton - assigned to the input button for submitting the form

Basic Implementation

h2 tags are used for form headers

Our new, div-based form is created using the lotusForm2 class. It puts labels above the form fields, which helps support forms in small areas and solves some issues with long labels in translation. The existing lotusForm class supports our table-based form with labels to the side.

When creating a table-based form, assign the lotusFormTable class to the table element.

Not all forms in our UI use the lotusForm class, see the various prototyping pages for examples of forms without the lotusForm class (mostly small forms like the global search and the search tab (find) components).

For small forms like the login page and forms that show up in the left or right columns, errors show up by putting text containing the error after the field label in a span tag assigned the class lotusFormError. For larger forms, like the examples on this page, errors are coded as a row above the field in error. (See the sample HTML in the code section of this page.) The lotusFormError class is also added as an additional class on input fields to make them show up as yellow. For larger forms, you can also put summary error text at the top of the form (above the title) and assign the class lotusFormErrorSummary to the div (or tr) tag.

Variations

There is an abbreviated version of the form that appears inline in the left and right columns. The code is mostly the same, except that the label and input fields are in one table cell and labels sit on top of the input fields.

Forms that appear on a page or in a dialog have a white background.

If you want a label to appear to the left of an area of the form that is not assigned to a form field, use the lotusFormLabel class around the text, but don't also wrap it in an html label tag.

Examples

Sample HTML - Div-based form, Labels Above Fields

Sample HTML - Labels Beside Fields

CSS (forms.css)

Theme CSS (formsTheme.css)

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). But the styles will still support it.

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.

IBM, the IBM logo, ibm.com and Lotus are trademarks of International Business Machines Corp., registered in many jurisdictions worldwide. Other product and service names might be trademarks of IBM or other companies. A current list of IBM trademarks is available on the Web at "Copyright and trademark information" at www.ibm.com/legal/copytrade.shtml.