FORMs Lesson
TBE 540
Prerequisites

Before beginning this lesson, the
learner must be able to…
– Create basic web pages using a text editor
and/or a web page editor.
– If using a web page editor, edit the HTML
Source.
Objectives

After completing all lesson-related
activities, the learner will be able to…
– Create a form and include it in a web page.
Forms
Forms are used to add interactive
elements to a web page.
 Forms allow you to put in buttons, pulldown menus and input fields for the
user.
 Using JavaScript, you can customize
actions for buttons, menus and input
fields.

Form Tags

All forms begin with <FORM> and end with
</FORM>.
 The <FORM> tag may contain a method (POST or
GET) and an action.
 Here is a sample (information will be placed in a
message (POST) sent to ffisher@csudh.edu):
<FORM method="POST"
action=“mailto:ffisher@csudh.edu”>
Form Tags

How does the information get into the
message? Through buttons, menus and
fields.
 Each type of input has a special tag.
 These tags specify the type of input (text field,
button, text area, menu), the name of the
input that comes in (e.g., “Firstname”), and
sometimes the value (which button was
pressed?)
Form Tags - Samples



Radio button:
<INPUT TYPE=“RADIO” NAME=“GENDER”
VALUE=“FEMALE”>
Checkbox:
<INPUT TYPE=“CHECKBOX” NAME=“STUDENT”
VALUE=“YES”>
CLICK ME
Button:
<INPUT TYPE=“BUTTON” VALUE=“CLICK ME”
ONCLICK=“begin_game()”>
Form Tags - Samples

Text field/box:
<INPUT TYPE=“TEXT”
NAME=“FIRSTNAME”>

Enter
Text area:
<TEXTAREA NAME=“MSG”
ROWS=5>Enter</TEXTAREA>
Form Tags - Samples

Pull-down menu:
<SELECT NAME=“AGE”>
<OPTION SELECTED>Old
<OPTION>Young
<OPTION>Never mind!
</SELECT>
Old
Old
Young
Never mind!
Form Tags - Samples
If the information is to be sent (i.e., the
“action” will be taken), there will be a
SUBMIT button.
Submit
 Sample tag:

<INPUT TYPE=”SUBMIT" VALUE="Submit"
NAME="Submit Button">

When clicked, the action described in
the FORM tag will be initiated.
Form Tags - Samples
You may also want to have a RESET
button
Reset
 Sample tag:

<INPUT TYPE=”RESET" VALUE=”Reset"
NAME=”Reset Button">

When clicked, all the fields are cleared.
Form Tags
See
http://www.csudh.edu/fisher/tbe540/HH
O6.htm for specific examples.
 Try the hands-on exercise called
SAMPLEFORMS.HTM

Self Check

True or false: FORMs in web pages are
used only to fill out educational forms
online.
– True
– False
Self Check

True or false: FORMs in web pages are
used only to fill out educational forms
online.
– True
– False
That’s one use, but there are many others
Self Check

This type of form element is:
– Radio Button
– Checkbox
– Button
– Text box
– Text area
Self Check

This type of form element is:
– Radio Button
– Checkbox
– Button
– Text box
– Text area
Self Check

This type of form element is:
– Radio Button
– Checkbox
– Button
– Text box
– Text area
Self Check

This type of form element is:
– Radio Button
– Checkbox
– Button
– Text box
– Text area
Self Check

The FORM tags for a pull-down menu
are:
– MENU, OPTION
– SELECT, OPTION
– MENU, SELECT
– MENU, SUBMIT
Self Check

The FORM tags for a pull-down menu
are:
– MENU, OPTION
– SELECT, OPTION
– MENU, SELECT
– MENU, SUBMIT
Self Check

FORMs are usually placed in the ____
section.
– HEAD
– BODY
Self Check

FORMs are usually placed in the ____
section.
– HEAD
– BODY
Self Check

Which type of button clears all fields?
– SUBMIT
– RESET
Self Check

Which type of button clears all fields?
– SUBMIT
– RESET