Create a Form in Dreamweaver

1
Create a Form in Dreamweaver
Welcome

• Go to
• Introduction
• Step 1
• Step 2
• Step 3
• Step 4
• Step 5
• Step 6

• Introduction
• Goals
• Purpose
• Scope
• Prerequisites
• Install (if needed) and open programs
• Dreamweaver MX 2004
• Be familiar with
• General use of Dreamweaver MX 2004
• General process of web page creation

1 2 3 4 5 6
2
Create a Form in Dreamweaver
Step 1
Definitions Explanations as needed
Go to Introduction Step 1 Step 2 Step 3 Step
4 Step 5 Step 6

• Creating a Form in a Document
• Open Dreamweaver MX 2004
• Select HTML in Create New Menu to open a new
  document.
• (Or select File, then New, then HTML under Basic
  Page Menu click Create.)
• Go to Insert Menu and select Form.
• (The form area is displayed as a dashed,
  red-lined box.)
• Click File, then Save to save file.
• Locate appropriate place for file name file
  using lowercase letters and no spaces
  (form.html).

1 2 3 4 5 6
3
Create a Form in Dreamweaver
Step 2
Definitions Explanations as needed

• Go to
• Introduction
• Step 1
• Step 2
• Step 3
• Step 4
• Step 5
• Step 6

• Creating a Table within the Form
• Click cursor inside body of form
• Click Insert, then Table to insert table into
  form.
• (The Table Dialog box will open).
• Select appropriate numbers of rows and columns
• (i.e. six rows and two columns).
• Assign appropriate table width and cell borders
• (i.e. 90 percent and 0 borders).
• Click OK.
• Merge cells (as needed) for Titles, Headings, and
  Sub-headings.
• Highlight cells by clicking and dragging cursor
  across cells you want to merge.
• Click cell merger button to merge cells.
• (Found in lower left-hand of page properties box
  at bottom of page).
• Type heading inside merged cells.

1 2 3 4 5 6
4
Create a Form in Dreamweaver
Step 3
Definitions Explanations as needed
Go to Introduction Step 1 Step 2 Step 3 Step
4 Step 5 Step 6

• Displaying Forms Palette
• Click Common pull-down menu to display palette
  choices.
• Click Forms to display Forms Palette with Form
  Object choices.
• Place cursor over buttons in palette to
  understand their purpose.

1 2 3 4 5 6
5
Create a Form in Dreamweaver
Step 4
Definitions Explanations as needed
Go to Introduction Step 1 Step 2 Step 3 Step
4 Step 5 Step 6

• Adding Form Objects to Form
• Click cursor inside second row in first column.
• Type directive or name for form object.
• (i.e. Your Name (Last, First))
• Click cursor inside second row in second column.
• Click Text Field icon in Forms Palette.
• Name the text field by typing name in box in
  lower left corner of Properties box (at bottom of
  page).
• Follow directions 1 3 to add any form objects,
  except
• Add radio button or checkbox in second column,
  then type button or box name after it.
• Press Shift Enter to create a single line break
  to separate radio buttons or checkboxes from each
  other within the same row of a table.
• Click Button icon in Forms Palette to create
  submit or reset buttons.
• Note A reset button is often unneeded and will
  upset the user if clicked accidentally.

1 2 3 4 5 6
6
Create a Form in Dreamweaver
Step 5
Definitions Explanations as needed
Go to Introduction Step 1 Step 2 Step 3 Step
4 Step 5 Step 6

• Controlling Form Destination
• Click cursor to left of table, but inside form
  box (dashed, red line).
• Click Hidden Field icon in Forms Palette to
  create form destination.
• Designate hidden field properties by typing one
  of the following names in box in lower left
  corner of Properties box (at bottom of page)
• inform_recipient
• Type e-mail address in Value field in Properties
  box.
• Note All form information will now be sent to
  that e-mail address.
• inform_subject
• Type a Form Subject in Value field in Properties
  box.
• (i.e. Class Poll)
• Note This will appear as the subject on forms
  submitted to your e-mail address.

1 2 3 4 5 6
7
Create a Form in Dreamweaver
Step 6
Definitions Explanations as needed
Go to Introduction Step 1 Step 2 Step 3 Step
4 Step 5 Step 6

• Checking that Form Works
• Select File, then Save to save document.
• Press F12 on keyboard to open usable form.
• Fill out and submit.
• Check e-mail to see if it was sent.

1 2 3 4 5 6