1. HTML, Third Edition--Illustrated Introductory 1 HTML, Third Edition Illustrated Introductory Unit G Using Forms to Control Input

2. HTML, Third Edition--Illustrated Introductory 2 U n i t O b j e c t i v e s Plan a form Create a text field Add radio buttons Add check boxes Plan a form Create a text field Add radio buttons Add check boxes

3. HTML, Third Edition--Illustrated Introductory 3 U n i t O b j e c t i v e s Create a pull-down menu Add a comment box Add a push button Connect a form’s back end Create a pull-down menu Add a comment box Add a push button Connect a form’s back end

4. HTML, Third Edition--Illustrated Introductory 4 Planning a Form The types of form fields are  Single-line text box  Check boxes and radio buttons  Pull-down menus and scroll boxes  Multiline text areas  Push buttons

5. HTML, Third Edition--Illustrated Introductory 5 Planning a Form

6. HTML, Third Edition--Illustrated Introductory 6 Planning a Form

7. HTML, Third Edition--Illustrated Introductory 7 Clues to Use Dealing with privacy issues  Concern for security of personal information  Clearly communicate your organization’s policy regarding use of information  Avoid losing potential customers by ensuring that additional information is optional, not required

8. HTML, Third Edition--Illustrated Introductory 8 Creating a Text Field Open the file htm_G-1.txt, save it using the All Files type as survey.htm in your paradise folder in the place where you save your site files, then inspect the code Locate and select the comment, press [Delete], then type Locate and select the comment, press [Delete], then type Scroll to the bottom of the document, select the comment, press [Delete], then type Scroll to the bottom of the document, select the comment, press [Delete], then type In the page code, locate and select the comment, press [Delete], type First name:, press [Spacebar], move to the next line, drag to select the comment, press [Delete], then type In the page code, locate and select the comment, press [Delete], type First name:, press [Spacebar], move to the next line, drag to select the comment, press [Delete], then type

9. HTML, Third Edition--Illustrated Introductory 9 Creating a Text Field Locate and select the Label 2 comment tag, press [Delete], type Last name:, move to the next line, select, press [Delete], type, then save your work Move to the bottom of the page, locate and select the comment tag, press [Delete], then type Move to the bottom of the page, locate and select the comment tag, press [Delete], then type Save your work, start your Web browser, then open the file survey.htm in your browser Click in the First name text box, type your first name, press [Tab], type your last name in the Last name text box, press [Tab], then type your e-mail address

10. HTML, Third Edition--Illustrated Introductory 10 Creating a Text Field

11. HTML, Third Edition--Illustrated Introductory 11 Creating a Text Field

12. HTML, Third Edition--Illustrated Introductory 12 Adding Radio Buttons Click the text editor program button on your taskbar, then in your text editor, locate the comment that begins <!-- Use the comments below Click just after the comment, before the nonbreaking space &nbsp, press [Enter], press [Tab], then type Click just after the comment, before the nonbreaking space &nbsp, press [Enter], press [Tab], then type Repeat the previous step to create radio buttons for all cells in the Rooms row, then create radio buttons for each cell in the Activities, Restaurants, and Spa services rows, using the values shown in the comments

13. HTML, Third Edition--Illustrated Introductory 13 Adding Radio Buttons Save your work, click the browser program button and reload the survey.htm file  Test your ratings radio buttons by clicking several buttons in each group. Return to your code, click after the comment, press [Enter], press [Spacebar] four times, type, then press [Spacebar] Click after the comment, press [Enter], press [Spacebar] four times, type, press [Spacebar], then save your page and view it in the browser

14. HTML, Third Edition--Illustrated Introductory 14 Adding Radio Buttons

15. HTML, Third Edition--Illustrated Introductory 15 Clues to Use Using the checked attribute  By default, all the fields in a set of radio buttons appear empty  You can include the checked attribute in the tag for one of the radio buttons in a set, causing it to appear as selected  Do not use the checked attribute for radio button groups that require users to add personal information

16. HTML, Third Edition--Illustrated Introductory 16 Adding Check Boxes In your text editor, click after the comment tag that reads, press [Enter], press [Tab], type, press [Spacebar], press [Enter], then press [Tab] Click after, press [Enter], press [Tab], type, press [Spacebar], press [Enter], then press [Tab] Click after the comments for tours, lodge_activities, events and NA, then repeat the previous step to create checkboxes for each of the following labels: Tours and Excursions, Lodge activities, Local/Area Events, and NA, setting each value as Yes Save your page, then click the browser program button on the taskbar and reload the survey.htm page

17. HTML, Third Edition--Illustrated Introductory 17 Adding Check Boxes

18. HTML, Third Edition--Illustrated Introductory 18 Creating a Pull-Down Menu Locate and select the comment tag, press [Delete], press [Enter], press [Tab], type, press [Enter], press [Tab], then type Locate and select the comment tag, press [Delete], press [Enter], press [Tab], type, press [Enter], press [Tab], then type Click just before, then type the following code, pressing [Enter] and [Tab] after each line: Spring Spring Summer Summer Fall Fall Winter Winter Locate and drag to select the comment tag that reads, press [Enter], press [Tab], type, then press [Enter]

19. HTML, Third Edition--Illustrated Introductory 19 Creating a Pull-Down Menu Press [Tab], then type Press [Tab], then type Click after, press [Enter], press [Tab] twice, then type the following code, pressing [Enter] and [Tab] twice after the first and second lines 1 1 2 - 3 2 - 3 4 or more 4 or more Save your work, then reload the survey.htm page in your browser

20. HTML, Third Edition--Illustrated Introductory 20 Creating a Pull-Down Menu

21. HTML, Third Edition--Illustrated Introductory 21 Pull-Down Menu Tags and Attributes

22. HTML, Third Edition--Illustrated Introductory 22 Adding a Comment Box Locate the comment tag that reads, drag to select the comment tag and the nonbreaking space,, that follows it, press [Delete], then press [Enter] Type, then press [Enter] Type, then save your page Locate the code for the opening table data tag and Additional Comments label that reads: Additional Comments: Locate the code for the opening table data tag and Additional Comments label that reads: Additional Comments:

23. HTML, Third Edition--Illustrated Introductory 23 Adding a Comment Box Click just after colspan="2" inside the opening table data tag, press [Spacebar], then type align="right" Locate the “Page modified by” paragraph, replace Your Name with your own name, update the date text to show the current date, then save the page Click the browser program button on the taskbar, then reload the survey.htm page

24. HTML, Third Edition--Illustrated Introductory 24 Adding a Comment Box

25. HTML, Third Edition--Illustrated Introductory 25 Adding a Push Button In your text editor, select the comment as well as the nonbreaking space,, that follows it near the bottom of the document, then press [Delete] Type Type Select the comment that reads: as well as the nonbreaking space that follows it, then press [Delete] Type, press [Spacebar], then save your file Click the browser program button on the taskbar, reload the page, then click the Complete Survey button Close your browser and your text editor, then transfer your updated files to your remote directory

26. HTML, Third Edition--Illustrated Introductory 26 Adding a Push Button

27. HTML, Third Edition--Illustrated Introductory 27 Clues to Use Using a graphic as a push button  The value attribute allows you to customize the text on a push button  You can specify a graphic to use as a button  Set the tag type attribute to “image”, then specify the path and the name of the graphic file with the src attribute

28. HTML, Third Edition--Illustrated Introductory 28 Clues to Use Using input buttons  Submit and Reset input buttons have built-in event actions  The Submit button sends form data to the processing file  The Reset button automatically clears the form  You also can have buttons perform other actions

29. HTML, Third Edition--Illustrated Introductory 29 Connecting a Form’s Back End The form-submission process includes  Browser packaging  Form handler CGI (Common Gateway Interface)CGI (Common Gateway Interface)  Form processing and confirmation Shopping cart serviceShopping cart service

30. HTML, Third Edition--Illustrated Introductory 30 Connecting a Form’s Back End

31. HTML, Third Edition--Illustrated Introductory 31 Connecting a Form’s Back End

32. HTML, Third Edition--Illustrated Introductory 32 Tag Attributes for Submitting Information Tag Attributes for Submitting Information

33. HTML, Third Edition--Illustrated Introductory 33 U n i t S u m m a r y Plan a form Create a text field Add radio buttons Add check boxes

34. HTML, Third Edition--Illustrated Introductory 34 U n i t S u m m a r y Create a pull-down menu Add a comment box Add a push button Connect a form’s back end