Creating a form in Dreamweaver

Web forms are an important part of many web sites. Forms enable you to gather information from visitors to your web site. You can use forms to solicit feedback from site visitors or to set up a guest book. A form can be as simple as a request to join a mailing list or as sophisticated as the ordering mechanism for an online purchasing system.

Using Dreamweaver you can create most kinds of onscreen forms you can envision, Dreamweaver makes all the HTML form tags accessible and easy to use. However, Dreamweaver can’t help you with one important part of any form – the form processing. For that, you must rely on scripts or applications running on the web server that hosts your site.

For a simple solution check out this form submission site .

Create a form:

1. Position the curser at the location in your document where you want to insert the form.

2. Choose Insert/Form. The form will appear as a short, wide rectangle drawn with a red dotted line.

3*. Select the form by clicking inside the form rectangle and then clicking the <form> tag in the status bar (bottom left).

4. In the property Inspector panel, type in a name for the form (we’ll call it ‘membership’). Each form must have a unique name, which will be
necessary to reference the form with a scripting language.

5. (We will ignore this step for the moment)
Enter the URL for the form processing script in the Action box. You can type in the complete path and filename or click the folder icon to open a dialog box that you can use to locate and select the script if it is located on a locally accessible drive.

6. Select the data submission method in the Method list box.
Post - submits form data in blocks suitable for use in an email message (select this option).
Get – submits form data by adding it to the end of a URL.
Default – submits form data according to the default settings of the visitor’s browser (usually the get method).

* You can simply insert a form into your web page and then immediately start adding form elements without first defining the action and method for the form in the Property Inspector panel. The form won’t work until you define these attributes, but you can always add them in at a later time.

Creating a simple form

Exercise (for my friends at Llanover Hall Arts Centre)
Look at the Llanover Hall Application Form

We’ll take sections 1. and 4. from the application form and set up a form including these elements.
It is often neater to place the information in a table so place the curser inside the form box and select Insert/Table - we’ll create a table with 2 columns and 16 rows. Highlight the left hand column and select right alignment in the property box.

In the left hand column we will insert the text for the address details as follows:
First Name
Surname
Address
County
Postcode
Phone
email address

In the right hand column we will set up text fields for each item except Address which needs a textarea – this will allow a multi-line input box, and County where we will insert a List/Menu. Here is a list of all the form elements available:

• Text field – solicits text input from the visitor. Used for single line text boxes.
• Textarea – this is for multi-line text boxes.
• Check Box – presents visitors with a yes or no choice.
• Radio Button – like the text box, a radio button offers the visitor with a yes or no choice, with the added restriction that only one item in a group of buttons can be answered yes.
• Radio Group – a group of two or more radio buttons that are automatically grouped together.
• List/Menu – list boxes and pop-up menus present a list of items from which one or more items can be chosen. You can create both scrolling lists and pop-up list boxes.
• Jump Menu – a special form of pop-up list box that lists a series of links. This option us normally used as a navigation tool instead of a component of a typical form.
• File Field – enables the user to submit a file to the server.
• Button – the standard submit and reset buttons that send the form data to the server and clear the form fields.
• Image field – enables you to create custom graphical buttons.
• Hidden field – enables you to insert information into the form that the visitor doesn’t see. For example you might need to use a hidden field to specify the email address to which the form processor sends the submitted form data.
• Label – Text that is linked to the from element it describes instead of being just placed in the proximity of a form field.
• Fieldset – a box that surrounds and labels multiple form elements to help organize your form into logical elements.

Back to our form – to the right of the First name cell position the curser and select Insert/Form Object/Text Field. A small text box will be created. In the property inspector give the field a name i.e. first name. In the character width enter the number of characters you require. You can also set a maximum number of characters if you wish. In the init value box you can enter helpful stuff if you wish like ‘type your fist name here’ – not essential.

Enter additional text fields next to all headings apart from Address and County.

Next to Address select Insert/Form Object/Textarea again you can select character width, but also number of lines – select three.

Next to County select Insert/Form Object/List/Menu.
In the property inspector name it ‘County’. Select List or Menu.
Click the list values button and insert the counties in the item label – the value section is what you want to see when the form is sent to you so in this case repeat what is in the label box. Click the + button to add more items to the list. Once you have entered all the list items click on OK.

For the next section put a title – ‘What subjects are you interested in’?
Beneath this on the left hand side add check boxes – Insert/Form Object/Check Box.
To the right of the check boxes add the information:
ALL, Activities for Children, Photography, Art Gallery Exhibitions, Ceramics, Crafts – General, Computer Arts.

Finally add a submit button and reset button.
Insert/Form Object/Button.

Hopefully your form will look something like this:

*Please note this is a demo form and will not work if you press the submit button.

Setting up and using templates

A well-designed web site uses a design scheme to give all the pages in the site a unified look. Most pages in the site will share certain elements such as a consistent background and text colours, as well as a standard layout that might include a logo graphic at the top of the page and perhaps a navigation bar at the side. The rest of the page may vary dramatically, but the common page elements remain consistent to give the site its visual identity.

The best template will include all the basic elements required for your web pages. A useful feature of Dreamweaver’s template document is the way it will automatically update template-based pages. When you make a change to the original (master) template file, Dreamweaver scans all the web documents in your site and automatically updates any document based on the template.

Create a template

The easiest way to create a template is to start with an existing web page and save a copy of the page as a template. The existing page serves as a prototype for your new pages.

Create the page in Dreamweaver, choose file/save as template. Enter a name for the template in the Save As box. The file is saved in a template folder in your sites root folder. The template file will have a .dwt extension. If a template folder does not exist, Dreamweaver will create one.

Define locked and editable areas of a template

When you create a template page, it starts out with the entire page locked. There will be some areas you wish to keep locked, and those where content will need to be changed. You will need to define one or more editable area to make the template useful.
Select the text, image or other page element you want to be able to change,
Chose Insert/Template Object/Editable Region
Enter a name for the editable region in the box. Click Ok Dreamweaver marks the editable region with a blue-green outline and labels it with a small tab at the upper left corner.

Create a Page Based on a Site Template

Choose File/New from the document window; click the Templates tab to display the New from Template options. Select the template from the list. Make sure the update page when template changes option is checked. Click Create to close the dialog box and create the new template based page. Remember to save your new page once you have created it: File/Save As.

Index Introduction Setting up Text Preparing images Adding images Tables Design/research More stuff Getting noticed Publishing your site Links