1. 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 <form> tag
Use the <input> tag
Create a text box

3. Project Objectives Create check boxes
Create a selection menu with multiple options
Use the <select> tag
Use the <option> tag
Create radio buttons

4. Project Objectives Create a textarea box Create a Submit button
Create a Reset button
Use the <fieldset> tag to group form information

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. Input Controls

7. HTML Tags Used to Create Forms

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. Starting Notepad and Opening an HTML File

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" as the new tag
Click just before the </body> tag on line 35
Type </form> and then press the ENTER key

11. Creating a Form and Identifying the Form Process

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. Adding Text Boxes
Enter the following HTML beginning on line 19

14. Adding Check Boxes
Enter the following HTML beginning on line 24

15. Adding a Selection Menu
Enter the following HTML beginning on line 31

16. Adding Additional Text Boxes
Enter the following HTML beginning on line 38

17. Adding Radio Buttons
Enter the following HTML beginning on line 43

18. Adding a Textarea
Enter the following HTML beginning on line 47

19. Adding Submit and Reset Buttons
If necessary, click line 51
Type <p><input type=“submit” value=“Submit”> and then press the ENTER key
Type <input type=“reset” value=“Reset”></p>

20. Adding Submit and Reset Buttons

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

22. Adding Fieldset Controls to Create Form Groupings
With the insertion point on line 45, type <br /><fieldset><legend align="right">Additional Comments</legend> as the tag
Click to the right of the </p> on line 53 and then press the ENTER key
Type </fieldset> as the tag

23. Adding Fieldset Controls to Create Form Groupings

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. 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 address as the action attribute value, click the Submit button
Click the Reset button

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

27. Viewing, Testing, and Printing the Web Page Using a Browser
Click the Print button on the Standard Buttons toolbar

28. Printing the HTML File Click the Notepad button on the taskbar
Click File on the menu bar and then click Print

29. Printing the HTML File

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

32. Project Summary Create check boxes
Create a selection menu with multiple options
Use the <select> tag
Use the <option> tag
Create radio buttons

33. Project Summary Create a textarea box Create a Submit button
Create a Reset button
Use the <fieldset> tag to group form information

34. Project 7 Complete