Revised Forms Workflow - Creative Cloud & Dreamweaver CS6

The addition of HTML5 form elements and attributes changes the basic workflow for creating a form in Dreamweaver as you'll see in the following video.

Form Creation Walkthrough

To insert a form element:

  1. In the Insert panel, under the Form category, click the Form icon.
  2. Use the Property Inspector to make modifications to the form, apply actions and set characters.
  3. Additionally, you can insert a text input field by clicking on the Text icon in the Form category of the Insert panel. CS6 will input the code tags into the designated element.
  4. Set the name of the input tag in the Property Inspector.
  5. Go to the Form category (in the Insert panel) and select the Label icon.
    Be sure that nothing is selected when you click the Label icon or the tags will wrap around the selected element (which is not recommended).
  6. In the Label tags, type the name you plan to use for the form element. Be sure that this is done in code view.
  7. In the initial label tag, click between the word "label" and the close of the tag.
  8. Type a space and add the "for" attribute.
Note: The name of the input tag and the "for" tag will stay synchronized as per the programming of CS6.

Applying Other Features

Select the form element, then go to the Property Inspector to apply additional features. The following options can be applied to the form from the Property Inspector:

  • Disabled
  • Required
  • Auto Complete
  • Auto Focus
  • Read Only
  • Form - allows users to to set a form function outside of the form and associate the form elsewhere on the page.
  • Pattern - allows regular expression that validates the user input.
Spry validation elements are no longer listed under the Forms category; they can now be found in the Spry category.

Dreamweaver 12.1 Creative Cloud Update


Dreamweaver is a popular Adobe program for creating websites and applications.  It supports HTML5, CSS3, PHP, FTP, jQuery and more; and it works with HostGator web hosting.

You can learn more about Dreamweaver by visiting Adobe's website or the video learning portal, Adobe TV.  The video in this article is courtesy of Adobe TV.