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):

  • Put all setup-related hidden fields after <form> before the fields (to keep them organized)
  • Use fieldsets to group information
  • Place labels before fields
    • <label for="Last_Name">Last Name:</label>
      <input name="Last_Name" type="text" id="Last_Name" size="30" maxlength="50" />
    • Except for radio buttons and checkboxes put field before label
      • <input type="checkbox" name="Programs[]" value="DSPS" id="Programs_0" />
        <label for="Programs_0">DSPS</label>
  • Left align labels with colon (:) after label text and before </label> tag
    • <label for="Last_Name">Last Name:</label>
    • Except do not use colon with radio button/checkbox label text
  • Include instructions for completing a field inside that field's <label> tag (so a screen reader program will read the instructions before the field)
    • Example:
      <label for="Telephone_Number">Telephone Number: <span class="forminstructions">(Include area code.)</span></label>
  • Arrange form labels and fields so they light up at the left edge. Do not use a table to layout the form.
  • Use <ul class="nobullet noindent"> tag for radio button and checkbox fields; each selection is its own list item
    • <ul class="nobullet noindent">
      <li>
      <input type="checkbox" name="Programs[]" value="DSPS" id="Programs_0" />
      <label for="Programs_0">DSPS</label>
      </li>
      <li>
      <input type="checkbox" name="Programs[]" value="EOPS" id="Programs_1" />
      <label for="Programs_1">EOPS</label>
      </li>
      <li>
      <input type="checkbox" name="Programs[]" value="Puente" id="Programs_2" />
      <label for="Programs_2">Puente</label>
      </li>
      <li>
      <input type="checkbox" name="Programs[]" value="Other" id="Programs_3" />
      <label for="Programs_3">Other</label>

      <label for="OtherDescription">- if other, please describe: </label>
      <input name="OtherDescription" type="text" id="OtherDescription" size="30" maxlength="200" />
      </li>
      </ul>
  • Required by the Tectite FormMail script used by forms to send form data to an email address: For checkboxes, use [] at the end of the name attribute on all of the checkboxes in each group
    • <input type="checkbox" name="Programs[]" value="Other" id="Programs_3" />

Example Form:

Asterisk (*) indicates a required field.

Contact Information

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] [use autocomplete="off" to prevent form data from being remembered by the user's computer (confidential number)]
type="text" pattern="\d{7}" autocomplete="off" 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
[pattern="[0-9]" ensures that iOS on mobile devices displays a numeric keypad]
type="number" step="0.1" min="0" max="7" pattern="[0-9]" 5 5
Units, Number of Units, [Type] Units
[change min and max and step as needed; pattern="[0-9]" ensures that iOS on mobile devices displays a numeric keypad]
type="number" step="0.5" min="0" max="500" pattern="[0-9]" 5 3