HTMLConcepts and Techniques

Fourth Edition

Project 7

Creating a Formon a Web Page

Project 7: Creating a Form on a Web Page 2

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 3

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 4

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 5

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 6

Input Controls

Project 7: Creating a Form on a Web Page 7

HTML Tags Used to Create Forms

Project 7: Creating a Form on a Web Page 8

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 9

Starting Notepad and Opening an HTML File

Project 7: Creating a Form on a Web Page 10

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.com"> 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 11

Creating a Form and Identifying the Form Process

Project 7: Creating a Form on a Web Page 12

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 13

Adding Text Boxes

• Enter the following HTML beginning on line 19

Project 7: Creating a Form on a Web Page 14

Adding Check Boxes

• Enter the following HTML beginning on line 27

Project 7: Creating a Form on a Web Page 15

Adding a Selection Menu

• Enter the following HTML beginning on line 32

Project 7: Creating a Form on a Web Page 16

Adding Additional Text Boxes

• Enter the following HTML beginning on line 39

Project 7: Creating a Form on a Web Page 17

Adding Radio Buttons

• Enter the following HTML beginning on line 45

Project 7: Creating a Form on a Web Page 18

Adding a Textarea

• Enter the following HTML beginning on line 49

Project 7: Creating a Form on a Web Page 19

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 20

Adding Submit and Reset Buttons

Project 7: Creating a Form on a Web Page 21

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 22

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 23

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 24

Adding Fieldset Controls to Create Form Groupings

Project 7: Creating a Form on a Web Page 25

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 26

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 27

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

Project 7: Creating a Form on a Web Page 28

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 29

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 30

Printing the HTML File

Project 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

Project 7: Creating a Form on a Web Page 32

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 33

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 34

Project Summary

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

HTMLConcepts and Techniques

Fourth Edition

Project 7 Complete

Creating a Formon a Web Page