A Tutorial to Create a Form in DreamWeaver

Adobe Dreamweaver is one of the most popular web editing tools. It's WYSIWYG (What You See Is What You Get) design view is accompanied by a code view, making it a versatile application. Dreamweaver offers many options and functions to aid in the creation of your web pages and website. Forms creation is one such group of options available to you. Viewing the "Forms" tab you will see icons that assist you with adding form items such as "Textarea," "Text Field" and "Checkbox" just to name a few. This interface gives you guidance and increases your efficiency when creating forms.

Things You'll Need

• Adobe Dreamweaver CS3

Instructions

1. Open Dreamweaver and the file to which you will be adding the form. Let's try a simple registration form.

2. Click on the "Forms" tab from the "Insert" panel to display the "Forms" icons.

3. Click on the first icon "Form" to insert the "Form" tags.

4. Click on the second icon "Text Field". Set the "ID" field to "fname" and the "Label" field to "First Name: " Choose the "Wrap with label tag" "Style" radio button. Click the "OK" button.

5. Go to the end of the inserted field and hit "Shift+Enter" to create a new line. Repeat the above step using "lname" for the "ID" field and "Last Name: " for the "Label" field.

6. Go to the end of the inserted field and hit "Shift+Enter" to create a new line. Click the "Button" icon to insert a "Submit" button. Set the "ID" field to "send" and the "Style" radio button to "No label tag".

7. Right-click on the red dotted line that defines your form field and choose "Edit Tag <form>..." Type "register.php" in the "Action" field. This is the file that will be executed when your user hits the submit button. It might contain PHP code to send an email to a registration administrator.

8. Save your file.

Tips & Warnings

• You can also use "Insert" from the top menu bar and choose "Form" and it's options instead of the "Insert" panel and icons.

References

• Adobe.com: How to Develop a Form in Dreamweaver
• Adobe.com: Create an HMTL Form

Resources

• Interactive Forms -- Adobe Dreamweaver CS3 Tutorial