Accessibility
Adobe
Sign in Privacy My Adobe

Community Publishing

Created:
2009-11-27
Last Updated:
2009-11-27
by
User Level:
Beginner
Products:
Dreamweaver CS4,CS3,DW8

Need more tips and tutorials?


Creating HTML Forms in Dreamweaver

Dreamweaver makes the creation of HTML forms a snip, but it uses two very different approaches, depending on whether the focus is in Design view or Code view. Unless you understand the differences, this can be rather confusing. After reading this brief article, you should no longer be confused.

  • This article deals only with creating forms. Writing scripts to process form input is a more advanced subject that depends on a server-side technology, such as Perl, PHP, or ColdFusion.
  • All the screenshots were taken in Dreamweaver CS4 on Windows Vista, using the Dreamweaver Classic workspace layout. Everything works identically in the Mac version.

Inserting a form

Before you can add form elements, such as text fields, drop-down menus, and submit buttons, to a web page, you must first insert a form. This creates the <form> tags that identify the form and give the browser instructions as how to process the form.

To insert a form, select the Forms category/tab in the Insert panel/bar, and click the Form button (it's the first one). Alternatively, use the menu option Insert > Form > Form.

What happens next depends on whether the cursor was active in Design view or Code view (in other words, the last place you clicked in the Document window).

When Design view is active

If your cursor is active in Design view, Dreamweaver automatically inserts the <form> tags in Code view, and displays a red dotted outline in Design view indicating where the form has been inserted, as shown in the following screenshot:

Inserting a form in Design view

As you can see from the preceding screenshot, Dreamweaver automatically gives the form the same id and name attributes. It sets the method attribute to post, and leaves the action attribute empty.

You can change any of these values in the Property inspector, as shown next (click the red dotted outline of the form, if the Property inspector doesn't show the form properties):

Changing form attributes in the Property inspector

  • Form ID: Dreamweaver automatically calls the first form in a page form1. If you add another form, it calls it form2. You can either accept these default names or choose your own. An ID must always be unique within a page.
  • Action: This is where you enter the address of the script that processes the form. HTML does not have any form processing capabilities, so this should point to a script that uses a server-side language, such as Perl, PHP, ColdFusion, etc. If you leave this field blank, the form becomes "self-submitting". What this means is that the form attempts to submit the input data to the current page. This is a common technique, where the server-side script is included above the DOCTYPE declaration, and is executed only when the form has been submitted.
  • Method: This tells the browser how to submit the data. POST should be used for forms that change values in a database, and for sending emails, or uploading files to a server. GET adds the data to the end of the URL, and should be used for database searches. The Dreamweaver popup menu has a third option, Default. This is the same as GET. It's best to use POST or GET, so the meaning is always clear.
  • Target: This should normally be used only in a frameset to indicate the frame in which the processing script is located.
  • Enctype: Leave this blank. Dreamweaver automatically inserts the correct value if your form is being used to upload files.
When Code view is active

If you are working in Code view or in Split view with the cursor active in the code, Dreamweaver reacts in a completely different way, and presents you with the Tag Editor for a form, as shown in the following screenshot:

Tag Editor for a form

The Tag Editor is designed for advanced users who want access to a wider range of attributes than offered by the Property inspector. If you're comfortable with HTML code, go ahead and fill in the relevant fields. Notice, however, that the default value for Method is get, rather than POST (the values are case-insensitive). Also, giving the form a name in this dialog box does NOT automatically assign the same value as its ID. You set the ID separately in the Style Sheet/Accessibility section of the Tag Editor.

If you get this dialog box by mistake, just click Cancel. Dreamweaver dismisses the dialog box, and makes no changes to your HTML code.

If you click OK, Dreamweaver inserts the <form> tags into Code view. When you click in Design view, the same red dotted outline is displayed as shown in the first screenshot.

Adding form elements

Once you have a form, you can begin adding form elements. Make sure that your cursor is between the form tags or inside the red dotted outline, and use the buttons on the Forms category/tab of the Insert panel/bar, or use the relevant option in the Insert > Form submenu. Again, what happens depends on whether your cursor is active in Design view or Code view.

When Design view is active

By default, when you insert a form element in Design view, Dreamweaver opens the Input Tag Accessibility Attributes dialog box shown in the following screenshot:

Input Tag Accessibility Attributes dialog box

 As a minimum, you should enter an ID for the element (this is also used as the name attribute). Optionally, add a label. This is text that will be inserted in <label> tags. If you add a label, select one of the radio buttons to indicate how the <label> tag is handled:

  • Wrap with label tag: This wraps both the text in the Label field and the form element inside <label> tags.
  • Attach label tag using 'for' attribute: This keeps the <label> separate from the form element, and is the way accessibility experts recommend using. It uses the id attribute to identify the form element like this: <label for="search">Search holidays: </label>.
  • No label tag: Select this if you don't want to add a label. This is used mainly with submit buttons.

Position determines whether the label goes before or after the form item. Dreamweaver automatically selects the correct value for this, using the position recommended by accessibility experts. Disabled people expect the label to be in a particular position, so don't change the value unless you have a really good reason to do so.

Access key and Tab Index are optional. Unfortunately, there are no agreed standards for accesskey. The tabindex attribute sets the order in which elements are given focus by the Tab key. If you use this option, it's a good idea to allocate numbers in steps of 10. This avoids the need to renumber all your form elements if you decide to add another at a later stage.

If the Input Tag Accessibilty Attributes dialog box doesn't appear when inserting an element in Design view, enable it by opening the Preferences panel from the Edit menu on Windows or the Dreamweaver menu on a Mac, select the Accessibility category, and make sure there's a check mark in the Form objects checkbox.

When you click OK in the Input Tag Accessibility Attributes dialog box, Dreamweaver inserts the form element with all the options you have selected. If you click Cancel, Dreamweaver still inserts the form element, but does not set any of the accessibility attributes.

Once the form element has been inserted, select it in Design view to bring up the element's properties in the Property inpsector, and make any changes you want there.

When Code view is active

When Code view is active, Dreamweaver presents you with the form Tag Editor again, and not the Input Tag Accessibility Attributes dialog box. To add accessibility attributes, select the Style Sheet/Accessibility section on the left. As you can see from the following screenshot, the form Tag Editor has no option for adding a label. You need to add that manually in Code view.

Accessibilty options in form Tag Editor

Which should I use?

It's a personal choice, but most people, even HTML experts, find the options available through Design view offer a wider choice of accessibility attributes, and are simpler to use.

Creative Commons License
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License