IBM Lotus User Interface Developer Documentation

Variation with labels above

Classes

• 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
• 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
• lotusNudge - assigned to the first empty td tag on a form that has labels on top (rather than to the left).

Basic Implementation

h2 tags are used for form headers

Forms are created using the lotusForm and lotusFormTable classes to give them our form styling.

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 table row above the row containing 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 in the first row of the form (above the title) and assign the class lotusFormErrorSummary to the 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.

To put labels on top, move the <label> tag and its contents into the same table cell as the input field. Remove the width and the lotusFormLabel class from the td tag. You should be left with an empty td tag. On the first one of these (first form element) assign the class of lotusNudge, which will properly align the form contents up with the header/footer. (See sample and code on this page.)

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

Examples

• inline form & condensed inline form
• login form
• the top inline form example is what you would use for a popup form.

Sample HTML - Labels Beside Fields

Sample HTML - Labels Above 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.