Activity 2 Building a survey form using Dreamweaver Procedure 1. 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 Building a survey form using Dreamweaver 3. Enter the following settings in the Properties Inspector. Form name: survey Action: mailto:yourmail@mailserver.com Method: POST Enctype: text/plain Form

Activity 2 Building a survey form using Dreamweaver 4. Click the form region and the ‘Text field’ button . Enter the following settings. Label: Name Field name: Name Char width: 30 Label Text field

Activity 2 Building a survey form using Dreamweaver 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: F Field name: sex Field name: sex Checked value: M Checked value: F Initial state: Checked Initial state: Unchecked

Activity 2 Building a survey form using Dreamweaver 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: like Type: Menu

Activity 2 Building a survey form using Dreamweaver 7. Click the button in the Properties Inspector and enter the following values. Item label Value Please select – Excellent 5 Good 4 Fair 3 Unsatisfactory 2 Poor 1

Activity 2 Building a survey form using Dreamweaver 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. Check box 1 Check box 2 Check box 3 Check box 4 Field name Hear Label Internet Newspaper TV Radio Initial state Unchecked Checked value

Activity 2 Building a survey form using Dreamweaver

Activity 2 Building a survey form using Dreamweaver 9. Enter the text ‘Please fill in your comments here.’ and click the ‘Textarea’ button . Make the following settings. Field name: comment Char width: 50 Num lines: 3

Activity 2 Building a survey form using Dreamweaver 10. Click ‘Button’ to insert the ‘Submit’ and ‘Reset’ buttons in the form as follows. ‘Submit’ button ‘Reset’ button Field name Submit Reset Label Action Submit form Reset form

Activity 2 Building a survey form using Dreamweaver 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.

Activity 2 Building a survey form using Dreamweaver 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.

Activity 2 Building a survey form using Dreamweaver 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.