Form Styles

Forms are used for retrieving information from the user. Since they are relatively prevalent in portal applications, there is a set of CSS Styles that will be applied to them.

The portlet specification divides form controls into three types:

Type Description HTML code Rendered control
Input Fields Fields that contain textual data. <input type="text" />
<input type="file" />
<input type="password" />
<textarea /> 
<select>
    <option>Option 1</option>
    <option>Option 2</option>
</select>
Buttons Controls that cause an action to be taken on the whole form, such as submitting, resetting, etc. <input type="submit" />
<input type="button" />
<input type="reset" />
<button>Press me!</button>
<button type="button">Press me!</button>
<button type="submit">Submit</button>
<button type="reset">Reset</button>
<input type="image" src="imagefile.jpg" />
Fields All other controls that don't fit into the other categories. <input type="checkbox" />
<input type="radio" />

These types are referenced in the styles defined by the rest of this page.

This page details the form styles defined by AFSC and the Portlet specifications ( Java Portlet Specification and Web Services For Remote Portlets). The portlets below show the correct ways to implement these styles in your HTML, as well as serve as an example and test bed to see how the different styles render. Please see the different portlets below for when it is appropriate to use each individual style.