Controls and classes

This section is a quick reference list of the most common types of HTML controls and their corresponding CSS class tags. The typical controls and the corresponding CSS classes used in a JSP file are listed in the following table.

Control and Tag Available Classes Description
Buttons button For all buttons.
Checkboxes checkboxcolumn For checkboxes displayed in a column of a table.
  checkboxheader For checkboxes displayed in the header of a table. Use this class at the <td> cell level, not the <input> tag level.
Comboboxes/ Selects combobox For all combo boxes.
Icons columnicon For icons in a table column.
  icon For icons not in a table column.
  lookupicon For lookup icons appearing to the right of certain editable input texts.
Input Boxes dateinput For editable date input.
  numericprotectedinput For non-editable numeric input. Right-aligned. Surrounding <td> tag should have class="protectednumber".
  numericunprotectedinput For editable numeric input. Right-aligned.
  protectedinput For non-editable input. Surrounding <td> tag should have class="protectedtext".
  unprotectedinput For editable input.
Labels N/A Takes the same font as specified by the table class in which it resides. Use detail labels for a detail view and search labels for a search view.
Radio Buttons radiobutton For all radio buttons.
Tables (non-tabular data) view For detail views. This class is attached to view.htc, which dynamically sets column widths when the HTML page loads.
Tables (tabular data) table
For all tables of the tabular data type. Specify the following attributes for the table element:
  • editable="true"
  • deleteAllowed="true"
  • addAllowed="true"
The heading row must be included in a <thead> tag. Heading cells must be in <td> tag and not the <th> tag. The body rows must be included in a <tbody> tag. If the table is an editable list that permits add, specify a template row in a <tfoot> tag. Specify the following attributes for the template row <tr> tag:
  • "style="display:none"
  • TemplateRow="true"
  • ByPassRowColoring="true"
Text numerictablecolumn For displaying text in a table column. Right-aligned.
  protectednumber For displaying numeric data. Right-aligned.
  protectedtext For displaying text.
  searchcriteriacell For the bottom <td> tag of each search criteria.
Note: All <td> tags using class as searchcriteriacell must specify nowrap="true". This prevents the lookup icon from wrapping to the next line when used with text boxes, input boxes, and query combo boxes.
  tablecolumn For displaying non-editable text in a table column.
  tablecolumnheader For displaying text in a table column header.
Textarea textarea For keeping text areas consistent. See also getTextAreaOptions().
Total fields totaltext Shows text in a different color to identify a total field.