Forms
Forms can appear inline in some content (for editing), on a page, in a dialog, or in a separate window.
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.
Examples
- inline form & condensed inline form
- login form
- the top inline form example is what you would use for a popup form.
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.