Chapter 7
Creating a Form on a Web Page
Chapter 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
Chapter 7: Creating a Form on a Web Page
Chapter Objectives
Create check boxes Create a selection menu with multiple
options Use the <select> tag Use the <option> tag Create radio buttons
Chapter 7: Creating a Form on a Web Page
Chapter Objectives
Create a textarea box Create a Submit button Create a Reset button Use the <fieldset> tag to group form
information
Chapter 7: Creating a Form on a Web Page
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
Chapter 7: Creating a Form on a Web Page
Input Controls
Chapter 7: Creating a Form on a Web Page
HTML Tags Used to Create Forms
Chapter 7: Creating a Form on a Web Page
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, navigate to the Chapter07\ChapterFiles folder on the USB drive If necessary, click the Files of type box arrow and then click All Files in the g:\Chapter07\ChapterFiles folder Click [Link] in the list of files Chapter 7: Creating a Form on abutton Web Page Click the Open to open the d f ht l fil i N t d
Starting Notepad and Opening an HTML File
Chapter 7: Creating a Form on a Web Page
Creating a Form and Identifying the Form Process
Highlight the words <!--Put form method
statement here --> on line 13 Type <form method=post action=[Link] .com> to replace the highlighted words with the new tag Click on the blank line 36 and press the ENTER key Type </form> but do not press the ENTER Key
Chapter 7: Creating a Form on a Web Page 10
Creating a Form and Identifying the Form Process
Chapter 7: Creating a Form on a Web Page
11
Changing the Text Message
Highlight lines 18 through 32 (starting with the word below and ending above <p>Thank you for your order) and then press the DELETE key With the insertion point on line 18, enter the HTML code shown in Table 74 and then press the ENTER key twice
Chapter 7: Creating a Form on a Web Page
12
Adding Text Boxes
If necessary, click line 19 Enter the HTML code shown in Table 7
5 and then press the ENTER key twice
Chapter 7: Creating a Form on a Web Page
13
Adding Check Boxes
If necessary, click line 27 Enter the HTML code shown in Table 7
6 and then press the ENTER key twice
Chapter 7: Creating a Form on a Web Page
14
Adding a Selection Menu
If necessary, click line 32 Enter the HTML code shown in Table 7
7 and then press the ENTER key twice
Chapter 7: Creating a Form on a Web Page
15
Adding Additional Text Boxes
If necessary, click line 39 Enter the HTML code shown in Table 7
8 and then press the ENTER key twice
Chapter 7: Creating a Form on a Web Page
16
Adding Radio Buttons
If necessary, click line 45 Enter the HTML code shown in Table 7
9 and then press the ENTER key twice
Chapter 7: Creating a Form on a Web Page
17
Adding a Textarea
If necessary, click line 49 Enter the HTML code shown in Table 7
10 and then press the ENTER key twice
Chapter 7: Creating a Form on a Web Page
18
Adding Submit and Reset Buttons
If necessary, click line 53 Type <p><input type=submit
value=Submit /> to create the Submit button and then press the ENTER key Type <input type=reset value=Reset /></p> to create the Reset button. Do not press the ENTER key
Chapter 7: Creating a Form on a Web Page 19
Adding Submit and Reset Buttons
Chapter 7: Creating a Form on a Web Page
20
Adding Fieldset Controls to Create Form Groupings
Click just before the words Last Name at
the beginning of line 19 and then press the ENTER key Move the insertion point back up to line 19, and type <fieldset><legend align=right> Personal Information</legend> as the tag to begin the first fieldset. Click just before the words E-mail Address on line 26, press the END key to move to the end of the line, and then press the Chapter 7: Creating a Form on a Web Page ENTER key
21
Adding Fieldset Controls to Create Form Groupings
With the insertion point on line 29, type
<fieldset><legend align=right>About Your Order</legend> to start the second fieldset Click to the right of the </p> on line 46 (at the end of the <input name=cardexp line) and then press the ENTER key Type </fieldset> and press the ENTER key twice
Chapter 7: Creating a Form on a Web Page 22
Adding Fieldset Controls to Create Form Groupings
Type <br /><fieldset><legend
align=right>Additional Comments</legend> on line 49 to start the third fieldset Click to the right of the </p> on line 56 (at the end of the line with textarea tags) and then press the ENTER key Type </fieldset> to end the third fieldset
Chapter 7: Creating a Form on a Web Page 23
Adding Fieldset Controls to Create Form Groupings
Chapter 7: Creating a Form on a Web Page
24
Saving the HTML File
With a USB drive plugged into your
computer, click File on the menu bar and then click Save to save the [Link] file
Chapter 7: Creating a Form on a Web Page
25
Viewing, Testing, and Printing the Web Page Using a Browser
Validate the [Link] file by file upload at [Link] In Internet Explorer, click the Address bar to select the URL on the Address bar Type g:\Chapter07\ChapterFiles\ [Link] and then press the ENTER key to display the completed Order Form for Janas Jewels Review the form to make sure all spelling is correct and the controls are positioned appropriately Test all of the boxes Chapter 7: Creating a Form ontext a Web Page on the form. Try to type more than the maximum number of
26
Viewing, Testing, and Printing the Web Page Using a Browser
Click the check boxes to test them. You should be
able to choose one, two, or three of the boxes at the same time because check boxes are designed to select more than one option Test the selection control by clicking the list arrow and selecting one of the three options Click the radio buttons to test them. You should be able to choose only one choice (Yes or No) Test the textarea by entering a paragraph of text. Verify that it allows more characters to be entered than are shown in the textarea Click the Reset button. It should clear and reset all controls to their original (default) state Chapter 7: Creating a Form on a Web Page 27
Viewing, Testing, and Printing the Web Page Using a Browser
Click the Print icon on the Command bar
to print the Web page Click the [Link] Notepad button on the taskbar Click File on the menu bar and then click Print. Click the Print button in the Print dialog box to print the HTML file
Chapter 7: Creating a Form on a Web Page 28
Viewing, Testing, and Printing the Web Page Using a Browser
Chapter 7: Creating a Form on a Web Page
29
Quitting Notepad and a Browser
Click the Close button on the browser
title bar Click the Close button on the Notepad window title bar
Chapter 7: Creating a Form on a Web Page
30
Chapter 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
Chapter 7: Creating a Form on a Web Page
31
Chapter Summary
Create check boxes Create a selection menu with multiple
options Use the <select> tag Use the <option> tag Create radio buttons
Chapter 7: Creating a Form on a Web Page
32
Chapter Summary
Create a textarea box Create a Submit button Create a Reset button Use the <fieldset> tag to group form
information
Chapter 7: Creating a Form on a Web Page
33
CHAPTER 7 QUIZ NOTES
The text form input control creates a single-line text field. The radio form input control indicates that only one item in a list can be chosen. A checkbox control allows a Web page to select more than one choice from a list of choices using a checkmark. A select control creates a selection menu from which the visitor can choose one or more choices. The fieldset control helps to group related form elements together. A textarea control creates a field that allows for multiple lines of input. The value attribute is the type of data that is contained in the named input control The form tag creates a form that allows user input. The maxlength attribute of the <input /> tag indicates the maximum number of characters that can be entered. The checked attribute of the <input /> tag sets a radio button to a checked state.
CHAPTER 7 QUIZ NOTES
A input control is any type of input mechanism on a form. A radio button is an example of a data input control. The reset button clears any input that was entered in the form. A password control creates a text box used for a single line of input. The fieldset control helps to group related form elements together. All controls except text area have a value attribute. The alt attribute of the <input /> tag indicates alternative text to use for an image control. One way to process a form is to use a CGI script. The action attribute of the <form> tag specifies the action that is taken when the form is submitted. The method attribute of the <form> tag specifies the manner in which the data entered in the form is sent to the server to be processed.
CHAPTER 7 QUIZ NOTES
A post method sends a separate data file with the name-value pairs to the URL (or email address) indicated in the action attribute. The size attribute indicates the size of the text box that appears on the form. If the type attribute is used in the <input /> tag, it creates a checkbox. A select control is used to create a selection menu from which the visitor selects one or more choices. If a visitor does not have the font used on a Web page, the text is displayed in the default font. A good use of forms is to get feedback from your Web site visitors. You can group required versus optional information on a form by using the <fieldset> tag. A <fieldset> control is used to group similar information on a form. The default value for the <legend> alignment is left. To validate your html file you can upload it to [Link].
Chapter 7 Complete
Creating a Form on a Web Page