html comprehensive concepts and techniques third edition project 7 creating a form on a web page
TRANSCRIPT
![Page 1: HTML Comprehensive Concepts and Techniques Third Edition Project 7 Creating a Form on a Web Page](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649cdf5503460f949a8864/html5/thumbnails/1.jpg)
HTMLComprehensive Concepts and Techniques
Third Edition
Project 7
Creating a Formon a Web Page
![Page 2: HTML Comprehensive Concepts and Techniques Third Edition Project 7 Creating a Form on a Web Page](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649cdf5503460f949a8864/html5/thumbnails/2.jpg)
2HTML Project 7: Creating a Form on a Web Page
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 Comprehensive Concepts and Techniques Third Edition Project 7 Creating a Form on a Web Page](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649cdf5503460f949a8864/html5/thumbnails/3.jpg)
3HTML Project 7: Creating a Form on a Web Page
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 Comprehensive Concepts and Techniques Third Edition Project 7 Creating a Form on a Web Page](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649cdf5503460f949a8864/html5/thumbnails/4.jpg)
4HTML Project 7: Creating a Form on a Web Page
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 Comprehensive Concepts and Techniques Third Edition Project 7 Creating a Form on a Web Page](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649cdf5503460f949a8864/html5/thumbnails/5.jpg)
5HTML Project 7: Creating a Form on a Web Page
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 Comprehensive Concepts and Techniques Third Edition Project 7 Creating a Form on a Web Page](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649cdf5503460f949a8864/html5/thumbnails/6.jpg)
6HTML Project 7: Creating a Form on a Web Page
Input Controls
![Page 7: HTML Comprehensive Concepts and Techniques Third Edition Project 7 Creating a Form on a Web Page](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649cdf5503460f949a8864/html5/thumbnails/7.jpg)
7HTML Project 7: Creating a Form on a Web Page
HTML Tags Used to Create Forms
![Page 8: HTML Comprehensive Concepts and Techniques Third Edition Project 7 Creating a Form on a Web Page](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649cdf5503460f949a8864/html5/thumbnails/8.jpg)
8HTML Project 7: Creating a Form on a Web Page
Starting Notepad and Opening an HTML File• Start Notepad and, if necessary, maximize the
window• With the HTML Data Disk in drive A, click File on
the menu bar and then click Open on the File menu. If necessary, click 31⁄2 Floppy (A:) 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 Comprehensive Concepts and Techniques Third Edition Project 7 Creating a Form on a Web Page](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649cdf5503460f949a8864/html5/thumbnails/9.jpg)
9HTML Project 7: Creating a Form on a Web Page
Starting Notepad and Opening an HTML File
![Page 10: HTML Comprehensive Concepts and Techniques Third Edition Project 7 Creating a Form on a Web Page](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649cdf5503460f949a8864/html5/thumbnails/10.jpg)
10HTML Project 7: Creating a Form on a Web Page
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 Comprehensive Concepts and Techniques Third Edition Project 7 Creating a Form on a Web Page](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649cdf5503460f949a8864/html5/thumbnails/11.jpg)
11HTML Project 7: Creating a Form on a Web Page
Creating a Form and Identifying the Form Process
![Page 12: HTML Comprehensive Concepts and Techniques Third Edition Project 7 Creating a Form on a Web Page](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649cdf5503460f949a8864/html5/thumbnails/12.jpg)
12HTML Project 7: Creating a Form on a Web Page
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 Comprehensive Concepts and Techniques Third Edition Project 7 Creating a Form on a Web Page](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649cdf5503460f949a8864/html5/thumbnails/13.jpg)
13HTML Project 7: Creating a Form on a Web Page
Adding Text Boxes
• Enter the following HTML beginning on line 19
![Page 14: HTML Comprehensive Concepts and Techniques Third Edition Project 7 Creating a Form on a Web Page](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649cdf5503460f949a8864/html5/thumbnails/14.jpg)
14HTML Project 7: Creating a Form on a Web Page
Adding Check Boxes
• Enter the following HTML beginning on line 24
![Page 15: HTML Comprehensive Concepts and Techniques Third Edition Project 7 Creating a Form on a Web Page](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649cdf5503460f949a8864/html5/thumbnails/15.jpg)
15HTML Project 7: Creating a Form on a Web Page
Adding a Selection Menu
• Enter the following HTML beginning on line 31
![Page 16: HTML Comprehensive Concepts and Techniques Third Edition Project 7 Creating a Form on a Web Page](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649cdf5503460f949a8864/html5/thumbnails/16.jpg)
16HTML Project 7: Creating a Form on a Web Page
Adding Additional Text Boxes
• Enter the following HTML beginning on line 38
![Page 17: HTML Comprehensive Concepts and Techniques Third Edition Project 7 Creating a Form on a Web Page](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649cdf5503460f949a8864/html5/thumbnails/17.jpg)
17HTML Project 7: Creating a Form on a Web Page
Adding Radio Buttons
• Enter the following HTML beginning on line 43
![Page 18: HTML Comprehensive Concepts and Techniques Third Edition Project 7 Creating a Form on a Web Page](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649cdf5503460f949a8864/html5/thumbnails/18.jpg)
18HTML Project 7: Creating a Form on a Web Page
Adding a Textarea
• Enter the following HTML beginning on line 47
![Page 19: HTML Comprehensive Concepts and Techniques Third Edition Project 7 Creating a Form on a Web Page](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649cdf5503460f949a8864/html5/thumbnails/19.jpg)
19HTML Project 7: Creating a Form on a Web Page
Adding Submit and Reset Buttons
• If necessary, click line 51
• Type <p><input type=“submit” value=“Submit”> and then press the ENTER key
• Type <input type=“reset” value=“Reset”></p>
![Page 20: HTML Comprehensive Concepts and Techniques Third Edition Project 7 Creating a Form on a Web Page](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649cdf5503460f949a8864/html5/thumbnails/20.jpg)
20HTML Project 7: Creating a Form on a Web Page
Adding Submit and Reset Buttons
![Page 21: HTML Comprehensive Concepts and Techniques Third Edition Project 7 Creating a Form on a Web Page](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649cdf5503460f949a8864/html5/thumbnails/21.jpg)
21HTML Project 7: Creating a Form on a Web Page
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="left">Required Information</legend> as the tag
• Click to the right of maxlength="4"> on line 42 and then press the ENTER key
• Type </fieldset> and then press the ENTER key twice
![Page 22: HTML Comprehensive Concepts and Techniques Third Edition Project 7 Creating a Form on a Web Page](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649cdf5503460f949a8864/html5/thumbnails/22.jpg)
22HTML Project 7: Creating a Form on a Web Page
Adding Fieldset Controls to Create Form Groupings• With the insertion point on line 45, type <br /><fieldset><legend align="right">Additional Comments</legend> as the tag
• Click to the right of the </p> on line 53 and then press the ENTER key
• Type </fieldset> as the tag
![Page 23: HTML Comprehensive Concepts and Techniques Third Edition Project 7 Creating a Form on a Web Page](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649cdf5503460f949a8864/html5/thumbnails/23.jpg)
23HTML Project 7: Creating a Form on a Web Page
Adding Fieldset Controls to Create Form Groupings
![Page 24: HTML Comprehensive Concepts and Techniques Third Edition Project 7 Creating a Form on a Web Page](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649cdf5503460f949a8864/html5/thumbnails/24.jpg)
24HTML Project 7: Creating a Form on a Web Page
Saving the HTML File
• With the HTML Data Disk in drive A, click File on the menu bar and then click Save As. Type orderform.htm in the File name text box
• If necessary, click 31⁄2 Floppy (A:) 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 25: HTML Comprehensive Concepts and Techniques Third Edition Project 7 Creating a Form on a Web Page](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649cdf5503460f949a8864/html5/thumbnails/25.jpg)
25HTML Project 7: Creating a Form on a Web Page
Viewing, Testing, and Printing the Web Page Using a Browser• Start your browser• Type a:\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 26: HTML Comprehensive Concepts and Techniques Third Edition Project 7 Creating a Form on a Web Page](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649cdf5503460f949a8864/html5/thumbnails/26.jpg)
26HTML Project 7: Creating a Form on a Web Page
Viewing, Testing, and Printing the Web Page Using a Browser
![Page 27: HTML Comprehensive Concepts and Techniques Third Edition Project 7 Creating a Form on a Web Page](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649cdf5503460f949a8864/html5/thumbnails/27.jpg)
27HTML Project 7: Creating a Form on a Web Page
Viewing, Testing, and Printing the Web Page Using a Browser• Click the Print button
on the Standard Buttons toolbar
![Page 28: HTML Comprehensive Concepts and Techniques Third Edition Project 7 Creating a Form on a Web Page](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649cdf5503460f949a8864/html5/thumbnails/28.jpg)
28HTML Project 7: Creating a Form on a Web Page
Printing the HTML File
• Click the Notepad button on the taskbar
• Click File on the menu bar and then click Print
![Page 29: HTML Comprehensive Concepts and Techniques Third Edition Project 7 Creating a Form on a Web Page](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649cdf5503460f949a8864/html5/thumbnails/29.jpg)
29HTML Project 7: Creating a Form on a Web Page
Printing the HTML File
![Page 30: HTML Comprehensive Concepts and Techniques Third Edition Project 7 Creating a Form on a Web Page](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649cdf5503460f949a8864/html5/thumbnails/30.jpg)
30HTML Project 7: Creating a Form on a Web Page
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 31: HTML Comprehensive Concepts and Techniques Third Edition Project 7 Creating a Form on a Web Page](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649cdf5503460f949a8864/html5/thumbnails/31.jpg)
31HTML Project 7: Creating a Form on a Web Page
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 32: HTML Comprehensive Concepts and Techniques Third Edition Project 7 Creating a Form on a Web Page](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649cdf5503460f949a8864/html5/thumbnails/32.jpg)
32HTML Project 7: Creating a Form on a Web Page
Project Summary
• Create check boxes
• Create a selection menu with multiple options
• Use the <select> tag
• Use the <option> tag
• Create radio buttons
![Page 33: HTML Comprehensive Concepts and Techniques Third Edition Project 7 Creating a Form on a Web Page](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649cdf5503460f949a8864/html5/thumbnails/33.jpg)
33HTML Project 7: Creating a Form on a Web Page
Project Summary
• Create a textarea box
• Create a Submit button
• Create a Reset button
• Use the <fieldset> tag to group form information
![Page 34: HTML Comprehensive Concepts and Techniques Third Edition Project 7 Creating a Form on a Web Page](https://reader035.vdocuments.site/reader035/viewer/2022062407/56649cdf5503460f949a8864/html5/thumbnails/34.jpg)
HTMLComprehensive Concepts and Techniques
Third Edition
Project 7 Complete