HTML, Third Edition Illustrated Introductory

1. HTML, Third EditionIllustrated Introductory Unit G Using Forms to Control Input 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 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 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 HTML, Third Edition--Illustrated Introductory

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

6. Planning a Form 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 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 <!-- Begin Form Here -->, press [Delete], then type <form name="survey" action="" method="post"> • Scroll to the bottom of the document, select the comment <!-- End Form Here -->, press [Delete], then type </form> • In the page code, locate and select the comment <!--Label 1 -->, press [Delete], type First name:, press [Spacebar], move to the next line, drag to select the comment <!-- Input First name text field -->, press [Delete], then type <input type="text" name="fname" size="20" /> 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 <!-- Last name text field -->, press [Delete], type <input type="text" name="lname" size="20" />, then save your work • Move to the bottom of the page, locate and select the comment tag <!-- input, email -->, press [Delete], then type <input type="text" name="email" size="100" /> • 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 HTML, Third Edition--Illustrated Introductory

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

11. Creating a Text Field 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 <!-- Radio button - name, rooms; value, 3 -->, before the nonbreaking space &nbsp, press [Enter], press [Tab], then type <input type="radio" name="room" value="3" /> • 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 Spaservices rows, using the values shown in the comments 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 <!-- Radio Button - name, newsletter; value, Yes -->, press [Enter], press [Spacebar] four times, type <input type="radio“ name="newsletter" value="Yes" checked="checked" />, then press [Spacebar] • Click after the comment <!-- Radio Button - name, newsletter; value, No -->, press [Enter], press [Spacebar] four times, type <input type="radio" name="newsletter“ value="No" />, press [Spacebar], then save your page and view it in the browser HTML, Third Edition--Illustrated Introductory

14. Adding Radio Buttons 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 <input /> 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 HTML, Third Edition--Illustrated Introductory

16. Adding Check Boxes • In your text editor, click after the comment tag that reads <!-- Checkbox name, outdoorActivities-->, press [Enter], press [Tab], type <input type="checkbox“ name="outdoorActivities" value="Yes" />, press [Spacebar], press [Enter], then press [Tab] • Click after <!-- Checkbox name, competitiveActivities-->, press [Enter], press [Tab], type <input type="checkbox" name="competitiveActivities" value="Yes" />, 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 HTML, Third Edition--Illustrated Introductory

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

18. Creating a Pull-Down Menu • Locate and select the comment tag <!-- Dropdown season -->, press [Delete], press [Enter], press [Tab], type <select name="season">, press [Enter], press [Tab], then type </select> <br /> <br /> • Click just before </select>, then type the following code, pressing [Enter] and [Tab] after each line: <option value="Spring">Spring</option> <option value="Summer">Summer</option> <option value="Fall">Fall</option> <option value="Winter">Winter</option> • Locate and drag to select the comment tag that reads <!-- dropdown num_guests -->, press [Enter], press [Tab], type <select name="num_guests">, then press [Enter] HTML, Third Edition--Illustrated Introductory

19. Creating a Pull-Down Menu • Press [Tab], then type </select> <br /> <br /> • Click after <select name="num_guests">, press [Enter], press [Tab] twice, then type the following code, pressing [Enter] and [Tab] twice after the first and second lines <option value="1"> &nbsp; 1 &nbsp; </option> <option value="2 - 3">2 - 3 </option> <option value="4 or more">4 or more</option> • Save your work, then reload the survey.htm page in your browser HTML, Third Edition--Illustrated Introductory

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

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

22. Adding a Comment Box • Locate the comment tag that reads <!-- Insert textarea here -->, drag to select the comment tag and the nonbreaking space, &nbsp;, that follows it, press [Delete], then press [Enter] • Type <textarea name="comments" rows="4" cols="40">, then press [Enter] • Type </textarea>, then save your page • Locate the code for the opening table data tag and Additional Comments label that reads: <td colspan="2">Additional Comments: </td> 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 HTML, Third Edition--Illustrated Introductory

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

25. Adding a Push Button • In your text editor, select the comment <!-- Insert Submit button here --> as well as the nonbreaking space, &nbsp;, that follows it near the bottom of the document, then press [Delete] • Type <input type="submit" value="Complete Survey" name="submit" /> • Select the comment that reads: <!-- Insert Reset button here --> as well as the nonbreaking space that follows it, then press [Delete] • Type <input type="reset" value="Start Over" name="reset" />, 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 HTML, Third Edition--Illustrated Introductory

26. Adding a Push Button 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 <input /> tag type attribute to “image”, then specify the path and the name of the graphic file with the src attribute 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 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) • Form processing and confirmation • Shopping cart service HTML, Third Edition--Illustrated Introductory

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

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

32. <form> Tag Attributes for Submitting Information 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 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 HTML, Third Edition--Illustrated Introductory