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.

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, pull-down 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 [email protected]):

<FORM method="POST" action=“mailto:[email protected]”>

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

Button:

<INPUT TYPE=“BUTTON” VALUE=“CLICK ME” ONCLICK=“begin_game()”>

CLICK ME

Form Tags - Samples

Text field/box: <INPUT TYPE=“TEXT”

NAME=“FIRSTNAME”> Text area:

<TEXTAREA NAME=“MSG”

ROWS=5>Enter</TEXTAREA>

Enter

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.

Sample tag:<INPUT TYPE=”SUBMIT" VALUE="Submit"

NAME="Submit Button"> When clicked, the action described in

the FORM tag will be initiated.

Submit

Form Tags - Samples

You may also want to have a RESET button

Sample tag:<INPUT TYPE=”RESET" VALUE=”Reset"

NAME=”Reset Button"> When clicked, all the fields are cleared.

Reset

Form Tags

See http://www.csudh.edu/fisher/tbe540/HHO6.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