1. Creating Forms on a Web Page
Project 6
Creating Forms on a Web Page

2. Objectives Define terms related to forms
Describe the different form controls and their uses
Use the <FORM> tag
Use the <INPUT> tag
Create radio buttons
Create a text field
Create a textarea field

3. Objectives Use the <SELECT> tag Use the <OPTION> tag
Create a selection menu
Insert options into a selection menu
Create a Submit button
Create a Reset button

4. Introduction Forms allow Web developers to collect visitor feedback
Forms create an environment that invites people to return to the site
This project will teach you how to convert two HTML documents into forms

5. Introduction
Web page without a form
Web page with a form

6. Creating Web Page Forms
Forms interact with Web page visitors in a variety of ways:
Get feedback about the Web page
Find out who is visiting the Web page
Sell products or services
Act as a guestbook

7. Creating Web Page Forms
A Web page form has three components
Input controls
FORM tag, which contains the information necessary to process the form
Submit button, which sends the data to be processed

8. Input Controls An input control is a type of input mechanism on a form
A data input control allows a user to simply make a selection
A text input control allows the user to enter text into the control

9. Input Controls

10. Text Control Allows for a single line of input Two attributes
SIZE: determines the number of characters that display on the form
MAXLENGTH: specifies the maximum length of the input field

11. Password Control
Same as a regular text field, but characters display as asterisks or bullets
Holds the password entered by a visitor
Protects a visitor’s password from being observed by others

12. Textarea Control Allows multiple lines of input Two primary attributes
ROWS: specifies the number of rows in the textarea field
COLS: specifies the number of columns in the textarea field

13. Select Control
Creates a selection menu from which visitors can select one or more choices
Visitors don’t have to type in any information

14. Checkbox Control
Allows users to select more than once choice from a list of choices
Each choice in a checkbox list can be either on or off
Checkboxes are deselected by default

15. Radio Control
Limits the Web page visitor to only one choice from a list of choices
Each choice is preceded by a radio button, typically an open circle
Radio buttons are deselected by default

16. Reset and Submit Controls
The Reset button clears any input that was entered in the form
The Submit button sends the information to the appropriate location for processing
Web page forms must include a Submit button

17. Input Controls
Each input control has the following one or two attributes
NAME: Identifies the specific information that is being sent
All controls have a NAME
VALUE: The data that is contained in the named input control
All controls except TEXTAREA have a VALUE attribute

18. Form Tags
Input controls are tags or attributes of tags:

20. Starting Notepad and Opening the HTML File
Start Notepad
Insert the HTML Data Disk in drive A
Select Open from the File Menu
Type survey1.htm in the File name text box and then click the open button

21. text-based questionnaire
survey1.htm
text-based questionnaire

22. Identifying the Form Process
<FORM> attributes
METHOD: Specifies the manner in which the form is sent to the server
The GET method sends the name-value pairs to the end of the URL indicated in the ACTION attribute
The POST method sends a separate data file to the URL
This project will utilize the POST method

23. Identifying the Form Process
<FORM> attributes
ACTION: specifies the action that will be taken when the form is submitted
Information can be sent by to a central address
Information can be sent to the Web server for processing
Web sites can process information from forms using Common Gateway Interface (CGI) scripting

24. Identifying the Form Process
<FORM METHOD=POST
action to be taken when submitted
determines how data is sent

25. Identifying the Form Process
Click line 9 and press the ENTER key
Type <FORM METHOD=POST and press the ENTER key
Click the blank line just above the </BODY> tag (line 26) and press the ENTER key
Type </FORM> as the end tag

26. Identifying the Form Process

27. Changing the Text Message
Select lines 14 and 15 and then press the DELETE key
With the insertion point on line 14, type and send your responses to the Reunion committee by using the Submit button below as the new text
Highlight lines 17 through 21 and then press the DELETE key

28. Changing the Text Message
unnecessary text deleted

29. Adding Radio Buttons
Add two sets of radio buttons to allow the visitor to select only one option from a list of options
Visitors can select only one item per group
Radio buttons that have the same name belong to the same group

30. Adding Radio Buttons value of field if “Yes” is selected field name
control type
Field name – must be the same for radio buttons
value of field if “No” is selected

31. Adding Radio Buttons
Add the following HTML, starting on line 17

32. Adding Radio Buttons
inserted code

33. Adding a Text Field Number of characters that display on Web page
maximum number of characters that can be input
field name
control type

34. Adding a Text Field
Add the outlined HTML starting on line 24. Press the ENTER
key twice after the </P> tag

35. Adding Textareas number of columns end textarea number of rows
start textarea
field name

36. Adding Textareas
Add the following HTML, starting on line 27

37. Adding Textareas
inserted code

38. Submit and Reset Buttons
text to display on Submit button
control type
control type
text to display on Reset button

39. Submit and Reset Button
If you specify an address in the ACTION attribute of the FORM tag, a file like this will be sent to the specified address

40. Creating Submit and Reset Buttons
Add the outlined HTML starting on line 36. Press the ENTER
key once after the </P> tag

41. Saving the HTML File
Save the file on the HTML Data Disk with survey1.htm as the file name

42. Viewing the HTML File in the Browser
Start your browser
Type a:\survey1.htm in the Address text box and then press the ENTER key

43. Printing the Web Page
Click the Print button on the Standard Buttons toolbar

44. Testing the Web Page
Click the radio buttons to make sure you can only select one choice
Make sure you can see only 2 characters in the field that asks how many children the visitor has
The text field under the question about hobbies and special interests should allow more characters to be entered than can display on the screen
Make sure the Reset button clears all fields

45. Printing the HTML File Click the Notepad button on the taskbar
Select Print from the File menu

46. Creating a Form with Selection Menus
The SELECT control creates a selection menu
This control only allows the visitor to choose pre-defined choices
There are four types of selection menus

47. Creating a Form with Selection Menus
simple selection menu
SIZE
set to 3
multiple choice – two choices selected
one choice selected as default

48. Opening the HTML File
With the HTML Data Disk in drive A, select Open from the File Menu
Type survey2.htm in the File name text box and then click the open button

49. Current survey2.htm File

50. Future survey2.htm File

51. Identifying the Form Process
Click line 9 and press the ENTER key
Type <FORM METHOD=POST and then press the ENTER key
Click the blank line just above the </BODY> tag (line 28) and press the ENTER key
Type </FORM> as the tag

52. Changing the Initial Text
Highlight lines 14 and 15 and then press the DELETE key
With the insertion point on line 14, type and send your responses to the Reunion Committee by using the Submit button below. as the text.
Highlight lines 17 through 23 and then press the DELETE key

53. Changing the Initial Text
unnecessary text deleted

54. Adding Radio Buttons to the Second Form
Add the following HTML, starting on line 17

55. Adding Radio Buttons to the Second Form
radio buttons specified

56. Creating Selection Controls
start select menu
field name
start option
end option

57. Creating Selection Controls
Add the following HTML, starting on line 21

58. Adding a Selection Menu
three options

59. Adding More Radio Buttons and a Selection Menu
Add the following HTML, starting on line 28

60. Adding More Radio Buttons and a Selection Menu

61. Inserting a Text Field Click line 38 and press the ENTER key
Type <P>What will you be willing to pay per person (cash bar not included)? $ and then press the ENTER key
Type <INPUT NAME=“amount” TYPE=“text” SIZE=“3” MAXLENGTH=“3”></P> and then press the ENTER key twice

62. Inserting a Text Field

63. Adding the Submit and Reset Buttons
If necessary, click line 42
Type <P><INPUT TYPE=“submit” VALUE=“Submit the Form”> and press the ENTER key
Type <INPUT TYPE=“reset” VALUE=“Reset the Form”></P> and press the ENTER key

64. Adding the Submit and Reset Buttons

65. Saving the HTML File
Save the file on the HTML Data Disk with survey2.htm as the file name

66. Viewing the HTML File In the Browser
Start your browser
Type a:\survey2.htm in the Address text box and then press the ENTER key

67. Printing the Web Page
Click the Print button on the Standard Buttons toolbar

68. Printing the HTML File Click the Notepad button on the Taskbar
Click File on the menu bar and then click Print

69. Testing the Submit Buttons
In survey1.htm and survey2.htm:
Enter your address (instead of as the form’s ACTION
Enter values in all controls
Test the Submit button to make sure you receive an with the name-value pairs attached

70. Advanced Selection Menus
simple selection menu
SIZE
set to 3
multiple choice – two choices selected
one choice selected as default

71. Advanced Selection Menus

72. Summary Define terms related to forms
Describe the different form controls and their uses
Use the <FORM> tag
Use the <INPUT> tag
Create radio buttons
Create a text field
Create a textarea field

73. Summary Use the <SELECT> tag Use the <OPTION> tag
Create a selection menu
Insert options into a selection menu
Create a Submit button
Create a Reset button

74. What You Should Know

75. Project 6 Complete