skip to main content | skip to search

Global Find Info and People

Breadcrumbs

You are here: Ohlone Home » College Advancement » Web Team » Procedures and Notes

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 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
  • 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 name and before </label> tag
    • Except do not use colon with radio button/checkbox labels
  • 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
(Include area code.)
Sex:
What programs interest you?: (Select all applicable options.)
  • -


(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 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, [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]		 25 100
Extension
[telephone extension]		 5 15
Email Address, [Type] Email Address 40 200
Student ID Number, Employee/Colleague ID Number 15 50
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 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]		 20 50
Start to End Dates, and other range of dates fields 30 100
URL, Website Address 40 200
Username 20 25
Room Number 15 15
Campus 30 50
Location 30 100

Footer Begins