1
JavaScript
HTML Forms
CS 4390 Web Programming JavaScript 2
Form Elements
• An HTML form begins with the <FORM> tag.
• This tag indicates that a form is beginning, and it
enables form elements to be used.
• The <FORM> tag includes three parameters:
– NAME is simply a name for the form. The NAME of the
form is to be used with JavaScript.
– METHOD is either GET or POST; these are the two ways
the data can be sent to the server.
– ACTION is a script or program that the form data will
be sent to when submitted.
CS 4390 Web Programming JavaScript 3
Form Elements
<FORM NAME="Order" METHOD="GET" ACTION="order.cgi">
For a form that will be processed entirely by
JavaScript (such as a calculator or interactive
game), the METHOD and ACTION
attributes are not needed. You can use a
simple <FORM> tag that names the form:
<FORM NAME="calculator">
CS 4390 Web Programming JavaScript 4
Text Field
• Many of the form elements use the <INPUT> tag.
• This tag is followed by a TYPE parameter to
determine which type of input is expected.
Text Fields and Text Areas
– The first such field is the TEXT field.
– This enables the user to enter text in a one-line area.
– Example:
<INPUT TYPE="TEXT" NAME="text1" VALUE="textField" SIZE="30">
– This defines a text field called text1. The field is given a
default value of "hello" and allows up to 30 characters to
be entered.
CS 4390 Web Programming JavaScript 5
Password Field
• An alternate form of text field is the PASSWORD
field.
• This is a specialized text field that displays the text
as asterisks on the screen.
• This type of input is often used for passwords so
that observers don't see which password is being
entered.
• The password field is defined like TEXT:
<INPUT TYPE="PASSWORD" NAME="textPassword" SIZE=30>
CS 4390 Web Programming JavaScript 6
Text Area
• A third option is the text area, which allows
multiple lines of text to be entered. Rather than
using the <INPUT> tag, text areas are defined with
a special tag, <TEXTAREA>.
• A typical <TEXTAREA> definition:
<TEXTAREA NAME="text1" ROWS="2" COLS="70"> ... </TEXTAREA>
• This is the content of the TEXTAREA tag.
</TEXTAREA> The text between the opening and
closing <TEXTAREA> tags is used as the initial
value for the text area.
2
CS 4390 Web Programming JavaScript 7
Checkboxes
• A checkbox displays a box that can be checked or
unchecked.
• The CHECKBOX type to the INPUT tag is used to
create a checkbox, as follows:
<INPUT TYPE="CHECKBOX" NAME="choice1" VALUE="Yes" CHECKED>
– VALUE attribute assigns a meaning to the checkbox;
this is a value that is returned if the box is checked. The
default value is "on."
– CHECKED attribute can be included to make the box
checked by default.
CS 4390 Web Programming JavaScript 8
Radio Buttons
• A radio button, using the <INPUT> tag's RADIO
type.
• These buttons are similar to checkboxes, but they
exist in groups, and only one button can be
checked in each group.
• These are used for a multiple-choice or "one of
many" input.
<INPUT TYPE="RADIO" NAME="radio1" VALUE="Option1" CHECKED> Option 1
<INPUT TYPE="RADIO" NAME="radio1" VALUE="Option2"> Option 2
<INPUT TYPE="RADIO" NAME="radio1" VALUE="Option3"> Option 3
CS 4390 Web Programming JavaScript 9
Radio Buttons
• NAME attribute is used to name the entire
group of radio buttons.
• All the buttons with the same name are
considered to be in a group.
• VALUE attribute gives each button a name;
this is essential so that you can tell which
one is pressed.
CS 4390 Web Programming JavaScript 10
Selection Lists
• A selection list <SELECT> is HTML tag is used
to define a selection list, or a multiple-choice list
of text items.
<SELECT NAME="selectionList" SIZE=40>
<OPTION VALUE="choice1" SELECTED>This is the first choice.
<OPTION VALUE="choice2">This is the second choice.
<OPTION VALUE="choice3">This is the third choice.
</SELECT>
• Each of the OPTION tags defines one of the
possible choices.
CS 4390 Web Programming JavaScript 11
Selection Lists
• The VALUE attribute is the name that is returned
to the program, and the text outside the OPTION
tag is displayed as the text of the option.
• An optional attribute to the SELECT tag,
MULTIPLE, can be specified to allow multiple
items to be selected. Browsers usually display a
single-selection SELECT as a drop-down list and a
multiple-selection list as a scrollable list.
CS 4390 Web Programming JavaScript 12
Submit and Reset Buttons
• TYPE=submit is a submit button. This button
causes the data in the form fields to be sent to the
script or program.
• TYPE=reset is a reset button. This button sets
all the form fields back to their default value, or
blank.
• TYPE=button is a generic button. This button
performs no action on its own, but you can assign
it one using JavaScript.
3
CS 4390 Web Programming JavaScript 13
Submit and Reset Buttons
• All three types of buttons include a
– NAME to identify the button
– VALUE that indicates the text to display on the
button's face.
<INPUT TYPE="SUBMIT" NAME="sub1" VALUE="Click Here">
CS 4390 Web Programming JavaScript 14
CS 4390 Web Programming JavaScript 15
Examples
• Calculator
• Clock
• Form validation
• Popup window and random generator
• Scrolling text, status bar and drop-down menu
• Changing images
• Image map
• Frame with JavaScript
