Project 7

1
Project 7

• Creating a Formon a Web Page

2
Project Objectives

• Define terms related to forms
• Describe the different form controls and their
  uses
• Use the ltformgt tag
• Use the ltinputgt tag
• Create a text box

3
Project Objectives

• Create check boxes
• Create a selection menu with multiple options
• Use the ltselectgt tag
• Use the ltoptiongt tag
• Create radio buttons

4
Project Objectives

• Create a textarea box
• Create a Submit button
• Create a Reset button
• Use the ltfieldsetgt 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 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

9
Starting Notepad and Opening an HTML File
10
Creating a Form and Identifying the Form Process

• Highlight the words lt!--Put form method statement
  here --gt on line 12 and then press the DELETE key
• Type ltform method"post" action"mailtobillthomas
  _at_isp.com"gt as the new tag
• Click just before the lt/bodygt tag on line 35
• Type lt/formgt 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 27

15
Adding a Selection Menu

• Enter the following HTML beginning on line 32

16
Adding Additional Text Boxes

• Enter the following HTML beginning on line 39

17
Adding Radio Buttons

• Enter the following HTML beginning on line 45

18
Adding a Textarea

• Enter the following HTML beginning on line 49

19
Adding Submit and Reset Buttons

• If necessary, click line 53
• Type ltpgtltinput typesubmit valueSubmitgt and
  then press the ENTER key
• Type ltinput typereset valueResetgtlt/pgt as
  the tag

20
Adding Submit and Reset Buttons
21
Adding Fieldset Controls to Create Form Groupings

• Click just after the lt/pgt on line 17 and then
  press the ENTER key
• Type ltfieldsetgtltlegend alignright"gtPersonal
  Informationlt/legendgt as the tag
• Click to the right of size25"gt on line 25 and
  then press the ENTER key
• Type lt/fieldsetgt and then press the ENTER key
  twice

22
Adding Fieldset Controls to Create Form Groupings

• With the insertion point on line 28, type
  ltpgtltfieldsetgtltlegend align"right"gtAbout Your
  Orderlt/legendgt as the tag
• Click to the right of the lt/pgt on line 45 and
  then press the ENTER key
• Type lt/fieldsetgt and press the ENTER key twice

23
Adding Fieldset Controls to Create Form Groupings

• Type ltbr /gtltfieldsetgtltlegend align"right"gtAdditio
  nal Commentslt/legendgt on line 48
• Click to the right of the lt/pgt on line 55 and
  press the ENTER key
• Type lt/fieldsetgt as the end tag

24
Adding Fieldset Controls to Create Form Groupings
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

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

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

• Click the Print button on the Standard Buttons
  toolbar

29
Printing the HTML File

• Click the Notepad button on the taskbar
• Click File on the menu bar and then click Print

30
Printing the HTML File
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

32
Project Summary

• Define terms related to forms
• Describe the different form controls and their
  uses
• Use the ltformgt tag
• Use the ltinputgt tag
• Create a text box

33
Project Summary

• Create check boxes
• Create a selection menu with multiple options
• Use the ltselectgt tag
• Use the ltoptiongt tag
• Create radio buttons

34
Project Summary

• Create a textarea box
• Create a Submit button
• Create a Reset button
• Use the ltfieldsetgt tag to group form information

35
Project 7 Complete

• Creating a Formon a Web Page