How to create forms in Adobe Dreamweaver?

Adobe Dreamweaver is a famous web development tool that provides a WYSIWYG editor with standard features like syntax highlighting, auto code completion etc.,. One of the primary thing to design a website is design a form to take user inputs and send the data to the server.

This article explains the steps to create forms using Adobe Dreamweaver.

This article applies to:

  • Adobe Dreamweaver CS5

Step (1). Open Adobe Dreamweaver application.

Step (2). It will display the Welcome Screen. Click on HTML link under Create New section from Welcome screen.

Adobe Dreamweaver - Welcome screen

Adobe Dreamweaver – Welcome screen

Follow the below steps, if Adobe Dreamweaver application is not displaying the Welcome screen when you open the application:

  • Click on File menu; then click on New… menu item (Or press Ctrl + N keys from keyboard). It will open New Document dialog.

    Adobe Dreamweaver - New Document dialog

    Adobe Dreamweaver – New Document dialog

  • From New Document dialog, select Blank Page. It will display Blank Page page types under Page Type: list.
  • Select HTML from Page Type: list and click on Create button.

Step (3). It will create a new HTML document.

Step (4). From Document toolbar, click on Split button. It will split the window and displays 2 panes. Left side pane is the Code pane and right side pane is the Design pane. Code pane will display the HTML code and Design pane will display the preview of the HTML code.

Adobe Dreamweaver - Split window

Adobe Dreamweaver – Split window

Step (5). Place the cursor between <body></body> tags in Code pane.

Step (6). Now click on Insert menu, then over the mouse on Form menu item. It will display Form sub-menu. From Form sub-menu click on Form menu item.

Adobe Dreamweaver - Form submenu

Adobe Dreamweaver – Form submenu

  • It will insert a default form in your HTML code. You can see form HTML code in Code pane and its view in Design pane. OR
  • It will display Tag editor to edit form tag.
    Adobe Dreamweaver - Form tag editor

    Adobe Dreamweaver – Form tag editor

    • Provide necessary field values in respective fields.
    • Once you enter the values based on your requirements, click OK button to insert form tag into your HTML code where you placed the cursor.

Step (7). Select the form from Design pane or from Code pane. The selected form’s attributes will be displayed in Properties dialog which is usually display in bottom of the application’s window.

Adobe Dreamweaver - Form Properties window

Adobe Dreamweaver – Form Properties window

Step (8). Change the properties based on your requirements.

For testing purpose provide file name in Action field. When the form is submitted, it will open the given file.

Step (9). Place the cursor between <form></form> tags in Code pane or place the cursor in form in Design pane.

Step (10). Now click on Insert menu then from Form sub menu, click on Button menu item.

Step (11). It will display Input Tag dialog. Enter necessary attributes and click on OK button.

Adobe Dreamweaver - Input tag editor

Adobe Dreamweaver – Input tag editor

Step (12). It will insert a submit button in the form.

Step (13). Now click on Preview/Debug in browser button from Document toolbar. It will display a pull-down menu. Select the browser to open this document.

Adobe Dreamweaver - Preview in Internet Explorer

Adobe Dreamweaver – Preview in Internet Explorer

  • If the document is already not saved, it will prompt you to save the document. Save the document.

Step (14). Once the file is opened in the browser, click on Submit button to see the functionality. As we are not included any functionality in the form’s action attribute, just it will try to open the file name mentioned in Action attribute in form HTML tag.

by Code Steps

Leave a Reply