Tutorial 6

Forms

Section A - Working with Forms in JavaScript

Tutorial 6A Topics

• Section A - Working with Forms in JavaScript– How to use HTML forms– About the Common Gateway Interface– How to use the <FORM> tag– About form elements– How to create and use input fields– How to create selection lists– How to create multiline text fields

Working with Forms in JavaScript

• Overview of Forms– Form

• Used to collect information for some subsequent processing

– Information may be used for some further interaction with the Web page or be sent to a server for processing

» Server processing may include CGI, ASP, ISPI, etc.

» Server processing may also include interaction with a DB

Working with Forms in JavaScript

• The Common Gateway Interface– Simple protocol that allows Web pages

to communicate with Web-server-based programs

– Function:• Start a Web-server-based program • Pass environment variables to it• Receive environment variables from it

Working with Forms in JavaScript

• The Common Gateway Interface– Environment variables

• Part of an operating system, not just part of a function or program, as are JavaScript variables

• Example:– server_name

» Contains the domain name or IP address of a Web server

Working with Forms in JavaScript

• The Common Gateway Interface– CGI Script or Program

• Web-server-based application that processes CGI environment variables

• Separate from the CGI protocol• Can be written in:

– AppleScript, Perl, TCL, C++, VB, Java, etc.

Working with Forms in JavaScript

• The Common Gateway Interface– Process:

• HTML form elements passes information entered in the form into CGI environment variables

• Then CGI environment variables are then sent to a CGI script running on a server

• The CGI script performs some action (e.g., database access) and either:

– Sends response back to the Web page– Generates a new HTML document

Working with Forms in JavaScript

• The <form> Tag– Designates a form within an HTML

document and contains all text and tags that make up the form

– Multiple forms can be included in a document• Forms cannot be nested

Working with Forms in JavaScript

• Form Elements: An Overview– There are three tags used within <form> tag

pair to create form elements:• <input>

– Used to create input fields that users interact with

• <select>– Displays choices in a drop-down menu or scrolling list

known as a selection list

• <textarea>– Used to create a text field in which users can enter

multiple lines of information

Working with Forms in JavaScript

• Input Fields– <input> tag is used to create input

fields that use different types of interface elements to gather information

– Attributes are available to characterize the input field

Working with Forms in JavaScript

• Input Fields– Example:<form action=http://example_url/cgi-bin/cgi_program method=“post”

name=“exampleForm”>Name<br><input type=“text” name=“name” value=“The White House”

size=50><br>Address<br><input type=“text” name=“address” value=“1600 Pennsylvania Ave.”

size=50><br>City, State, Zip<br><input type=“text” name=“city” value=“Washington” size=38><input type=“text” name=“state” value=“DC” size=2 maxlength=2><input type=“text” name=“zip” value=“20500” size=5 maxlength=5></form>

Working with Forms in JavaScript

• Input Fields– Password Boxes

• An <input> tag with type = password– Each character the user types in the text field

shows up as an asterisk (*) to hide it from onlookers

• Can include other attributes– NAME, VALUE, MAXLENGTH and SIZE

Working with Forms in JavaScript

• Input Fields– Radio Buttons

• An <input> tag with type = radio• Used to create a group of buttons from

which only one button can be selected– Mutually exclusive

• Can specify a default value using the CHECKED attribute

• Only one name=value pair is submitted with form data

Working with Forms in JavaScript

• Input Fields– Check Boxes

• An <input> tag with type = checkbox• Used to create a box that can be set to yes

(checked) or no (unchecked)• Can specify default state using CHECKED attribute• Only name=value pair from checked boxes is

submitted with form data• Can be grouped (although not mutually

exclusively)

Working with Forms in JavaScript

• Input Fields– Reset Buttons

• An <input> tag with type = reset• Clears all form entries and resets each form

element to its initial value specified by the VALUE attribute

• Default label (Reset) appears if the VALUE attribute is not included

Working with Forms in JavaScript

• Input Fields– Command Buttons

• An <input> tag with type = button• Use an onClick event handler to execute

JavaScript code that performs some type of function (e.g., a calculation)

• Default value set with the VALUE attribute is transmitted along with the form data when submitted

Working with Forms in JavaScript

• Input Fields– Submit Buttons

• An <input> tag with type = submit• Submits the form to a CGI script on a server• Default label (Submit Query) appears if the

VALUE attribute is not included

Working with Forms in JavaScript

• Input Fields– Image Submit Buttons

• An <input> tag with type = image• Displays a graphical image and submits the

form to a CGI script on a server• Use SRC attribute to specify image to be

displayed on the button

Working with Forms in JavaScript

• Selection Lists– Creates a selection list that presents

users with fixed lists of values from which to choose

– Can appear as:• List of choices• Drop-down menu

– Can also have a scroll bar

Working with Forms in JavaScript

• Multiline Text Fields– <textarea> tag is used to create a field

in which users can enter multiple lines of information

– Known as:• Multiline text fields • Text areas