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:horton@virginia.edu" 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