Forms

Types of Forms   -   Form Template   -   Hidden Fields   -  Text Field Forms  -   Checkbox Forms   - Radio Button Forms  -  Menu & List Options Forms   -   Jump Menus  -   Submit & Reset Buttons  

Example Form Page  - Digital Future Form Assignment  

Forms provide us a way to interact with our viewers:

• fill in data (user surveys, order forms)
• request information for your viewers
• provide a search strategy (dialog boxes for web searching)

Forms are very much a part of e-commerce and shopping carts.

Creating the form is just the first step. The information from the form is "translated" by a script or program (CGI - Common Gateway Interface) written in PERL, C++… or other languages that manipulate text/files. ASP is used to transfer form responses into databases. Form validation utilizes JavaScript to verify the user's reponses.

This information, via the CGI scripting, is sent to a server. The server end of the transmission is generally an electronic mailbox where the mailbox owner can respond to or analyze the data.

Although most hosts will let you create your form, most prefer that you use their scripts. Check with the host to make sure they allow form processing.

Tables are often used to create form page layouts. In addition to all the form types above, a form can also contain lists, paragraphs, and other images.

Items within a form have a name and a value:
o Name: the "name" of the field that the browser will display
o Value: the viewer's input or response

The name and value are transmitted together in the results listing.

Return to the Top

Types of Forms

Form elements are the parts of the farm (text fields, checkboxes…) that the user fills in or selects.

• Text Input (user fills in the field with information)
• Checkbox - listing of items and multiple items can be selected
  • Ex: multiple choice questions, several right answers
• Radio buttons - listing of items but only item can be selected
  • Ex: multiple choice questions, only one right answer
• Menu Options - pull-down or scrolling list of items to select from
• Jump Menu - list of links, user selects a link and the browser will "jump" to that web page

Return to the Top

Creating a Form Shell

• Place the cursor on the page - where the form will be located
• Insert > form   or   Objects > forms panel
• Select a form, then click on one of the form buttons
• The form appears as a rectangle with a red dotted line surround it
  TIP: if the form does not appear, select view > visual aids > invisible elements to "turn on" the red dotted lines
• Click inside the form rectangle
• Form Inspector (sets the form elements) -
  • Name: type in a name for the form. The form name is used by the CGI script. If you don't give the form a name, Dreamweaver will supply a generic name.
  • Action: enter the URL for the processing script

TIP: scripts are programs, such as PERL, C++, asp, cfm, jsp, cgi
Ex: mailto:llb5610@dcccd.edu

• Method:
• post - submits the form data via email
  (default for browser, used most often)
• get - the results are displayed on your screen (ex:search engines)
• default - submits according to the default setting of the user's browser

TIP: You can create the form and fill in the ACTION and METHOD later.

Return to the Top

Hidden Fields

• Place the cursor at the location within the form that will display the text box.
• Insert > form object > hidden field
  or
  Objects > forms panel > hidden field button
• Dreamweaver displays a hidden field marker in the dotted form.
• Form Property Inspector -
  Hidden Field box: enter a nickname
  Value: enter the field value

Return to the Top

Text Field Form

Text Fields are often used to solicit information from your user: name, address…

• Place the cursor at the location within the form that will display the text box.
• Insert > form object > text field
  or
  Objects > forms panel >text field button
• A dotted line surrounds the text box
• Text Field Property Inspector:
  • Name: enter a nickname for the text field
  • Char width: the visible width (in characters) of the text box that the browser will display
  • Max Chars: maximum number of text characters the user can enter (leaving blank allows them unlimited text). This is often set to a specific number for zip codes, telephone numbers…
  • Select type:
    • single line - short responses
    • password - browser will display asterisks instead of the user's response. Transmits via the Internet the same as regular text - is not protected! You will need an encrypted connection for real security.
    • multi-line - if this is selected, an additional menu opens:
      • Num lines - number of lines that will display
      • Wrap - determines what will happen when text is typed that does not display in the box:
      • Off - disables word wrapping. The text scrolls to accommodate longer lines. The user must press ENTER at the end of each line.
      • Virtual - text wraps to the next line automatically so text will remain visible in the browser window. The CGI script will submit the text as one long line. This is the recommended format!
      • Physical - text wraps to the next line automatically and the text is submitted in the same format (looks exactly the same).
      • Default - varies from one browser to another
  • Init Value: normally left blank unless you wish the viewer to see text in the box when the page first displays. The viewer than will change, erase or type over this.

Repeat the Text Field Property Inspector steps for each text line.

Return to the Top

Check Box Forms

Place the cursor at the location within the form that will display the text box.
Type the question.
Create the potential answers (choices) for the user:

• Insert > form object > checkbox
  or
  Objects > forms panel > checkbox
• A dotted line surrounds a small check box
• CheckBox Property Inspector:
  • Name: enter a nickname for the question
  • Checked Value: nickname for the user's response (potential answer)
  • Initial State: checked or unchecked (default)
  • In Dreamweaver, type the potential answer (before or after the checkbox) that the browser will display. (Each potential answer should identify its corrresponding checked value)

NOTE: The same NAME is used for all the potential answers to each question. Each choice has a different CHECKED VALUE.

Repeat the CheckBox Property Inspector steps for each potential answer to the question.

Return to the Top

Radio Button Forms

Place the cursor at the location within the form that will display the text box.
Type the question.
Create the potential answers (choices) for the user:

• Insert > form object > radio button
  or
  Objects > forms panel >radio button
• A dotted line surrounds a small radio button
• Radio Button Property Inspector:
  • Name: enter a nickname for the question
  • Checked Value: nickname for the user's response (potential answers)
  • Initial State: checked or unchecked (default)
• Repeat the Radio Button Property Inspector steps for each potential answer to the question.

NOTE: ALL the buttons will share the same checked value nickname!

TIP: To increase the spacing between radio and checkbox items, use the non-breaking space button. You can also insert a line break after each item so they appear in a verticle listing.

Return to the Top

Menus / Selection Lists

Menus accomplish the same listings as checkboxes or radio buttons, however, menus take up less room on the screen.

A scrolling menu creates a multi-line display
A pull-down menu creates a single-line display

Place the cursor at the location within the form that will display the text box.
Type the question.
Create the potential answers (choices) for the user:

• Insert > form object > list/menu
  or
  Objects > forms panel > list/menu
• A dotted line surrounds a small popup menu
• List/Menu Property Inspector:
  • Name: enter a nickname
  • Type: select menu (scrolling) or list (pulldown)
  • Height: how many lines the menu (scrolling list) will display
  • Selections: allow multiple option if you wish the users to select more than one item from the list (only for scrolling lists)
  • List Values: click to open the list value popup window:
    • type a name (item label) for the first item in the list
    • press TAB to move to the value column - type in the name that will appear in the browser display (generally the same as the item label)
    • Click OK to close the popup window and add the items to the form.

    Use the "+" button to add another item to the list
    Use the "-" button to delete items from the list
    Use the up and down arrows to rearrange items in the list - select an item and click on the appropriate arrow

TIP: Select one item from the Initially Selected List in the Forms List Property Inspector if you wish an item to be "initially selected" when the browser displays the form. If the user doesn't make a selection, this item will be submitted with the form.

To deselect the item, hold down CTRL while clicking on the item.

TIP: If you are allowing the user to make multiple selections, tell the users this! Make sure to include the directions on HOW to make multiple selections: CTRL while clicking on the desired selection

Return to the Top

Jump Menu

Place the cursor at the location within the form that will display the text box.
Type the text that describes the jump menu.
Create the selection listing:

• Insert > form object > jump menu
  or
  Objects > forms panel >jump menu
• A dotted line surrounds a small popup menu
• Insert Jump Menu popup window:
  • Menu Items: enter a nickname for the text field
  • Text: type the text to appear in the browser display
  • When Selected, go to URL: type in the URL or locate the relative link that the selection will go to
  • Open URL In: If your page utilizes frames, select a target frame - otherwise accept the default window
  • Menu Name: type in a nickname for the menu
  • Options:
    • Insert go button after menu - GO button appears after the menu listing, this button must be clicked before the browser will jump to the selected web page
    • Select first item after URL change - - menu reverts to the first item in the list after a link has been selected. If this is checked, the first item must be a "false link" - "please select one"
    • Click OK to close the popup window add the jump menu to the page.

  Use the "+" button to add another item to the list
  Use the "-" button to delete items from the list
  Use the up and down arrows to rearrange items in the list - select an item and click on the appropriate arrow

TIP: A Jump Menu is actually a popup menu attached to JavaScript.

Return to the Top

Submit & Reset Buttons

The user sends the information to the server by clicking the submit button. The user can "redo" the form prior to submitting it by clicking the reset button.

• Place the cursor at the location within the form that will display the text box.
• Insert > form object > button
  or
  Objects > forms panel >button
• A dotted line surrounds a small button. By default this button is the submit button

• Submit Property Inspector:
  • Name: enter a nickname for the button
  • Label: type the text that will appear on the button (this does not have to match the nickname. Ex: send it, go!)
  • Action: select the item that corresponds with the label:
    • Submit - sent it via the Internet
    • Reset - sets all the fields back to their original display so the user can redo the form
    • None (nothing happens - used by JavaScript programmers for popup windows, popup messages...)

TIP: You can use a graphic image for the submit (not reset) buttons.

• Place the cursor at the location within the form that will display the text box.
• Insert > form object > image field
  or
  Objects > forms panel >Insert Image Field
• Dreamweaver displays the Insert Image popup window.
  • Locate the appropriate image button and click select.
  • The image appears with a dotted line surrounding it.
• In the Image Form Property Inspector, type SUBMIT or RESET in the Image Field box. Change the image name to either SUBMIT or RESET - this tells the browser to treat the image as this type of image button.

Return to the Top