Building a survey form using Dreamweaver

Activity 2

Procedure1. Start Dreamweaver and create a new web page and

name it forms.html.2. In the ‘Forms’ Insert bar, click the ‘Form’ button to

insert a form. A rectangle of red dotted lines should be displayed.

Activity 2

3. Enter the following settings in the Properties Inspector.

Form name: surveyAction: mailto:yourmail@mailserver.comMethod: POSTEnctype: text/plain

Building a survey form using Dreamweaver

Form

Activity 2

4. Click the form region and the ‘Text field’ button . Enter the following settings.

Label: NameField name: NameChar width: 30

Building a survey form using Dreamweaver

Text fieldLabel

Activity 2

5. Enter ‘Sex:’ for the next label. Click the ‘Radio button’ to insert two radio buttons. Adjust the settings as follows.

Radio button 1: Label: M Radio button 2: Label: FField name: sex

Field name: sexChecked value: M

Checked value: FInitial state: Checked

Initial state: Unchecked

Building a survey form using Dreamweaver

Activity 2

6. Enter the text ‘Are you satisfied with this web site?’ and click the ‘Menu’ button to insert a menu. Adjust the settings as follows.Field name: likeType: Menu

Building a survey form using Dreamweaver

Activity 2

7. Click the button in the Properties Inspector and enter the following values.

Building a survey form using Dreamweaver

Item label Value

Please select –

Excellent 5

Good 4

Fair 3

Unsatisfactory

2

Poor 1

Activity 2

8. Enter the text ‘Where do you know this web site from?’. Click the ‘Checkbox’ button to insert four check boxes with the following settings.

Building a survey form using Dreamweaver

Check box 1

Check box 2

Check box 3

Check box 4

Field name

Hear Hear Hear Hear

Label Internet Newspaper TV Radio

Initial state

Unchecked Unchecked Unchecked Unchecked

Checked value

Internet Newspaper TV Radio

Activity 2

Building a survey form using Dreamweaver

Activity 2

9. Enter the text ‘Please fill in your comments here.’ and click the ‘Textarea’ button . Make the following settings.Field name: commentChar width: 50Num lines: 3

Building a survey form using Dreamweaver

Activity 2

10. Click ‘Button’ to insert the ‘Submit’ and ‘Reset’ buttons in the form as follows.

Building a survey form using Dreamweaver

‘Submit’ button

‘Reset’ button

Field name

Submit Reset

Label Submit Reset

Action Submit form Reset form

Activity 2

11. Make sure all input elements are placed within the form region.

12. Switch to the Code view to check the HTML tags generated by Dreamweaver.

Building a survey form using Dreamweaver

Activity 2

13. Save the file and preview it in a browser.14. Make sure your e-mail software has been properly

installed. Enter some information onto the form and click the ‘Submit’ button.

15. Log on to your e-mail account (the one specified in the action attribute) and check the form data. An example is shown below.

Building a survey form using Dreamweaver

Activity 2

13. Save the file and preview it in a browser.14. Make sure your e-mail software has been properly

installed. Enter some information onto the form and click the ‘Submit’ button.

15. Log on to your e-mail account (the one specified in the action attribute) and check the form data. An example is shown below.

Building a survey form using Dreamweaver