Upload
mohamad-sahiedan
View
118
Download
0
Tags:
Embed Size (px)
Citation preview
HTMLConcepts and Techniques
Fifth Edition
Chapter 7
Creating a Formon a Web Page
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
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
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.
Chapter 7: Creating a Form on a Web Page 5
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
Chapter 7: Creating a Form on a Web Page 7
Table 7-1 Form Input Control
Chapter 7: Creating a Form on a Web Page 8
Table 7-2 HTML Tags Used to Create Forms
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 Chapter07\ChapterFiles
folder on the USB drive• If necessary, click the Files of type box arrow and then
click All Files in the g:\Chapter07\ChapterFiles folder• Click orderform.html in the list of files• Click the Open button to open the orderform.html file in
Notepad
Chapter 7: Creating a Form on a Web Page 10
Starting Notepad and Opening an HTML File
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:[email protected]”> 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
Chapter 7: Creating a Form on a Web Page 12
Creating a Form and Identifying the Form Process
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
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
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
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
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
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
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
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
Chapter 7: Creating a Form on a Web Page 21
Adding Submit and Reset Buttons
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
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
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
Chapter 7: Creating a Form on a Web Page 25
Adding Fieldset Controls to Create Form Groupings
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
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:\Chapter07\ChapterFiles\ 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.
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
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
Chapter 7: Creating a Form on a Web Page 30
Viewing, Testing, and Printing the Web Page Using a Browser
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
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
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
HTMLConcepts and Techniques
Fifth Edition
Chapter 7 Complete
Creating a Formon a Web Page