SSU Website Form Styles

Note: The forms on this page are all partial examples of form elements. None of them are fully functioning forms, and some may not be completely accessible because they are partial examples.

These styles are for use on web forms. This does not apply to PDF, Word or Excel documents with forms.

Processing Forms

Forms hosted on www.sonoma.edu may be processed using either Formation or Formaldehyde. See the Web Office FAQ for instructions.

Link to the Forms Stylesheet

To use these styles, add the link to the forms stylesheet in your web page's <head>, just after the other stylesheet links.

<link rel="stylesheet" href="/css/global/forms.css" type="text/css" media="screen, projection, print" />

Accessibility Requirements

All web forms on SSU's website must meet accessibility requirements as defined by Section 508 and the CSU ATI. Here are the basic requirements.

  • All inputs (except buttons) must have associated labels using the <label> element and appropriate attributes and values.
  • Related inputs must be grouped together in a fieldset.
  • All instructions, labels and other text needed to properly use and fill out the form must be accessible to assistive technology. This means that headings, paragraphs and other elements that are not part of a form should not be inside the form. In HTML 4 and XHTML 1, valid elements inside a form are:
    • fieldset
    • legend
    • label
    • input
    • select
    • button
    • textarea
    • optgroup
    • option

See the specifications for form in HTML 4 and XHTML1 for more details.

Contact webmaster@sonoma.edu if you need assistance creating a web form.

Fieldset & Legend

The <fieldset> element is used to group related form elements together. The <legend> element acts as a label for a <fieldset>.

For example, in a long form, name and address inputs might be grouped in a fieldset with the legend "Contact Information."

Your Contact Information


(form inputs would go here)

<fieldset>
<legend>Your Contact Information</legend>
(form inputs would go here)
</fieldset>

Fieldsets can be nested - you can have one or more child fieldsets inside a parent fieldset. A child fieldset will use all the same styles as the parent fieldset, including the border. If you wish to remove the border on a child fieldset, use the class no-border on the child fieldset element.

<fieldset class="no-border">

Labels

All visible HTML form <input> elements or controls (except buttons) must have an associated and visible <label> element or title attribute.

Best practices for label placement

  • Labels for radio buttons should immediately follow the radio button on the same line.
  • Labels for check boxes can precede or follow the checkbox on the same line.
  • Labels for text inputs and text areas should precede the input, usually separated by a <br />.

Text Inputs and Text Areas

SSU's styles add a rounded corner to text inputs and text areas, and use a light grey background color. When the user focuses on a text input or text area, the background color changes to white, and the border color changes to a blue border.


<label for="input1">This is a text input:</label>
<br />
<input type="text" name="input1" id="input1" />

 


<label for="input2">This is a text area:</label>
<br />
<textarea name="input2" id="input2" cols="45" rows="5"></textarea>

Radio buttons

Radio buttons usually appear in groups of two or more, and only one radio button may be selected. Each radio button must have an associated label defining the button value. In most cases, radio buttons should be separated with a <br /> to display vertically.

Because only one radio button in a group can be selected, it is best to wrap the radio button group in a <fieldset,> and use <legend> for the question or prompt.

Are you a Seawolf?

If you have a survey with a rating scale, you can arrange those horizontally using the following style.

Here's where the question goes


<fieldset>
<legend>Here's where the question goes</legend>
<div class="width-15 left">
<input type="radio" name="RadioGroup1" value="1" id="radio1" />
<label for="radio1">First Answer</label>
</div>
<div class="width-15 left">
<input type="radio" name="RadioGroup1" value="2" id="radio2" />
<label for="radio2">Second Answer</label>
</div>
<div class="width-15 left">
<input type="radio" name="RadioGroup1" value="3" id="radio3" />
<label for="radio3">Third Answer</label>
</div>
<div class="width-15 left">
<input type="radio" name="RadioGroup1" value="4" id="radio4" />
<label for="radio4">Fourth Answer</label>
</div>
<div class="width-15 left">
<input type="radio" name="RadioGroup1" value="5" id="radio5" />
<label for="radio5">Fifth Answer</label>
</div>
</fieldset>

Checkboxes

Checkboxes can be used alone or in groups. When grouped, more than one checkbox may be selected. There are no specialized styles for checkboxes in SSU's form styles. Checkboxes will use the user's browser styles.

Select menus

There are no specialized styles for select menus in SSU's form styles. Select menus will use the user's browser styles.

Buttons

Use buttons to submit forms. This is the default button style when using forms.css:

<button type="submit" value="submit">Default Button</button>

Button Colors

Several button colors are defined in SSU's form styles. Use the name of the color in the button's class attribute.








Button Sizes

Five button sizes are defined in SSU's form styles. Use the classes tiny, small, medium, large or xlarge to set the size of the button.

You can use both size and color values in the button class. Use a space between the size and color values.


Indicating Required Inputs

If an input must be filled out to submit the form successfully, the associated label must indicate that it is a required field.

If all the inputs in a fieldset are required, the associated legend should be used to indicate this, instead of the marking each of the labels.

Contact Information (required)