Presentation is loading. Please wait.

Presentation is loading. Please wait.

HTML Comprehensive Concepts and Techniques Third Edition Project 7 Creating a Form on a Web Page.

Similar presentations


Presentation on theme: "HTML Comprehensive Concepts and Techniques Third Edition Project 7 Creating a Form on a Web Page."— Presentation transcript:

1 HTML Comprehensive Concepts and Techniques Third Edition Project 7 Creating a Form on a Web Page

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

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

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

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

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

7 HTML Project 7: Creating a Form on a Web Page 7 HTML Tags Used to Create Forms

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

9 HTML Project 7: Creating a Form on a Web Page 9 Starting Notepad and Opening an HTML File

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

11 HTML Project 7: Creating a Form on a Web Page 11 Creating a Form and Identifying the Form Process

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

13 HTML Project 7: Creating a Form on a Web Page 13 Adding Text Boxes Enter the following HTML beginning on line 19

14 HTML Project 7: Creating a Form on a Web Page 14 Adding Check Boxes Enter the following HTML beginning on line 24

15 HTML Project 7: Creating a Form on a Web Page 15 Adding a Selection Menu Enter the following HTML beginning on line 31

16 HTML Project 7: Creating a Form on a Web Page 16 Adding Additional Text Boxes Enter the following HTML beginning on line 38

17 HTML Project 7: Creating a Form on a Web Page 17 Adding Radio Buttons Enter the following HTML beginning on line 43

18 HTML Project 7: Creating a Form on a Web Page 18 Adding a Textarea Enter the following HTML beginning on line 47

19 HTML Project 7: Creating a Form on a Web Page 19 Adding Submit and Reset Buttons If necessary, click line 51 Type and then press the ENTER key Type

20 HTML Project 7: Creating a Form on a Web Page 20 Adding Submit and Reset Buttons

21 HTML 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 Required Information as the tag Click to the right of maxlength="4"> on line 42 and then press the ENTER key Type and then press the ENTER key twice

22 HTML Project 7: Creating a Form on a Web Page 22 Adding Fieldset Controls to Create Form Groupings With the insertion point on line 45, type Additional Comments as the tag Click to the right of the on line 53 and then press the ENTER key Type as the tag

23 HTML Project 7: Creating a Form on a Web Page 23 Adding Fieldset Controls to Create Form Groupings

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

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

26 HTML Project 7: Creating a Form on a Web Page 26 Viewing, Testing, and Printing the Web Page Using a Browser

27 HTML Project 7: Creating a Form on a Web Page 27 Viewing, Testing, and Printing the Web Page Using a Browser Click the Print button on the Standard Buttons toolbar

28 HTML Project 7: Creating a Form on a Web Page 28 Printing the HTML File Click the Notepad button on the taskbar Click File on the menu bar and then click Print

29 HTML Project 7: Creating a Form on a Web Page 29 Printing the HTML File

30 HTML Project 7: Creating a Form on a Web Page 30 Quitting Notepad and a Browser Click the Close button on the browser title bar Click the Close button on the Notepad window title bar

31 HTML Project 7: Creating a Form on a Web Page 31 Project Summary Define terms related to forms Describe the different form controls and their uses Use the tag Create a text box

32 HTML Project 7: Creating a Form on a Web Page 32 Project Summary Create check boxes Create a selection menu with multiple options Use the tag Create radio buttons

33 HTML Project 7: Creating a Form on a Web Page 33 Project Summary Create a textarea box Create a Submit button Create a Reset button Use the tag to group form information

34 HTML Comprehensive Concepts and Techniques Third Edition Project 7 Complete


Download ppt "HTML Comprehensive Concepts and Techniques Third Edition Project 7 Creating a Form on a Web Page."

Similar presentations


Ads by Google