More JavaScript, HTML Forms,
CGI Scripts
Tom Horton
Alfred C. Weaver
CS453 Electronic Commerce
1
Overview


HTML Forms
JavaScript and Forms


Event model and events
CGI Programming for server-side scripts
2
HTML Forms

Provide GUI-like components in your page





Inputs: buttons, textboxes, radio buttons,
selections
Output fields: text boxes etc.
Can send information to the server
Can be accessed by JavaScript code on the
client-side
Tutorial with on-line fiddling:
http://www.w3schools.com/html/html_forms.asp
3
Basics of Forms


A form element: <FORM>
Inside:

<INPUT TYPE=“…”>




<TEXTAREA>


Used to define a large number of common inputs
Empty element (no end-tag </INPUT>
(Except the following…)
multiple lines of text
<SELECT>

List of choices in pop-up or scrollable list
4
Common Form Element
Attributes

On the <FORM> tag

NAME=“symbolic name”




Used in JavaScript to reference form and what’s inside it
METHOD=“…” and ACTION=“…”
More on these later
On other tags:

NAME=“symbolic-name”


Required for almost all input tags (not buttons)
Used by JavaScript and when sending info to server
5
<TEXTAREA>


Use begin and end tags
Attributes:



ROWS=“…” (four by default)
COLS=“…” (40 characters by default)
Default text

What’s between <TEXTAREA> and
</TEXTAREA>
6
<INPUT> types

Specify with <INPUT TYPE=“…”>







TEXT: line of text
PASSWORD: line of text that hides what’s typed
CHECKBOX: yes/no
RADIO: use >1 for mutually exclusive choice
SUBMIT: button that initiates processing
Other attributes needed for each of these
Don’t forget NAME=“…”
7
Single Line of Text

<INPUT TYPE=“TEXT” …>



Attributes: NAME, optionally SIZE,
MAXLENGTH, VALUE
Default text defined by VALUE
Example:
<INPUT TYPE=“TEXT” NAME=“tfield1”
VALUE=“your name here”
SIZE=“30”>
8
A Checkbox

<INPUT TYPE=“CHECKBOX” …>




Attributes: NAME, optionally CHECKED, VALUE
What’s is the value when it’s checked? VALUE
attribute specifies this
CHECKED: initially displays checked
Example:
<INPUT TYPE=“CHECKBOX” NAME=“cbox1”
VALUE=“cbox1on” CHECKED>
9
Radio buttons

<INPUT TYPE=“RADIO” …>


Attributes: NAME, optionally CHECKED, VALUE
Mutually exclusive checkboxes





None or one can be checked, not more than one
Use same NAME value to “group” a set of these!
Note: when retrieving these in JavaScript, you get back an
array of values
CHECKED if one checked by default
Example:
<INPUT TYPE=“RADIO” NAME=“rad1”
VALUE=“1st”> First choice
<INPUT TYPE=“RADIO” NAME=“rad1”
VALUE=“2nd”> Second choice
10
Submit and Reset Buttons

<INPUT TYPE=“SUBMIT” …>

One of two button types




TYPE=“RESET” clears all data in the form
Attributes: optionally VALUE, NAME
VALUE: name displayed, and what’s sent to the
server (more later). “Submit Query” is default
Example:
<INPUT TYPE=“RESET” VALUE=“Clear Form”>
<INPUT TYPE=“SUBMIT” VALUE=“Submit”>
11
Aside: More General Buttons

Also a <BUTTON> element that needs an
end-tag


Text (or images) goes inside the element
Attributes: NAME, DISABLED, TYPE (push, reset,
submit), VALUE

Submit buttton with image:

Example that links to a page:
<button type="submit">
<img src="/images/icons/tick.png">Save</button>
<button type=”push”><a href=”reset.html">
<img src=”passkey.png”> Change Password
</a></button>
12
Multiple Selections

<SELECT> element with </SELECT>



Need to organize this like a list,
so <INPUT> empty element not enough
Attributes: NAME, optionally SIZE,
MULTIPLE
Use <OPTION> for choices inside
<SELECT>

Attributes: VALUE, optionally SELECTED
(for default)
13
<SELECT> Examples
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</select>
<select name=”lunch” MULTIPLE>
<option value=”pizza">Pizza</option>
<option value=”pasta">Pasta</option>
</select>
14
Layout and Design Tips

In HTML you don’t have full control over
layout




Check for resizing, wrapping issues
Use line breaks <BR> and paragraphs <P>
Use lists <UL> or <DL> (descriptive lists)
Multiple forms in one page

Each with a SUBMIT button
15
And Then What Happens to that
Input?

Again, two ways forms often used


JavaScript functions process form data
Sent back to the server for processing


No JavaScript involved
Something waiting on the back-end though
16
JavaScript and Forms

We have an event model that lets us:





Associate an event-handler (JavaScript function)
with…
An event (e.g. value changed, got focus, hit
submit, etc.) that happens on…
A particular HTML element
E.g. <FORM … ONSUBMIT=“processForm()”>
See lists of events here:
http://www.w3schools.com/jsref/jsref_events.asp
17
Some Nice Events

ONCLICK




Attach to particular element, or
<SCRIPT LANGUAGE=“JavaScript” etc.
FOR=“para” EVENT=“onclick”>
Note: in HTML/JavaScript code, probably better to
put event names in lower-case
Others:



ONLOAD: when an element is loaded
Cursor tracking: ONMOUSEMOVE,
ONMOUSEOVER, ONMOUSEOUT
Input fields: ONFOCUS, ONBLUR (loses focus)
18
<FORM> and Events

Common to use ONSUBMIT to call function
when submit button sent



And before FORM takes its ACTION (more on
ACTION soon, I promise)
<FORM … ONSUBMIT=“validateForm()”>
Method may:



Validate fields by accessing form-input elements’
values
Use alert-boxes to confirm submission
Etc.
19
More on ONSUBMIT

If function specified with ONSUBMIT
returns true or false



If true, form ACTION taken
If false, form ACTION not taken
In general, JavaScript function can
window.event.returnValue = false;
 Which cancels the default action of an
event on an element
20
ACTIONs associated with
Forms

Finally! The FORM element typically has
these attributes:



ACTION points to a script (on the server) to
process form data values


ACTION=“…” that points to a URL
METHOD=“…” with value GET or POST
Some special uses here
METHOD: usually POST

More details later when we talk about CGI
21
mailto: and ACTION

mailto: -- special URL that pops up a
compose-email window in a browser



If supported by your browser
Nice for testing in any case
Example:
<FORM
action="mailto:horton@virginia.edu"
method="post">
22
Static Web Page Delivery
Web Server
1
3
Author writes
HTML
Web server locates .htm file
4
HTML stream returned to browser
5
2
Browser processes
page
Client requests page
Client
23
Client-side vs. Server-side
Processing

Computer processing can happen in two
locations

Server:


Client:


Accepts request, finds page, sends it
Gets HTML (or more?) from net, processes it,
displays it
Advanced things can happen on one or
both sides
24
Many Technology Choices

Client-Side Technologies:




Scripting languages: JavaScript, VBScript
Java applets
XML
Server-Side Alternatives:





CGI
Active Server Pages (ASP)
PHP
Java Server Pages (JSP)
ColdFusion
25
Client-side Scripting
Languages

What’s a Scripting Language?




Not a full-scale programming language
Usually for a special purpose
Usually interpreted “on the fly”
Client-side scripting languages




File contains script mixed in with HTML code
Sent from server to browser
Run “inside” the browser before HTML is displayed
Makes HTML pages dynamic, customized
26
Dynamic Web Page Delivery
Web Server
1
Author writes
instructions
3
4
Web server locates instructions file
HTML and script are returned to browser
5
Web browser processes script to
create HTML
2
Client requests page
6
Browser displays HTML
Client
27
Server-side processing:
Overview

Lots of processing can happen on the server before returning a
webpage to the client


Run programs in a scripting language (e.g. ASP)
Manage sessions




Cookies
Sessions, shopping baskets, log-ins, etc.
Database processing
But the following slide shows when this processing happens

At Step 4!
28
Server-side Dynamic Page
Delivery
Web Server
1
Author writes
instructions
3
4
Web server locates instructions file
Web server processes instructions to create HTML
5
HTML stream returned to browser
6
2
Browser processes
page
Client requests page
Client
29
CGI Scripts



When not using mailto:, what happens?
Simplest (oldest) approach:
CGI (Common Gateway Interface)
ACTION points to a script on the server



That script can process form input values
It generates HTML that it writes which is then
displayed back in the browser
On-line:
http://hoohoo.ncsa.uiuc.edu/cgi/forms.html
30
Scripts

Scripts written in: UNIX Shell, perl, C,
etc.


Perl and other scripting languages have
rich libraries to help
Scripts stored where?


Depends on your webserver
Apache on UNIX: central location and peruser scripts
31
GET vs POST

If you used POST


If you used GET


Form data sent back with the URL defining the
script and you read it from standard-input
Form data sent back in a separate environment
variable accessible in the web-server
What this means: don’t care since…
Use a library call to grab values

E.g. in Perl: cgi-lib.pl which provides a
&ReadParse function that creates a map
(associative array) with form name/value pairs
32
CGI in Practice



Lots of tips and tricks
Lots of how-to on the Web
And in our Virtual Labs



Do the unit on perl
See information there on CGI
Download perl and Apache webserver


Windows: http://www.wampserver.com/en/
Mac: MAMP
33