Creating Forms in DreamWeaver Form Objects: • Text Fields – Accepts any type of text entry (alphanumeric) – Can specify the length of the field, the number of lines, maximum characters – Single line or multi-line (multi-line also called a text area) – Can make the field a password field • Buttons – Submit and Reset – Submit ideally takes the information and stores it (code required) – Reset - will automatically work if created properly • Check Boxes – Used when you want the user to be able to select multiple options (choices) • Radio Buttons – Used when you want the user to be able to select only one option (choice) – If you click on one, all of the others are unclicked • Lists / Menus – Displays a list of options (with scroll bar) – A list allows multiple options to be selected with the control key DreamWeaver’s Insert Bar lets you create a form and add these objects to the form. Label the icons on the image of the Insert Bar – Forms Tab below. Notes: • When creating a form: – First insert a Form Object (this generates a red dotted rectangle). – Everything included in the form must be inside this red rectangle – **Important – only create one red rectangle** • Every object you place in the form needs to be named!! Exercise Done as a Demo 1. Open DreamWeaver – create a new document. 2. Give the page the Title: SRB Student Profile Form (Document Toolbar) 3. First line on the page type “SRB Student Profile” and press Enter. 4. Insert a Form Object onto the Page and give it the name SRBProfile (NO SPACES!!) 5. Format the text “SRB Student Profile” to be blue, bold and size 5. 6. Place cursor inside the red rectangle (the form object) 7. Type First Name: then insert a text field, single line, name it FirstName (No Spaces) 8. Type Last Name: then insert a text field, single line, char width 35, name it LastName (No Spaces) 9. Type Middle Initial: and insert a text field, single line, char width 5, name it Initial. 10. Press Enter to start another line. Now finish the rest of these instructions on your own. 11. Type Date of Birth: and insert a text field, single line, name it BirthDate, and make it’s Char Width 20. 12. Type Age: and insert a text field, single line, name it Age, and make it’s Char Width 5. 13. Press Enter and start another line. 14. Type Contact Information. Format this to Bold and Blue. 15. Press Enter. 16. Type Parent Name(s): and insert a text field, single line, name it ParentName, and make it’s Char Width 50. 17. Type Home Phone Number: and insert a text field, single line, name it PhoneNumber and make it’s Char Width 20. 18. Press Enter to start another line. 19. Type Address: then press shift and enter at the same time (this creates single spacing). 20. Insert a text field, multi-line, name it Address. Make it’s Char Width 50 and it’s Num Lines 4. 21. Press Enter to start another line. Ok, that is it for textboxes. Now we will use Radio Buttons and Check Boxes. 22. Type Student Information. Format this to Bold and Blue. 23. Type Grade: and insert a Radio Group. In the dialogue box that comes up do the following: a. Name the radio group Grade b. Underneath Label type 9, press Tab, underneath Value type Nine. c. Underneath Label type 10, press Tab, underneath Value type Ten. d. Press the + button twice to add two more ... e. Repeat steps b and c for Grade 11 and grade 12 f. Underneath Layout make sure that Table is selected. g. Click OK. 24. Click on the Table to Select it. Change the number of columns to 4 using the Properties Window. 25. Cut and Paste the radio button and 10 to the first cell in the 2nd column. 26. Cut and Paste the radio button and 11 to the first cell in the 3rd column. 27. Cut and Paste the radio button and 12 to the first cell int he 4th column. 28. Click on the Table to Select it. Change the number of rows to 1 using the Properties Window. 29. Click behind the Table and press enter to start another line. 30. Type Feeder School: then press shift and enter at the same time. 31. Insert a List/Menu. Give it the name Gr8School, make it a List, and change the Height to 6. Click on the List Values Button. 32. For Item Label type Greenbank Middle School, for value type GBank. Press tab to get to the next line. Enter the following information for the other schools. a. Item – Hillel Academy, Value – Hacademy b. Item – Pinecrest Public School, Value – PPS c. Item – Summit Alternative, Value – Summit d. Item – Turnbull School, Value – Turnbull e. Item – Other, Value – Other 33. Press OK. 34. Click behind the list and press Enter to start another line. 35. Type Current Enrolled Subjects: 36. Insert a table with a border of 0, width 100 percent, 4 columns and 4 rows. 37. In the first cell, create a check box. Name it Subject. Give it a Checked Value of Math. 38. Click beside the check box in the cell and type Math. 39. Click in the second cell, create a check box. Name it Subject. Give it a Checked Value of English. 40. Click beside the check box in the cell and type English. 41. Click in the third cell, create a check box. Name it Subject. Give a Checked Value of Music. 42. Click beside the check box in the cell and type Music. 43. Continue this process for all of the following subjects: a. Geography b. History c. Business d. Computers e. Tech f. Art g. Drama h. Phys. Ed i. Science j. Social Science k. French l. Spanish m. Other Reset and Submit Buttons 44. Click after your table and press enter to start another line. 45. Insert a button. This should come up as a Submit button, and everything should be done for you. 46. Insert a second button. This should also come up as a Submit button. In the Properties Window, select the Reset option. Change the name of the button from Submit2 to Reset. Saving 47. Save your Form as SRBProfileForm in your Web Design folder. 48. Preview in Browser, enter your information and show Miss. Nieuwenhuis your completed form.
Pages to are hidden for
"Creating Forms in DreamWeaver"Please download to view full document