Shop by Category

Shopping Cart

Account Login

Help and Tips

Resources :: Web Design Tutorial


How to Create and Validate Website Forms in Dreamweaver

 

If you need to collect information from people on your web page, try using a website form. Creating one isn't complicated with Dreamweaver. You can validate the form fields before the form is submitted. Don't worry if you're not familiar with HTML for this web tutorial. Dreamweaver creates both the JavaScript and HTML codes for you.

 

Directions:

Creating the Website Form


  1. Start Dreamweaver and load the page where the online form will go.

  2. Switch to Design view and place your cursor where you want to insert the form.

  3. Select "Insert," "Form" and "Form" from the toolbar. Dreamweaver places a form box (surrounded by red, dotted lines) on your page.

    Tip: To view the dotted lines (if they are hidden on your page), select "View," "Visual Aids" and "Invisible Elements" from the toolbar.

  4. Select "Window" and "Properties" from the toolbar to open the Properties Inspector in the bottom pane.

  5. Click the yellow folder icon by "Action" and navigate to the script file you want to use to process the file.

    If you don't have a form processor, no worries! Check out our list of scripts for some options.

  6. Click the "Method" drop-down and select the method you want to use.

    Tip: In most cases, this is set to "POST." The "POST" is more secure and embeds the data when it's submitted. So, if you're collecting sensitive data on your website, use this method.

    Other fields within the Properties Inspector are optional.

  7. Make sure your cursor is within the form box. Then select "Insert" and "Form" from the toolbar. Select the type of field you want to add from the pop-up list.

  8. To insert a text field or text area into your form, choose "Text Field" or "Textarea" from the pop-up list. An "Input Tag Accessibility Attributes" dialog box opens.

    Type in a label, such as "Name" or "Comments" into the "Label" text field and click "OK." Then press "Enter" to add a double-space or "SHIFT+Enter" to single space.

  9. To insert a submit button, choose "Button" from the pop-up list. Leave the "Label" text field empty in the dialog box and click "OK."

    Select the submit button on your page and go to the Properties Inspector window in the bottom pane.

    To change the name of your button to something else, change the "Value" text field to the name you want to use.

  10. To insert a reset button, repeat step 9. Then change "Action" to "Reset form" in the Property Inspector.

 

Validating the Website Form


  1. Select "Window" and "Behaviors" from the toolbar to open the "Behaviors" panel. It will open on the right.

  2. Click the "Add Behavior" button in the panel and select "Validate Form." The "Validate form" dialog box opens with the fields within your form.

  3. Highlight the first field you want to validate in the "Named fields" box. Checkmark "Required" and choose the type of data you want to accept, "Anything," "Number," "Email address" or "Number from."

  4. Highlight the next field you want to validate. Then follow the previous step to make it a required field and choose the acceptable data.

  5. Click "OK" once you've chosen all your required fields.

Need a form processor or script for your website?

Check out "Form Processors / Scripts for Websites and Templates." You can use an online form with simple copy and paste options as well.


If you've found this web design tutorial informative or helpful, please spread the word by linking to Dollar Templates and Fonts. Thank you.


Return to Resources