Embed Size (px)
Citation preview
HTMLComprehensive Concepts and Techniques
Third Edition
Project 7
Creating a Formon a Web Page
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
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
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
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
6HTML Project 7: Creating a Form on a Web Page
Input Controls
7HTML Project 7: Creating a Form on a Web Page
HTML Tags Used to Create Forms
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
9HTML Project 7: Creating a Form on a Web Page
Starting Notepad and Opening an HTML File
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
11HTML Project 7: Creating a Form on a Web Page
Creating a Form and Identifying the Form Process
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
13HTML Project 7: Creating a Form on a Web Page
Adding Text Boxes
• Enter the following HTML beginning on line 19
14HTML Project 7: Creating a Form on a Web Page
Adding Check Boxes
• Enter the following HTML beginning on line 24
15HTML Project 7: Creating a Form on a Web Page
Adding a Selection Menu
• Enter the following HTML beginning on line 31
16HTML Project 7: Creating a Form on a Web Page
Adding Additional Text Boxes
• Enter the following HTML beginning on line 38
17HTML Project 7: Creating a Form on a Web Page
Adding Radio Buttons
• Enter the following HTML beginning on line 43
18HTML Project 7: Creating a Form on a Web Page
Adding a Textarea
• Enter the following HTML beginning on line 47
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>
20HTML Project 7: Creating a Form on a Web Page
Adding Submit and Reset Buttons
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
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
23HTML Project 7: Creating a Form on a Web Page
Adding Fieldset Controls to Create Form Groupings
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
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
26HTML Project 7: Creating a Form on a Web Page
Viewing, Testing, and Printing the Web Page Using a Browser
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
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
29HTML Project 7: Creating a Form on a Web Page
Printing the HTML File
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
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
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
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
HTMLComprehensive Concepts and Techniques
Third Edition
Project 7 Complete
![Comprehensive Plan Concepts August [Draft]](https://img.dokumen.tips/doc/110x75/563dbb8b550346aa9aae18b5/comprehensive-plan-concepts-august-draft.jpg)
