Create Form

Web Page Design Create Form Part 5 – Create a Form with Fields 1. In your Bike and Hike Web Site, open your Bike_Main.dwt (template) file. 2. File>Save As (go to your pages folder) and save the file as contact.html (be sure you are saving it as an html file NOT a dwt file). 3. When asked to update the links, click yes. 4. Highlight the word content (in the white box, not the blue box). 5. Type the following text in the content section. Be sure that you format it so that it matches the attributes (color, font, etc. of the rest of the Web site). Contact Us Please fill out the form to learn more about the Centuryville Community Center. 6. Your page will look like this: 7. Save your page and update links as necessary. 8. Click after the word Center and press enter. a. On the insert toolbar, select Insert>Table. b. In the Table dialog box, create a table with 8 rows and 2 columns. c. Table width 760 pixels. d. Header row set to none. e. Click ok. 9. Your screen should look like this:

10.Save your file.

Web Page Design Create Form 11. In the properties inspector, set the height (H) to 250px. a. In the table, click the column divider (the line between the columns) and drag the divider until the first column is 150px wide. b. If necessary, set the alignment in the first column to left. 12.Click in the table’s first cell. a. Type the label: First Name: b. Press tab. c. On the forms toolbar, click the text field button. (If asked do you want to add form tag? Click yes) d. If necessary, switch the insert toolbar to the forms view. 13.Make sure that the white text box that appears in the right cell is selected. a. In the properties inspector, in the text box below text field, type the title: first_name. b. In the char width text box, enter a value of 40.

Web Page Design Create Form 14. Click the cell under the label you just typed. a. Repeat steps 13 a and b to create five more fields. Field Labels, Titles, and Character Widths Label Title Character Width Last Name: last_name 40 Address: address 40 City: city 40 State: state 2 ZIP Code: zip_code 10 E-mail address: e_mail 40 b. Make sure that you use the information shown in red in the above table. 15.Your screen should look like this:

16. Click in the cell below the E-Mail address. a. Type Age: b. Press tab 17. On the forms toolbar, click the list/menu button. a. In the properties inspector, under list/menu, delete select and type age. b. Click the ListValues button located in the right-hand side of the properties inspector. 18. On the right side of your properties inspector, click on the list values button to open the ListValues, in the filed under Item Label, type: Under 12. a. Leave the value empty b. Check the plus sign (+) to add another value. 19.Repeat step 18 for the following choices: a. 12 to 17

Web Page Design Create Form b. Over 17 c. Your dialog box should look like this:

d. 20. Click a. b. c. d.

outside the table under the Age label. On the forms toolbar, click the checkbox button. If necessary, click yes in the warning box. Place your cursor after the check box. Press the spacebar and type: Send me more information about the Bike and Hike fundraiser. e. Select the check box. In the properties inspector, under checkbox name: type: more_info. 21.Place your cursor at the end of the checkbox line. a. Press enter. b. On the forms toolbar, click button to insert a submit button. 22. Click the button again, in the properties inspector, next to Action, select reset form to create a reset button. 23. Click off the buttons and click next to the reset button. In the properties inspector, click align center to center the buttons.

Web Page Design Create Form 24.Save your file and preview in a browser. 25.Practice entering data into the form. 26.You have now created a simple form. Save your file. Part 6 – Add a Jump Menu to a Web Page 1. In your Bike and Hike Web site, open the Sponsors (sponsors.html) Web page. a. Place your cursor to the right of the text that says: Use the menu below to visit our sponsors. b. Press shift+enter. 2. If necessary, change the insert toolbar to the forms view. 3. On the toolbar, click the jump menu button. a. In the insert jump menu dialog box, in the text box, type: Centuryville Bike Shop. b. In the When selected go to URL box, type: http://www.centuryvillebike.com. c. Your dialog box should look like this:

4. 5. 6. 7.

d. Repeat steps 3 a and b using the text and link information shown in red in the table below. Text URL New Wave Music http://www.newwavemusicsite.com st 1 Video Store http://1stvideostore.com Standard Auto Repair http://www.standardautorepair.com When finished entering the text and links, click ok. Save the file and preview in a browser. Click the jump menu’s down-arrow and try out the links. Close your file, exit Dreamweaver, drag and drop to J:/Scook/AppropriateClassPeriod.

Web Page Design Create Form