HTML Concepts and Techniques Fourth Edition Project 7 Creating a Form on 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 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 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 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 on line 12 and then press the DELETE key Type as the new tag Click just before the tag on line 35 Type 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 and then press the ENTER key Type 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 on line 17 and then press the ENTER key Type Personal Information as the tag Click to the right of size=“25"> on line 25 and then press the ENTER key Type 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 About Your Order as the tag Click to the right of the on line 45 and then press the ENTER key Type and press the ENTER key twice

Project 7: Creating a Form on a Web Page 23 Adding Fieldset Controls to Create Form Groupings Type Additional Comments on line 48 Click to the right of the on line 55 and press the ENTER key Type 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 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 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 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 tag to group form information

HTML Concepts and Techniques Fourth Edition Project 7 Complete Creating a Form on a Web Page