This chapter discusses how to create forms on web pages. It defines common form controls like text boxes, checkboxes, dropdown menus and buttons. It provides the HTML tags needed to create each form element and shows how to group related form fields together using fieldsets. The chapter walks through building a sample product order form step-by-step and provides the full HTML code for the completed form. It also describes how to test and view the form using a web browser.

1. HTML
Concepts and Techniques
Fifth Edition
Chapter 7
Creating a Form
on a Web Page

2. Chapter 7: Creating a Form on a Web Page 2
Chapter 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
• Create check boxes
• Create a selection menu with multiple options
• Use the <select> tag
• Use the <option> tag

3. Chapter 7: Creating a Form on a Web Page 3
Chapter Objectives
• Create radio buttons
• Create a textarea box
• Create a Submit button
• Create a Reset button
• Use the <fieldset> tag to group form information

4. Chapter 7: Creating a Form on a Web Page 4
Creating Web Page Forms
• Many Web pages are designed to present information to
a user.
• When a form is included on a Web pages, the Web page
can be used to gather information from Web.
• Example of form commonly used on Web sites include:
– A feedback form to gather visitors’ comments.
– A guestbook to allow users to sign in as visitor.
– A registration form for visitor to create an account.
– A survey form to gather information on any topics.
– A search form for user to a search for other information.
– An order form to select products and enter shipping.

5. Chapter 7: Creating a Form on a Web Page 5

6. Input Controls
• An input control is any type of input mechanism on a
form.
• A form may contain several different input controls
classified as data or text input controls.
• 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.
• Refer Table 7-1 Form Input Control
Chapter 7: Creating a Form on a Web Page 6

7. Chapter 7: Creating a Form on a Web Page 7
Table 7-1 Form Input Control

8. Chapter 7: Creating a Form on a Web Page 8
Table 7-2 HTML Tags Used to Create Forms

9. Chapter 7: Creating a Form on a Web Page 9
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, navigate to the Chapter07ChapterFiles
folder on the USB drive
• If necessary, click the Files of type box arrow and then
click All Files in the g:Chapter07ChapterFiles folder
• Click orderform.html in the list of files
• Click the Open button to open the orderform.html file in
Notepad

10. Chapter 7: Creating a Form on a Web Page 10
Starting Notepad
and Opening an HTML File

11. Chapter 7: Creating a Form on a Web Page 11
Creating a Form
and Identifying the Form Process
• Highlight the words <!--Put form method statement
here --> on line 13
• Type <form method=”post”
action=”mailto:janasjewels@isp.com”> to
replace the highlighted words with the new tag
• Click on the blank line 36 and press the ENTER key
• Type </form> but do not press the ENTER Key

12. Chapter 7: Creating a Form on a Web Page 12
Creating a Form
and Identifying the Form Process

13. Changing the Text Message
• Highlight lines 18 through 32 (starting with the word
“below” and ending above <p>Thank you for your order)
and then press the DELETE key
• With the insertion point on line 18, enter the HTML code
shown in Table 7–4 and then press the ENTER key
twice
Chapter 7: Creating a Form on a Web Page 13

14. Adding Text Boxes
• If necessary, click line 19
• Enter the HTML code shown in Table 7–5 and then press
the ENTER key twice
Chapter 7: Creating a Form on a Web Page 14

15. Adding Check Boxes
• If necessary, click line 27
• Enter the HTML code shown in Table 7–6 and then press
the ENTER key twice
Chapter 7: Creating a Form on a Web Page 15

16. Adding a Selection Menu
• If necessary, click line 32
• Enter the HTML code shown in Table 7–7 and then press
the ENTER key twice
Chapter 7: Creating a Form on a Web Page 16

17. Adding Additional Text Boxes
• If necessary, click line 39
• Enter the HTML code shown in Table 7–8 and then press
the ENTER key twice
Chapter 7: Creating a Form on a Web Page 17

18. Chapter 7: Creating a Form on a Web Page 18
Adding Radio Buttons
• If necessary, click line 45
• Enter the HTML code shown in Table 7–9 and then press
the ENTER key twice

19. Chapter 7: Creating a Form on a Web Page 19
Adding a Textarea
• If necessary, click line 49
• Enter the HTML code shown in Table 7–10 and then
press the ENTER key twice

20. Chapter 7: Creating a Form on a Web Page 20
Adding Submit and Reset Buttons
• If necessary, click line 53
• Type <p><input type=”submit”
value=”Submit” /> to create the Submit button and
then press the ENTER key
• Type <input type=”reset” value=”Reset”
/></p> to create the Reset button. Do not press the
ENTER key

21. Chapter 7: Creating a Form on a Web Page 21
Adding Submit and Reset Buttons

22. Chapter 7: Creating a Form on a Web Page 22
Adding Fieldset Controls
to Create Form Groupings
• Click just before the words Last Name at the beginning
of line 19 and then press the ENTER key
• Move the insertion point back up to line 19, and type
<fieldset><legend align=”right”> Personal
Information</legend> as the tag to begin the first
fieldset.
• Click just before the words E-mail Address on line 26,
press the END key to move to the end of the line, and
then press the ENTER key
• Type </fieldset> to end the first fieldset and then
press the ENTER key twice

23. Chapter 7: Creating a Form on a Web Page 23
Adding Fieldset Controls
to Create Form Groupings
• With the insertion point on line 29, type
<fieldset><legend align=”right”>About
Your Order</legend> to start the second fieldset
• Click to the right of the </p> on line 46 (at the end of the
<input name=“cardexp” line) and then press the ENTER
key
• Type </fieldset> and press the ENTER key twice

24. Chapter 7: Creating a Form on a Web Page 24
Adding Fieldset Controls
to Create Form Groupings
• Type <br /><fieldset><legend
align=”right”>Additional
Comments</legend> on line 49 to start the third
fieldset
• Click to the right of the </p> on line 56 (at the end of the
line with textarea tags) and then press the ENTER key
• Type </fieldset> to end the third fieldset

25. Chapter 7: Creating a Form on a Web Page 25
Adding Fieldset Controls
to Create Form Groupings

26. Chapter 7: Creating a Form on a Web Page 26
Saving the HTML File
• With a USB drive plugged into your computer, click
File on the menu bar and then click Save to save the
orderform.html file

27. Chapter 7: Creating a Form on a Web Page 27
Viewing, Testing, and Printing the Web Page
Using a Browser
• Validate the orderform.html file by file upload at validator.w3.org
• In Internet Explorer, click the Address bar to select the URL on the
Address bar
• Type g:Chapter07ChapterFiles orderform.html and
then press the ENTER key to display the completed Order Form for
Jana’s Jewels
• Review the form to make sure all spelling is correct and the controls
are positioned appropriately
• Test all of the text boxes on the form. Try to type more than the
maximum number of allowable characters in the cardnum and
cardexp boxes.

28. Viewing, Testing, and Printing the Web Page
Using a Browser
• Click the check boxes to test them. You should be able to choose
one, two, or three of the boxes at the same time because check
boxes are designed to select more than one option
• Test the selection control by clicking the list arrow and selecting
one of the three options
• Click the radio buttons to test them. You should be able to choose
only one choice (Yes or No)
• Test the textarea by entering a paragraph of text. Verify that it
allows more characters to be entered than are shown in the
textarea
• Click the Reset button. It should clear and reset all controls to their
original (default) state
Chapter 7: Creating a Form on a Web Page 28

29. Viewing, Testing, and Printing the Web Page
Using a Browser
• Click the Print icon on the Command bar to print the
Web page
• Click the orderform.html – Notepad button on the
• taskbar
• Click File on the menu bar and then click Print. Click
the Print button in the Print dialog box to print the
HTML file
Chapter 7: Creating a Form on a Web Page 29

30. Chapter 7: Creating a Form on a Web Page 30
Viewing, Testing, and Printing the Web Page
Using a Browser

31. Chapter 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

32. Chapter 7: Creating a Form on a Web Page 32
Chapter 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
• Create check boxes
• Create a selection menu with multiple options
• Use the <select> tag
• Use the <option> tag

33. Chapter 7: Creating a Form on a Web Page 33
Chapter Summary
• Create radio buttons
• Create a textarea box
• Create a Submit button
• Create a Reset button
• Use the <fieldset> tag to group form information

34. HTML
Concepts and Techniques
Fifth Edition
Chapter 7 Complete
Creating a Form
on a Web Page