Ddpz2613 topic7 form

351 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
351
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Ddpz2613 topic7 form

  1. 1. HTML Concepts and Techniques Fifth Edition Chapter 7 Creating a Form on a Web Page
  2. 2. Chapter 7: Creating a Form on a Web Page 2 Chapter Objectives • Define terms related to forms • Describe the different form controls and their uses • Use the <form> tag • Use the <input> tag • Create a text box • Create check boxes • Create a selection menu with multiple options • Use the <select> tag • Use the <option> tag
  3. 3. Chapter 7: Creating a Form on a Web Page 3 Chapter Objectives • Create radio buttons • Create a textarea box • Create a Submit button • Create a Reset button • Use the <fieldset> tag to group form information
  4. 4. Chapter 7: Creating a Form on a Web Page 4 Creating Web Page Forms • Many Web pages are designed to present information to a user. • When a form is included on a Web pages, the Web page can be used to gather information from Web. • Example of form commonly used on Web sites include: – A feedback form to gather visitors’ comments. – A guestbook to allow users to sign in as visitor. – A registration form for visitor to create an account. – A survey form to gather information on any topics. – A search form for user to a search for other information. – An order form to select products and enter shipping.
  5. 5. Chapter 7: Creating a Form on a Web Page 5
  6. 6. Input Controls • An input control is any type of input mechanism on a form. • A form may contain several different input controls classified as data or text input controls. • A data input control is either a radio button, a check box, a Submit button, a Reset button, or a selection menu • A text input control is either: – a text box, – a textarea box, or – a password text box. • Refer Table 7-1 Form Input Control Chapter 7: Creating a Form on a Web Page 6
  7. 7. Chapter 7: Creating a Form on a Web Page 7 Table 7-1 Form Input Control
  8. 8. Chapter 7: Creating a Form on a Web Page 8 Table 7-2 HTML Tags Used to Create Forms
  9. 9. Chapter 7: Creating a Form on a Web Page 9 Starting Notepad and Opening an HTML File • Start Notepad and, if necessary, maximize the window • With a USB drive plugged into your computer, click File on the menu bar and then click Open on the File menu • If necessary, navigate to the Chapter07ChapterFiles folder on the USB drive • If necessary, click the Files of type box arrow and then click All Files in the g:Chapter07ChapterFiles folder • Click orderform.html in the list of files • Click the Open button to open the orderform.html file in Notepad
  10. 10. Chapter 7: Creating a Form on a Web Page 10 Starting Notepad and Opening an HTML File
  11. 11. Chapter 7: Creating a Form on a Web Page 11 Creating a Form and Identifying the Form Process • Highlight the words <!--Put form method statement here --> on line 13 • Type <form method=”post” action=”mailto:janasjewels@isp.com”> to replace the highlighted words with the new tag • Click on the blank line 36 and press the ENTER key • Type </form> but do not press the ENTER Key
  12. 12. Chapter 7: Creating a Form on a Web Page 12 Creating a Form and Identifying the Form Process
  13. 13. Changing the Text Message • Highlight lines 18 through 32 (starting with the word “below” and ending above <p>Thank you for your order) and then press the DELETE key • With the insertion point on line 18, enter the HTML code shown in Table 7–4 and then press the ENTER key twice Chapter 7: Creating a Form on a Web Page 13
  14. 14. Adding Text Boxes • If necessary, click line 19 • Enter the HTML code shown in Table 7–5 and then press the ENTER key twice Chapter 7: Creating a Form on a Web Page 14
  15. 15. Adding Check Boxes • If necessary, click line 27 • Enter the HTML code shown in Table 7–6 and then press the ENTER key twice Chapter 7: Creating a Form on a Web Page 15
  16. 16. Adding a Selection Menu • If necessary, click line 32 • Enter the HTML code shown in Table 7–7 and then press the ENTER key twice Chapter 7: Creating a Form on a Web Page 16
  17. 17. Adding Additional Text Boxes • If necessary, click line 39 • Enter the HTML code shown in Table 7–8 and then press the ENTER key twice Chapter 7: Creating a Form on a Web Page 17
  18. 18. Chapter 7: Creating a Form on a Web Page 18 Adding Radio Buttons • If necessary, click line 45 • Enter the HTML code shown in Table 7–9 and then press the ENTER key twice
  19. 19. Chapter 7: Creating a Form on a Web Page 19 Adding a Textarea • If necessary, click line 49 • Enter the HTML code shown in Table 7–10 and then press the ENTER key twice
  20. 20. Chapter 7: Creating a Form on a Web Page 20 Adding Submit and Reset Buttons • If necessary, click line 53 • Type <p><input type=”submit” value=”Submit” /> to create the Submit button and then press the ENTER key • Type <input type=”reset” value=”Reset” /></p> to create the Reset button. Do not press the ENTER key
  21. 21. Chapter 7: Creating a Form on a Web Page 21 Adding Submit and Reset Buttons
  22. 22. Chapter 7: Creating a Form on a Web Page 22 Adding Fieldset Controls to Create Form Groupings • Click just before the words Last Name at the beginning of line 19 and then press the ENTER key • Move the insertion point back up to line 19, and type <fieldset><legend align=”right”> Personal Information</legend> as the tag to begin the first fieldset. • Click just before the words E-mail Address on line 26, press the END key to move to the end of the line, and then press the ENTER key • Type </fieldset> to end the first fieldset and then press the ENTER key twice
  23. 23. Chapter 7: Creating a Form on a Web Page 23 Adding Fieldset Controls to Create Form Groupings • With the insertion point on line 29, type <fieldset><legend align=”right”>About Your Order</legend> to start the second fieldset • Click to the right of the </p> on line 46 (at the end of the <input name=“cardexp” line) and then press the ENTER key • Type </fieldset> and press the ENTER key twice
  24. 24. Chapter 7: Creating a Form on a Web Page 24 Adding Fieldset Controls to Create Form Groupings • Type <br /><fieldset><legend align=”right”>Additional Comments</legend> on line 49 to start the third fieldset • Click to the right of the </p> on line 56 (at the end of the line with textarea tags) and then press the ENTER key • Type </fieldset> to end the third fieldset
  25. 25. Chapter 7: Creating a Form on a Web Page 25 Adding Fieldset Controls to Create Form Groupings
  26. 26. Chapter 7: Creating a Form on a Web Page 26 Saving the HTML File • With a USB drive plugged into your computer, click File on the menu bar and then click Save to save the orderform.html file
  27. 27. Chapter 7: Creating a Form on a Web Page 27 Viewing, Testing, and Printing the Web Page Using a Browser • Validate the orderform.html file by file upload at validator.w3.org • In Internet Explorer, click the Address bar to select the URL on the Address bar • Type g:Chapter07ChapterFiles orderform.html and then press the ENTER key to display the completed Order Form for Jana’s Jewels • Review the form to make sure all spelling is correct and the controls are positioned appropriately • Test all of the text boxes on the form. Try to type more than the maximum number of allowable characters in the cardnum and cardexp boxes.
  28. 28. Viewing, Testing, and Printing the Web Page Using a Browser • Click the check boxes to test them. You should be able to choose one, two, or three of the boxes at the same time because check boxes are designed to select more than one option • Test the selection control by clicking the list arrow and selecting one of the three options • Click the radio buttons to test them. You should be able to choose only one choice (Yes or No) • Test the textarea by entering a paragraph of text. Verify that it allows more characters to be entered than are shown in the textarea • Click the Reset button. It should clear and reset all controls to their original (default) state Chapter 7: Creating a Form on a Web Page 28
  29. 29. Viewing, Testing, and Printing the Web Page Using a Browser • Click the Print icon on the Command bar to print the Web page • Click the orderform.html – Notepad button on the • taskbar • Click File on the menu bar and then click Print. Click the Print button in the Print dialog box to print the HTML file Chapter 7: Creating a Form on a Web Page 29
  30. 30. Chapter 7: Creating a Form on a Web Page 30 Viewing, Testing, and Printing the Web Page Using a Browser
  31. 31. Chapter 7: Creating a Form on a Web Page 31 Quitting Notepad and a Browser • Click the Close button on the browser title bar • Click the Close button on the Notepad window title bar
  32. 32. Chapter 7: Creating a Form on a Web Page 32 Chapter Summary • Define terms related to forms • Describe the different form controls and their uses • Use the <form> tag • Use the <input> tag • Create a text box • Create check boxes • Create a selection menu with multiple options • Use the <select> tag • Use the <option> tag
  33. 33. Chapter 7: Creating a Form on a Web Page 33 Chapter Summary • Create radio buttons • Create a textarea box • Create a Submit button • Create a Reset button • Use the <fieldset> tag to group form information
  34. 34. HTML Concepts and Techniques Fifth Edition Chapter 7 Complete Creating a Form on a Web Page

×