HTML Concepts and Techniques Fourth Edition Project 7 Creating a Form on a Web Page.
-
Upload
owen-peters -
Category
Documents
-
view
212 -
download
0
Transcript of HTML Concepts and Techniques Fourth Edition Project 7 Creating a Form on a Web Page.
![Page 1: HTML Concepts and Techniques Fourth Edition Project 7 Creating a Form on a Web Page.](https://reader035.fdocuments.us/reader035/viewer/2022070400/56649ebe5503460f94bc7823/html5/thumbnails/1.jpg)
HTMLConcepts and Techniques
Fourth Edition
Project 7
Creating a Formon a Web Page
![Page 2: HTML Concepts and Techniques Fourth Edition Project 7 Creating a Form on a Web Page.](https://reader035.fdocuments.us/reader035/viewer/2022070400/56649ebe5503460f94bc7823/html5/thumbnails/2.jpg)
Project 7: Creating a Form on a Web Page 2
Project 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
![Page 3: HTML Concepts and Techniques Fourth Edition Project 7 Creating a Form on a Web Page.](https://reader035.fdocuments.us/reader035/viewer/2022070400/56649ebe5503460f94bc7823/html5/thumbnails/3.jpg)
Project 7: Creating a Form on a Web Page 3
Project Objectives
• Create check boxes• Create a selection menu with multiple options• Use the <select> tag• Use the <option> tag• Create radio buttons
![Page 4: HTML Concepts and Techniques Fourth Edition Project 7 Creating a Form on a Web Page.](https://reader035.fdocuments.us/reader035/viewer/2022070400/56649ebe5503460f94bc7823/html5/thumbnails/4.jpg)
Project 7: Creating a Form on a Web Page 4
Project Objectives
• Create a textarea box• Create a Submit button• Create a Reset button• Use the <fieldset> tag to group form information
![Page 5: HTML Concepts and Techniques Fourth Edition Project 7 Creating a Form on a Web Page.](https://reader035.fdocuments.us/reader035/viewer/2022070400/56649ebe5503460f94bc7823/html5/thumbnails/5.jpg)
Project 7: Creating a Form on a Web Page 5
Input Controls
• An input control is any type of input mechanism on a form
• 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
![Page 6: HTML Concepts and Techniques Fourth Edition Project 7 Creating a Form on a Web Page.](https://reader035.fdocuments.us/reader035/viewer/2022070400/56649ebe5503460f94bc7823/html5/thumbnails/6.jpg)
Project 7: Creating a Form on a Web Page 6
Input Controls
![Page 7: HTML Concepts and Techniques Fourth Edition Project 7 Creating a Form on a Web Page.](https://reader035.fdocuments.us/reader035/viewer/2022070400/56649ebe5503460f94bc7823/html5/thumbnails/7.jpg)
Project 7: Creating a Form on a Web Page 7
HTML Tags Used to Create Forms
![Page 8: HTML Concepts and Techniques Fourth Edition Project 7 Creating a Form on a Web Page.](https://reader035.fdocuments.us/reader035/viewer/2022070400/56649ebe5503460f94bc7823/html5/thumbnails/8.jpg)
Project 7: Creating a Form on a Web Page 8
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, click USB Drive (G:) in the Look in list. Click the Project07 folder and then click the ProjectFiles folder in the list of available folders
• If necessary, click the Files of type box arrow and then click All Files
• Double-click orderform.htm in the list of files
![Page 9: HTML Concepts and Techniques Fourth Edition Project 7 Creating a Form on a Web Page.](https://reader035.fdocuments.us/reader035/viewer/2022070400/56649ebe5503460f94bc7823/html5/thumbnails/9.jpg)
Project 7: Creating a Form on a Web Page 9
Starting Notepad and Opening an HTML File
![Page 10: HTML Concepts and Techniques Fourth Edition Project 7 Creating a Form on a Web Page.](https://reader035.fdocuments.us/reader035/viewer/2022070400/56649ebe5503460f94bc7823/html5/thumbnails/10.jpg)
Project 7: Creating a Form on a Web Page 10
Creating a Form and Identifying the Form Process
• Highlight the words <!--Put form method statement here --> on line 12 and then press the DELETE key
• Type <form method="post" action="mailto:[email protected]"> as the new tag
• Click just before the </body> tag on line 35• Type </form> and then press the ENTER key
![Page 11: HTML Concepts and Techniques Fourth Edition Project 7 Creating a Form on a Web Page.](https://reader035.fdocuments.us/reader035/viewer/2022070400/56649ebe5503460f94bc7823/html5/thumbnails/11.jpg)
Project 7: Creating a Form on a Web Page 11
Creating a Form and Identifying the Form Process
![Page 12: HTML Concepts and Techniques Fourth Edition Project 7 Creating a Form on a Web Page.](https://reader035.fdocuments.us/reader035/viewer/2022070400/56649ebe5503460f94bc7823/html5/thumbnails/12.jpg)
Project 7: Creating a Form on a Web Page 12
Changing the Text Message
• Select lines 15 through 31 and then press the DELETE key
• With the insertion point on line 15, enter the HTML code shown below
![Page 13: HTML Concepts and Techniques Fourth Edition Project 7 Creating a Form on a Web Page.](https://reader035.fdocuments.us/reader035/viewer/2022070400/56649ebe5503460f94bc7823/html5/thumbnails/13.jpg)
Project 7: Creating a Form on a Web Page 13
Adding Text Boxes
• Enter the following HTML beginning on line 19
![Page 14: HTML Concepts and Techniques Fourth Edition Project 7 Creating a Form on a Web Page.](https://reader035.fdocuments.us/reader035/viewer/2022070400/56649ebe5503460f94bc7823/html5/thumbnails/14.jpg)
Project 7: Creating a Form on a Web Page 14
Adding Check Boxes
• Enter the following HTML beginning on line 27
![Page 15: HTML Concepts and Techniques Fourth Edition Project 7 Creating a Form on a Web Page.](https://reader035.fdocuments.us/reader035/viewer/2022070400/56649ebe5503460f94bc7823/html5/thumbnails/15.jpg)
Project 7: Creating a Form on a Web Page 15
Adding a Selection Menu
• Enter the following HTML beginning on line 32
![Page 16: HTML Concepts and Techniques Fourth Edition Project 7 Creating a Form on a Web Page.](https://reader035.fdocuments.us/reader035/viewer/2022070400/56649ebe5503460f94bc7823/html5/thumbnails/16.jpg)
Project 7: Creating a Form on a Web Page 16
Adding Additional Text Boxes
• Enter the following HTML beginning on line 39
![Page 17: HTML Concepts and Techniques Fourth Edition Project 7 Creating a Form on a Web Page.](https://reader035.fdocuments.us/reader035/viewer/2022070400/56649ebe5503460f94bc7823/html5/thumbnails/17.jpg)
Project 7: Creating a Form on a Web Page 17
Adding Radio Buttons
• Enter the following HTML beginning on line 45
![Page 18: HTML Concepts and Techniques Fourth Edition Project 7 Creating a Form on a Web Page.](https://reader035.fdocuments.us/reader035/viewer/2022070400/56649ebe5503460f94bc7823/html5/thumbnails/18.jpg)
Project 7: Creating a Form on a Web Page 18
Adding a Textarea
• Enter the following HTML beginning on line 49
![Page 19: HTML Concepts and Techniques Fourth Edition Project 7 Creating a Form on a Web Page.](https://reader035.fdocuments.us/reader035/viewer/2022070400/56649ebe5503460f94bc7823/html5/thumbnails/19.jpg)
Project 7: Creating a Form on a Web Page 19
Adding Submit and Reset Buttons
• If necessary, click line 53• Type <p><input type=“submit” value=“Submit”> and then press the ENTER key
• Type <input type=“reset” value=“Reset”></p> as the tag
![Page 20: HTML Concepts and Techniques Fourth Edition Project 7 Creating a Form on a Web Page.](https://reader035.fdocuments.us/reader035/viewer/2022070400/56649ebe5503460f94bc7823/html5/thumbnails/20.jpg)
Project 7: Creating a Form on a Web Page 20
Adding Submit and Reset Buttons
![Page 21: HTML Concepts and Techniques Fourth Edition Project 7 Creating a Form on a Web Page.](https://reader035.fdocuments.us/reader035/viewer/2022070400/56649ebe5503460f94bc7823/html5/thumbnails/21.jpg)
Project 7: Creating a Form on a Web Page 21
Adding Fieldset Controls to Create Form Groupings
• Click just after the </p> on line 17 and then press the ENTER key
• Type <fieldset><legend align=“right">Personal Information</legend> as the tag
• Click to the right of size=“25"> on line 25 and then press the ENTER key
• Type </fieldset> and then press the ENTER key twice
![Page 22: HTML Concepts and Techniques Fourth Edition Project 7 Creating a Form on a Web Page.](https://reader035.fdocuments.us/reader035/viewer/2022070400/56649ebe5503460f94bc7823/html5/thumbnails/22.jpg)
Project 7: Creating a Form on a Web Page 22
Adding Fieldset Controls to Create Form Groupings
• With the insertion point on line 28, type <p><fieldset><legend align="right">About Your Order</legend> as the tag
• Click to the right of the </p> on line 45 and then press the ENTER key
• Type </fieldset> and press the ENTER key twice
![Page 23: HTML Concepts and Techniques Fourth Edition Project 7 Creating a Form on a Web Page.](https://reader035.fdocuments.us/reader035/viewer/2022070400/56649ebe5503460f94bc7823/html5/thumbnails/23.jpg)
Project 7: Creating a Form on a Web Page 23
Adding Fieldset Controls to Create Form Groupings
• Type <br /><fieldset><legend align="right">Additional Comments</legend> on line 48
• Click to the right of the </p> on line 55 and press the ENTER key
• Type </fieldset> as the end tag
![Page 24: HTML Concepts and Techniques Fourth Edition Project 7 Creating a Form on a Web Page.](https://reader035.fdocuments.us/reader035/viewer/2022070400/56649ebe5503460f94bc7823/html5/thumbnails/24.jpg)
Project 7: Creating a Form on a Web Page 24
Adding Fieldset Controls to Create Form Groupings
![Page 25: HTML Concepts and Techniques Fourth Edition Project 7 Creating a Form on a Web Page.](https://reader035.fdocuments.us/reader035/viewer/2022070400/56649ebe5503460f94bc7823/html5/thumbnails/25.jpg)
Project 7: Creating a Form on a Web Page 25
Saving the HTML File
• With a USB drive plugged into your computer, click File on the menu bar and then click Save As. Type orderform.htm in the File name text box
• If necessary, click USB Drive (G:) in the Save in list. Click the Project07 folder and then click the ProjectFiles folder in the list of available folders. Click the Save button in the Save As dialog box
![Page 26: HTML Concepts and Techniques Fourth Edition Project 7 Creating a Form on a Web Page.](https://reader035.fdocuments.us/reader035/viewer/2022070400/56649ebe5503460f94bc7823/html5/thumbnails/26.jpg)
Project 7: Creating a Form on a Web Page 26
Viewing, Testing, and Printing the Web Page Using a Browser
• Start your browser• Type G:\Project07\ProjectFiles\orderform.htm in the Address box and then press the ENTER key
• Test all fields except the Reset button as described in the previous section
• If you modified the HTML code to use your e-mail address as the action attribute value, click the Submit button
• Click the Reset button
![Page 27: HTML Concepts and Techniques Fourth Edition Project 7 Creating a Form on a Web Page.](https://reader035.fdocuments.us/reader035/viewer/2022070400/56649ebe5503460f94bc7823/html5/thumbnails/27.jpg)
Project 7: Creating a Form on a Web Page 27
Viewing, Testing, and Printing the Web Page Using a Browser
![Page 28: HTML Concepts and Techniques Fourth Edition Project 7 Creating a Form on a Web Page.](https://reader035.fdocuments.us/reader035/viewer/2022070400/56649ebe5503460f94bc7823/html5/thumbnails/28.jpg)
Project 7: Creating a Form on a Web Page 28
Viewing, Testing, and Printing the Web Page Using a Browser
• Click the Print button on the Standard Buttons toolbar
![Page 29: HTML Concepts and Techniques Fourth Edition Project 7 Creating a Form on a Web Page.](https://reader035.fdocuments.us/reader035/viewer/2022070400/56649ebe5503460f94bc7823/html5/thumbnails/29.jpg)
Project 7: Creating a Form on a Web Page 29
Printing the HTML File
• Click the Notepad button on the taskbar• Click File on the menu bar and then click Print
![Page 30: HTML Concepts and Techniques Fourth Edition Project 7 Creating a Form on a Web Page.](https://reader035.fdocuments.us/reader035/viewer/2022070400/56649ebe5503460f94bc7823/html5/thumbnails/30.jpg)
Project 7: Creating a Form on a Web Page 30
Printing the HTML File
![Page 31: HTML Concepts and Techniques Fourth Edition Project 7 Creating a Form on a Web Page.](https://reader035.fdocuments.us/reader035/viewer/2022070400/56649ebe5503460f94bc7823/html5/thumbnails/31.jpg)
Project 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
![Page 32: HTML Concepts and Techniques Fourth Edition Project 7 Creating a Form on a Web Page.](https://reader035.fdocuments.us/reader035/viewer/2022070400/56649ebe5503460f94bc7823/html5/thumbnails/32.jpg)
Project 7: Creating a Form on a Web Page 32
Project 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
![Page 33: HTML Concepts and Techniques Fourth Edition Project 7 Creating a Form on a Web Page.](https://reader035.fdocuments.us/reader035/viewer/2022070400/56649ebe5503460f94bc7823/html5/thumbnails/33.jpg)
Project 7: Creating a Form on a Web Page 33
Project Summary
• Create check boxes• Create a selection menu with multiple options• Use the <select> tag• Use the <option> tag• Create radio buttons
![Page 34: HTML Concepts and Techniques Fourth Edition Project 7 Creating a Form on a Web Page.](https://reader035.fdocuments.us/reader035/viewer/2022070400/56649ebe5503460f94bc7823/html5/thumbnails/34.jpg)
Project 7: Creating a Form on a Web Page 34
Project Summary
• Create a textarea box• Create a Submit button• Create a Reset button• Use the <fieldset> tag to group form information
![Page 35: HTML Concepts and Techniques Fourth Edition Project 7 Creating a Form on a Web Page.](https://reader035.fdocuments.us/reader035/viewer/2022070400/56649ebe5503460f94bc7823/html5/thumbnails/35.jpg)
HTMLConcepts and Techniques
Fourth Edition
Project 7 Complete
Creating a Formon a Web Page