HTMLConcepts and Techniques

Fifth Edition

Chapter 7

Creating a Formon a Web Page

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

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

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.

Chapter 7: Creating a Form on a Web Page 5

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

Chapter 7: Creating a Form on a Web Page 7

Table 7-1 Form Input Control

Chapter 7: Creating a Form on a Web Page 8

Table 7-2 HTML Tags Used to Create Forms

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 Chapter07\ChapterFiles

folder on the USB drive• If necessary, click the Files of type box arrow and then

click All Files in the g:\Chapter07\ChapterFiles folder• Click orderform.html in the list of files• Click the Open button to open the orderform.html file in

Notepad

Chapter 7: Creating a Form on a Web Page 10

Starting Notepad and Opening an HTML File

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

Chapter 7: Creating a Form on a Web Page 12

Creating a Form and Identifying the Form Process

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

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

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

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

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

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

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

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

Chapter 7: Creating a Form on a Web Page 21

Adding Submit and Reset Buttons

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

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

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

Chapter 7: Creating a Form on a Web Page 25

Adding Fieldset Controls to Create Form Groupings

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

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:\Chapter07\ChapterFiles\ 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.

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

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

Chapter 7: Creating a Form on a Web Page 30

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

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

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

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

HTMLConcepts and Techniques

Fifth Edition

Chapter 7 Complete

Creating a Formon a Web Page