Forms

Example Form

Opening/Closing Form definitions
Entry Fields:
     Text Box
     Text Area
     Check Box
     Radio Button
     Select Menu
Submit and Action Fields
Quick Reference

Notes:

• keep form field names and values one word, or use underscores to separate words; do not use spaces
• every field must be named - usually the name is a one-word description of the field: firstname,lastname,phone,fax,comments...
• name = field name; value = answer - both the name and value will be sent when submitted.
• adding returns within your code inside the table data tags can cause white space in your browser. Try to keep each cell on one line - it can wrap, but with no hard breaks:
  <TR>
      <TD> text text text text text </td>
  </tr>

Opening/Closing Form definitions

Code
<form name="test" method="post" action="http://www.musc.edu/cgi-bin/formmail.pl"> ... </form>

This code is what it would look like if using MUSC's FormMail option, which e-mails the results. If submitting to a database, the action would go to another script to perform the transfer.

Your entry fields (below) must fall inside the opening and closing form tags in order to be processed and displayed properly.

Definitions:

action: specifies a url of the application that will process the form; usually this points to a cgi script on the server.

method: options are "get" or "post" - this tells the browser how to submit the form. Get is the default; the information is attached and sent along with the URL.
Post puts the form information in a separate part of the body of the request. Post is the preferred method.

Fieldset (optional) - <fieldset> ... </fieldset>
- groups related controls and labels; acts like <div> tag except used for grouping fields. This tag makes fields more accessible to nonvisual browsers (ADA).

Entry Fields

Single Line Text Box - user enters one line of text - can be one word or several words.

<input type="text" name="firstname">

Text Box Options

Size - width is defined in character width ("20" = 20 characters wide)

<input type="text" name="firstname" size="20">

Maximum number of characters allowed - Maxlength is defined in character width ("20" = 20 characters wide); this will not change the size of the box, but it will restrict how many characters can be typed in. Maxlength is very handy when using fields that are for a specific number of characters, like phone number, zip code, social security number, etc.

First Name: <input type="text" name="firstname" size="20" maxlength="40">
First Name:

Initial Value - this text will appear in the box already, and can be changed or deleted by the user.

E-mail: <input type="text" name="email" value="@musc.edu">
E-mail:

multi-line text area - several lines of text/paragraph; accepts line breaks within the text box. Width is defined by columns (cols); height is defined by rows.

<textarea name="million" rows="6" cols="30"></textarea>

Text Area Options

Word Wrap
off - no automatic wrapping
virtual - wraps on screen, but not when submitted
physical - wraps on screen and when submitted

<textarea name="million" rows="6" cols="30" wrap="physical"></textarea>

Initial Value - puts the word(s) inside the box; the user can change or delete these words.

<textarea name="million" rows="3" cols="15" wrap="physical">I would...</textarea>
I would...

Checkbox - name and value are required
When using checkboxes, each selection within one question should have the same name; the values of each will be different.

Checkboxes are used when the user is allowed to make multiple selections. More than one box can be checked.

<input type="checkbox" name="color" value="blue">Blue
<input type="checkbox" name="color" value="red">Red
<input type="checkbox" name="color" value="yellow">Yellow

Blue
Red
Yellow

Checkbox options

pre-checked <input type="checkbox" name="color" value="blue" checked>

Radio Buttons - name and value are required
When using radio buttons, each selection within one question should have the same name; the values of each will be different, just like with checkboxes.

Radio buttons are used when the user is allowed to make only one selection. No more than one button can be selected.

<input type="radio" name="vehicle" value="small_car" checked>Small Car
<input type="radio" name="vehicle" value="sports_car">Sports Car
Small Car         Sports Car

Notes:
1. The pre-select option is available, just as with checkboxes. Just type in the word "checked" on the button you wish to appear selected (see "Small Car" button).

2. Browser challenge: when Tabbing through selections, Netscape will take the user through each option via the tab key; hitting the space key or Enter will make the selection.

In IE, tabbing through the form will take the user to the first radio button option, then another tab will take the user to the next field. You have to use the arrow keys to navigate through the radio choices and select.

Pull-down menus/lists - "select"
<select name="age">
<option value="18-25">18-25</option>
<option value="26-34">26-34</option>
<option value="35-44">35-44</option>
<option value="45-54">45-54</option>
<option value="55-64">55-64</option>
<option value="65+">65+</option>
</select>
18-25 26-34 35-44 45-54 55-64 65+

Select menu options

pre-selection option
<option value="35-44" selected>35-44</option>
18-25 26-34 35-44 45-54 55-64 65+
When nothing is marked as "selected" the window shows the first option in the list.

multiple selections - Adding the word "multiple" to the opening select tag will allow the user to choose more than one answer, by holding down the Ctrl key when clicking on the options.

<select name="age" multiple>
18-25 26-34 35-44 45-54 55-64 65+
Browser challenge:
Netscape: displays the full list
IE: displays up to 4 rows with a scrollbar if there are more than 4 selections.

number of rows showing

<select name="age" size="2">     18-25 26-34 35-44 45-54 55-64 65+

<select name="age" size="3"> 18-25 26-34 35-44 45-54 55-64 65+

Submit and Action Fields

Submit/Reset Buttons
<input type="submit" name="Submit" value="Send Results">
<input type="reset" name="Reset" value="Clear Answers">
 

Note: Both buttons default to the text "Submit" and "Reset," but each can be modified to better describe your action by using the "value" attribute. If no value is defined, the buttons will read "Submit" and "Reset."

Clicking Submit will execute the action you defined in the "action" in the opening form code: either e-mailing form results or posting them to a database.

Reset is an automatic button, recognized by any browser. It clears all the inputted information, so the user can start over. You don't need to define anything for this button. It's a pre-programmed action.

Hidden fields
<input type="hidden" name="subject" value="test_form">

If using MUSC's supported FormMail (which e-mails results to an address), the following options are available:

Subject - optional: inputs defined text into subject field of e-mailed results (user doesn't see this)
<input type="hidden" name="subject" value="test_form">

Required - optional: you can define certain fields to be required before it will send; user will get an error telling them to fill out these fields before submitting. Use the field names, separated by a comma. You can select zero or any number of fields.
<input type="hidden" name="required" value="name,email,million,vehicle">

Recipient - required: this is the e-mail address the forms will be sent to.
<input type="hidden" name="recipient" value="adamskr@musc.edu">

Redirect - optional: you must define a full URL path. This will take the user to the defined web page upon hitting the Submit button. You can send them back to the main site or to a thank you page or any other web address, as long as it's valid.
<input type="hidden" name="redirect" value="http://www.musc.edu/ ~adamskr/ccit/training/ Forms/thankyou.html">

Hidden fields can be used to transfer information to you (recipient): Ex. a date or time field to let you know when it was filled out and sent, etc. The user can not see these fields on the form, and they won't appear when printed. They will not be recognized in a tab sequence. However, they can be seen in the code if source is viewed.



Other Form attributes:
- read-only: prevents user from changing the field text
- tabindex: sets tabbing order
- accept-charset: part of web accessibility initiative to specify alternative character sets to represent non-Western writing systems
- accesskey: assigns keyboard shortcut to an element
- password text field: renders entered text as asteriks
- image button: uses image instead of submit button
- enctype: specifies encoding for form submission
- insert file: allows user to browse for a file to attach with form

Formatting
To format or align form elements, you can use the <pre> ... </pre> tags (tedious, but results in same overall look), or tables. With tables you can define column and row widths to align fields and text (more common and usually easier).

About FormMail...
FormMail is a limited program used to e-mail form results. Not all form options are available with this program, but it's an easy process for simple html forms. Get More Info on FormMail

e-mail - the e-mail field, when filled out or required will result in populating the "from:" field in the e-mailed results. If you do not have an e-mail field, the "from:" will be blank/anonymous.

Results - emailed results will appear in the body of the e-mail, as plain text, with each field on a separate line:

   Subject: test_form
   Date: Tue, 10 Sep 2002 15:57:34 -0400 (EDT)
   From: dfgfdg@musc.edu ()
     To: adamskr@musc.edu

Below is the result of your feedback form.  It was submitted by
 (dfgfdg@musc.edu) on Tuesday, September 10, 2002 at 15:57:34
---------------------------------------------------------------------------

name: dfgfdg

million: test test test test test test test test

color: blue, yellow, red

vehicle: midsize_car

age: 26-34

Submit: Send Results

---------------------------------------------------------------------------

Quick Reference

Field	Code (with options)
Open Form	<form name="test" method="post" action="http://www.musc.edu/cgi-bin/formmail.pl"> ... </form>
Text Box	<input type="text" name="email" size="20" maxlength="40" value="@musc.edu">
Text Area	<textarea name="million" rows="3" cols="15" wrap="physical">I would...</textarea>
Check Box	<input type="checkbox" name="color" value="blue" checked>
Radio Button	<input type="radio" name="vehicle" value="small_car" checked>
Select Menu	<select name="age" size="3" multiple> <option value="18-25" selected>18-25</option> <option value="26-34">26-34</option> <option value="35-44">35-44</option> <option value="45-54">45-54</option> <option value="55-64">55-64</option> <option value="65+">65+</option> </select>
Action buttons	<input type="submit" name="Submit" value="Send Results"> <input type="reset" name="Reset" value="Clear Answers"> <input type="hidden" name="recipient" value="adamskr@musc.edu"> <input type="hidden" name="required" value="name,email,million,vehicle"> <input type="hidden" name="redirect" value="http://www.musc.edu/~adamskr/thankyou.html"> <input type="hidden" name="subject" value="Survey form">

More Help: Forms in Dreamweaver instructions

Next --> Forms Exercise