Transcript Project 7

HTML
Concepts and Techniques
Fourth Edition
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
Project 7: Creating a Form on a Web Page
2
Project Objectives
•
•
•
•
•
Create check boxes
Create a selection menu with multiple options
Use the <select> tag
Use the <option> tag
Create radio buttons
Project 7: Creating a Form on a Web Page
3
Project Objectives
•
•
•
•
Create a textarea box
Create a Submit button
Create a Reset button
Use the <fieldset> tag to group form information
Project 7: Creating a Form on a Web Page
4
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
Project 7: Creating a Form on a Web Page
5
Input Controls
Project 7: Creating a Form on a Web Page
6
HTML Tags Used to Create Forms
Project 7: Creating a Form on a Web Page
7
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
Project 7: Creating a Form on a Web Page
8
Starting Notepad
and Opening an HTML File
Project 7: Creating a Form on a Web Page
9
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
Project 7: Creating a Form on a Web Page
10
Creating a Form
and Identifying the Form Process
Project 7: Creating a Form on a Web Page
11
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
Project 7: Creating a Form on a Web Page
12
Adding Text Boxes
• Enter the following HTML beginning on line 19
Project 7: Creating a Form on a Web Page
13
Adding Check Boxes
• Enter the following HTML beginning on line 27
Project 7: Creating a Form on a Web Page
14
Adding a Selection Menu
• Enter the following HTML beginning on line 32
Project 7: Creating a Form on a Web Page
15
Adding Additional Text Boxes
• Enter the following HTML beginning on line 39
Project 7: Creating a Form on a Web Page
16
Adding Radio Buttons
• Enter the following HTML beginning on line 45
Project 7: Creating a Form on a Web Page
17
Adding a Textarea
• Enter the following HTML beginning on line 49
Project 7: Creating a Form on a Web Page
18
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
Project 7: Creating a Form on a Web Page
19
Adding Submit and Reset Buttons
Project 7: Creating a Form on a Web Page
20
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
Project 7: Creating a Form on a Web Page
21
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
Project 7: Creating a Form on a Web Page
22
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
Project 7: Creating a Form on a Web Page
23
Adding Fieldset Controls
to Create Form Groupings
Project 7: Creating a Form on a Web Page
24
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
Project 7: Creating a Form on a Web Page
25
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
Project 7: Creating a Form on a Web Page
26
Viewing, Testing, and Printing the
Web Page Using a Browser
Project 7: Creating a Form on a Web Page
27
Viewing, Testing, and Printing the
Web Page Using a Browser
• Click the Print button on
the Standard Buttons
toolbar
Project 7: Creating a Form on a Web Page
28
Printing the HTML File
• Click the Notepad button on the taskbar
• Click File on the menu bar and then click Print
Project 7: Creating a Form on a Web Page
29
Printing the HTML File
Project 7: Creating a Form on a Web Page
30
Quitting Notepad and a Browser
• Click the Close button on the browser title bar
• Click the Close button on the Notepad window
title bar
Project 7: Creating a Form on a Web Page
31
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
Project 7: Creating a Form on a Web Page
32
Project Summary
•
•
•
•
•
Create check boxes
Create a selection menu with multiple options
Use the <select> tag
Use the <option> tag
Create radio buttons
Project 7: Creating a Form on a Web Page
33
Project Summary
•
•
•
•
Create a textarea box
Create a Submit button
Create a Reset button
Use the <fieldset> tag to group form information
Project 7: Creating a Form on a Web Page
34
HTML
Concepts and Techniques
Fourth Edition
Project 7 Complete
Creating a Form
on a Web Page