1
More JavaScript, HTML Forms, CGI Scripts
Tom HortonAlfred C. Weaver
CS453 Electronic Commerce
2
Overview HTML Forms JavaScript and Forms
Event model and events CGI Programming for server-side
scripts
3
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
4
Basics of Forms A form element: <FORM> Inside:
<INPUT TYPE=“…”> Used to define a large number of common inputs Empty element (no end-tag </INPUT> (Except the following…)
<TEXTAREA> multiple lines of text
<SELECT> List of choices in pop-up or scrollable list
5
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
6
<TEXTAREA> Use begin and end tags Attributes:
ROWS=“…” (four by default) COLS=“…” (40 characters by
default) Default text
What’s between <TEXTAREA> and </TEXTAREA>
7
<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=“…”
8
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”>
9
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>
10
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
11
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”>
12
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:
<button type="submit"><img src="/images/icons/tick.png">Save</button>
Example that links to a page: <button type=”push”><a href=”reset.html"><img src=”passkey.png”> Change Password </a></button>
13
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)
14
<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>
15
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
16
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
17
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
18
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)
19
<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.
20
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
21
ACTIONs associated with Forms Finally! The FORM element typically has
these attributes: ACTION=“…” that points to a URL METHOD=“…” with value GET or POST
ACTION points to a script (on the server) to process form data values Some special uses here
METHOD: usually POST More details later when we talk about CGI
22
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:[email protected]" method="post">
23
Static Web Page DeliveryWeb Server
Client
1Author writesHTML
2Client requests page
3 Web server locates .htm file
HTML stream returned to browser4
5Browser processespage
24
Client-side vs. Server-side Processing
Computer processing can happen in two locations Server:
Accepts request, finds page, sends it Client:
Gets HTML (or more?) from net, processes it, displays it
Advanced things can happen on one or both sides
25
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
26
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
27
Dynamic Web Page Delivery
Web Server
Client
1Author writesinstructions
2Client requests page
3 Web server locates instructions file
HTML and script are returned to browser
5
6 Browser displays HTML
4
Web browser processes script to create HTML
28
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!
29
Server-side Dynamic Page DeliveryWeb Server
Client
1Author writesinstructions
2Client requests page
3 Web server locates instructions file
HTML stream returned to browser5
6Browser processespage
4 Web server processes instructions to create HTML
30
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
31
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
per-user scripts
32
GET vs POST If you used POST
Form data sent back with the URL defining the script and you read it from standard-input
If you used GET 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
33
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