Form Standards - Web Team Procedures and Notes

This page is intended for use only by the Web Team.

Standards for Web Team-managed forms (of course, there are some exceptions):

  • Can highlight the form by using a background color class on a <div> around the <form> tag
  • Can highlight a fieldset by using a background color class on the <fieldset> tag
  • Can highlight a table (looks nice on a table inside a fieldset) by using a background color class on the <table> tag
  • Put all setup-related hidden fields after <form> before the fields (to keep them organized)
  • Use fieldsets to group information
  • Place labels before fields
    • Except for radio buttons and checkboxes put field before label
  • NOT ALLOWED ANYMORE (since 20140600). OK to use "layout tables" to align form labels and fields
    • Table 100% width
    • "border" attribute is "1" (use this so that if CSS if disabled, the table has borders and therefore is laid out clearly)
    • "class" atttribute is "formlayout noborder"
      • if want border displayed, use class="formlayout border"
    • "summary" attribute is "Layout table for form."
    • First column usually 35% width
    • Second column usually 65% width
    • To align column at top, on <td> use style="vertical-align:baseline;"
  • Left align labels with colon (:) after label text and before </label> tag
    • Except do not use colon with radio button/checkbox label text
  • Place explanation of type/format of data or other instructions in "smalltext" above field then line break
  • Left align fields
  • Use <ul class="nobullet noindent"> tag for radio button and checkbox fields
  • Explanation of type of data to be entered into field in "smalltext" before field

Example Form:

Asterisk (*) indicates a required field.

Contact Information

Sex:

What programs interest you?: (Select all that apply.)

(Note: Nothing will happen when "Send Info" is pressed on this Example Form.)

Your privacy is important to us. Your personal information will not be sold or shared with unaffiliated third parties except as necessary to maintain and process client accounts or when the law requires it.

Legend for table below:

[Type]
Father, Mother, Employer, Home, Work, Cell, Fax, etc.
Standards for HTML Form Lables and Fields
Standard Label HTML5 type attribute(s) (if not type="text") Usual "size" attribute Standard "maxlength" attribute
First Name, [Type] First Name   30 50
Last Name, [Type] Last Name   30 50
First and Last Name, [Type] First and Last Name   30 100
Name, [Type] Name
[when getting a first and last name doesn't matter]
  30 100
Middle Initial
[leave room for: X.Y. format]
  3 4
Middle Initial or Name, Middle Name or Initial   5 50
Street Address, [Type] Street Address, [also Mailing Address]   40 100
Street Address line 2, [Type] Street Address line 2, [also Mailing Address line 2]
[using class=hide on <label>]
  40 100
City   30 50
County   30 50
State/Province   5 50
ZIP/Postal Code   15 50
Country   30 50
Telephone Number, Fax Number, [Type] Phone Number [ex: Cell Phone Number]
[add (include area code) or, where an extension is expected, add (include area code and extension) - using span class=smalltext]
tel 25 100
Extension
[telephone extension]
tel 5 15
Email Address, [Type] Email Address email 40 200
Ohlone Student ID Number, Employee/Colleague ID Number
[add (7 digits. Do not use a Social Security Number.) - using span class=smalltext, limit max. chars to 7 to prevent SSN from being entered]
type="text" pattern="\d{7}" 7 8
Textarea fields: Comments, Questions, etc.  
  • Not in table column:
    cols="50" rows="5"
  • In table column:
    cols="40" rows="5"
-
Department, Title, Company, Organization, College, University, High School, Employer
[other types of name fields]
  30 100
Course ID
[example: ENGL-101A]
  10 10
Course Name   30 100
Description, Course Description, and other types of description fields
[or use textarea for lengthy content]
  30 200 or 300
Start Date, End Date, Birthdate, Submission Date, and other types of date fields
[add (mm/dd/yyyy) using span class=smalltext]
[Use jQuery UI date script code] 20 50
Start to End Dates, and other range of dates fields [Use jQuery UI date script code] 30 100
URL, Website Address url 40 200
Username   20 25
Room Number
[example: 7101, NC1100]
  15 15
Campus   30 50
Location   30 100
GPA type="number" step="0.1" min="0" max="7" 5 5
Units, Number of Units, [Type] Units type="number" step="0.5" min="0" max="500" 5 3