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 things to design a website is to 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 the HTML link under Create New section from the Welcome screen.
Follow the below steps, if the Adobe Dreamweaver application is not displaying the Welcome screen when you open the application:
- Click on the File menu; then click on the New… menu item (Or press Ctrl + N keys from the keyboard). It will open the 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 the Document toolbar, click on the Split button. It will split the window and displays 2 panes. The left side pane is the Code pane and the right side pane is the Design pane. The code pane will display the HTML code and the Design pane will display the preview of the HTML code.
Step (5). Place the cursor between <body></body> tags in Code pane.
Step (6). Now click on the Insert menu, then over the mouse on the Form menu item. It will display the Form sub-menu. From the Form sub-menu click on the Form menu item.
- It will insert a default form in your HTML code. You can see form HTML code in the Code pane and its view in the Design pane. OR
- It will display Tag editor to edit form tag.
Adobe Dreamweaver – Form tag editor - Provide necessary field values in respective fields.
- Once you enter the values based on your requirements, click the OK button to insert the form tag into your HTML code where you placed the cursor.
Step (7). Select the form from the Design pane or from the Code pane. The selected form’s attributes will be displayed in the Properties dialog which is usually display in bottom of the application’s window.
Step (8). Change the properties based on your requirements.
For testing, the purpose provide file names in the Action field. When the form is submitted, it will open the given file.
Step (9). Place the cursor between <form></form> tags in the Code pane or place the cursor in the form in the Design pane.
Step (10). Now click on the Insert menu then from the Form sub-menu, click on the Button menu item.
Step (11). It will display the Input Tag dialog. Enter necessary attributes and click on the OK button.
Step (12). It will insert a submit button in the form.
Step (13). Now click on Preview/Debug in the browser button from the Document toolbar. It will display a pull-down menu. Select the browser to open this document.
- 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 the Action attribute in the form HTML tag.
by Code Steps