HTML

Comprehensive Concepts and Techniques

Third 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

HTML 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

HTML 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

HTML 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

HTML Project 7: Creating a Form on a Web Page 5

 Input Controls

HTML Project 7: Creating a Form on a Web Page 6

 HTML Tags Used to Create Forms

HTML 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 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

HTML Project 7: Creating a Form on a Web Page 8

 Starting Notepad
and Opening an HTML File

HTML 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:billthomas@isp.c
om"> as the new tag
• Click just before the </body> tag on line 35
• Type </form> and then press the ENTER
key
HTML Project 7: Creating a Form on a Web Page 10
 Creating a Form
and Identifying the Form Process

HTML 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

HTML Project 7: Creating a Form on a Web Page 12

 Adding Text Boxes
• Enter the following HTML beginning on
line 19

HTML Project 7: Creating a Form on a Web Page 13

 Adding Check Boxes
• Enter the following HTML beginning on
line 24

HTML Project 7: Creating a Form on a Web Page 14

 Adding a Selection Menu
• Enter the following HTML beginning on
line 31

HTML Project 7: Creating a Form on a Web Page 15

 Adding Additional Text Boxes
• Enter the following HTML beginning on
line 38

HTML Project 7: Creating a Form on a Web Page 16

 Adding Radio Buttons
• Enter the following HTML beginning on
line 43

HTML Project 7: Creating a Form on a Web Page 17

 Adding a Textarea
• Enter the following HTML beginning on
line 47

HTML Project 7: Creating a Form on a Web Page 18

 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>

HTML Project 7: Creating a Form on a Web Page 19

 Adding Submit and Reset Buttons

HTML 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="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
HTML Project 7: Creating a Form on a Web Page 21
 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

HTML Project 7: Creating a Form on a Web Page 22

 Adding Fieldset Controls
to Create Form Groupings

HTML Project 7: Creating a Form on a Web Page 23

 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

HTML Project 7: Creating a Form on a Web Page 24

 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

HTML Project 7: Creating a Form on a Web Page 25

 Viewing, Testing, and Printing the
Web Page Using a Browser

HTML Project 7: Creating a Form on a Web Page 26

 Viewing, Testing, and Printing the
Web Page Using a Browser
• Click the Print button
on the Standard
Buttons toolbar

HTML Project 7: Creating a Form on a Web Page 27

 Printing the HTML File
• Click the Notepad button on the taskbar
• Click File on the menu bar and then click
Print

HTML Project 7: Creating a Form on a Web Page 28

 Printing the HTML File

HTML Project 7: Creating a Form on a Web Page 29

 Quitting Notepad and a Browser
• Click the Close button on the browser title
bar
• Click the Close button on the Notepad
window title bar

HTML Project 7: Creating a Form on a Web Page 30

 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

HTML Project 7: Creating a Form on a Web Page 31

 Project Summary
• Create check boxes
• Create a selection menu with multiple
options
• Use the <select> tag
• Use the <option> tag
• Create radio buttons

HTML Project 7: Creating a Form on a Web Page 32

 Project Summary
• Create a textarea box
• Create a Submit button
• Create a Reset button
• Use the <fieldset> tag to group form
information

HTML Project 7: Creating a Form on a Web Page 33

 HTML
Comprehensive Concepts and Techniques
Third Edition

Project 7 Complete