You can design forms in Dreamweaver, but you need to do programming on the web server end in order to collect the data submitted on the form. Therefore, we will design forms, but they will not be useable. If you have space on a web server besides the campus server, you can contact your service providers to see if they provide support for forms.

1. Click where you want the form to go
2. In the Toolbox, select Form
3. Click on the top left icon to Insert Form (or use the menu item Insert --> Form)
4. Click on the red outline of the form. It will not change appearance, so notice the Property Inspector. The options in there should have changed.
   1. Type a name for the Form Name (this is optional)
   2. In the Action field, type a URL where your program that will process the form resides. For our purposes, this will remain blank. But if you want the form to work, you will need to figure out what this URL is and input it here.
   3. Select which method you will use. POST is the most common.
      • POST--Sends data in 2 steps
        • browser contacts the form program at the URL you specified
        • sends data to the server
        • more secure
      • GET--Sends data as part of the URL
        • this can get quite long
        • inappropriate for forms that collect a lot of data
5. Add form elements
   1. text fields (name, address, etc)
   2. checkboxes (multiple choice selections, when more than 1 answer is acceptable)
   3. radio buttons (multiple choice selections, but only 1 answer is acceptable)
   4. menus (lists of options)
6. Same pattern for adding all objects
   1. Insert form
   2. Click appropriate button in Toolbox (or use menu Insert-->Form Objects-->specific form object)
   3. Type name for object in the Property inspector
   4. Set form object's properties
   5. Add text (regular HTML) to the object so that the user will know what the field is for.
7. Form objects
   1. Text Fields--for typed responses
      • Type
        • single line--short responses
        • multi-line--longer typed replies
        • password--hide user input
      • Char width--how wide box will appear. This can also vary browser to browser.
      • Max char--how many characters the user can enter. This is not an option in multi-line fields.
      • Num lines--this is available only for multi-line fields. This sets how many lines will appear. You cannot limit the number of characters a user can enter in a multi-line field.
      • Wrap--again, this is only an option for multi-line fields. It specifies what happens when text wraps onto subsequent lines.
        • default--varies from browser to browser
        • off--prevents sentences from wrapping. If text is wider than box, a horizontal scroll bar will appear.
        • virtual/physical--these will wrap text and will look the same to the user. It will transmit differently when the data is sent to you, however. Virtual will transmit as a single line. Physical will recreate line breaks.
      • Init val--this specifies an initial value for the field, so it will not be empty when the user begins.
   2. Checkboxes
      • Checked value--this is what will be sent to your server. The user will not see this value
      • Initial state--determines if the box will be checked or unchecked by default.
   3. Radio buttons--in order to specify that they are all answers to the same question, give them each the same name.
      • Checked value--what is sent to you
      • Initial state--if the value is already selected by default
   4. Pull-down menus and lists
      • Type--menu/list
      • Height--menu can be single line only, and with a list, you can determine how many lines the user will see at a time.
      • Allow multiple--user can select multiple options in list (not available for menus)
      • List values
        • Label--what the user sees
        • Value--what is submitted to server
   5. File field--allows user to submit file
      • some servers will not accept submitted files
      • Set max char and char width (like text fields). For best results, avoid the max char field, since users name have a file name with more characters than you've specified.
   6. Hidden field--not seen by users. You can use this to send information that your server/processor needs but is not inputted by the user.
   7. Buttons--You can either use the default buttons or create your own button (use Image Field). Your own button can only be used to submit, not reset data.
      • Label field--This is the text that appears on the button. You can enter anything you want.
      • Action--Submit, Reset or None. You use None when you want to apply another behavior to the button.
8. Validating the form/making fields mandatory
   • can only validate text fields with Dreamweaver
   • can specify fields to be validated one at a time or all at the same time.
   • to validate a form:
     1. Select the field you want to validate.
     2. Windows-->Behaviors
     3. Click "+" button, choose Validate Form from menu.
     4. Select the field you wish to validate.
     5. Check Required box if the field is mandatory
     6. Choose Accept button
        • Anything
        • Number (can specify acceptable range of numbers)
        • Email address (just makes sure it's formatted as an email address)
     7. Click OK
9. Forms tutorial available at http://www.sawmac.com/missing. Click on Tutorials link and then select platform.

ISP 361 Home | Course Outline