More javascript html forms cgi scripts
1 / 33

More JavaScript, HTML Forms, CGI Scripts - PowerPoint PPT Presentation

  • Uploaded on

More JavaScript, HTML Forms, CGI Scripts. Tom Horton Alfred C. Weaver CS453 Electronic Commerce. Overview. HTML Forms JavaScript and Forms Event model and events CGI Programming for server-side scripts. HTML Forms. Provide GUI-like components in your page

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about 'More JavaScript, HTML Forms, CGI Scripts' - lexi

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
More javascript html forms cgi scripts

More JavaScript, HTML Forms, CGI Scripts

Tom Horton

Alfred C. Weaver

CS453 Electronic Commerce


  • HTML Forms

  • JavaScript and Forms

    • Event model and events

  • CGI Programming for server-side scripts

Html forms
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:

Basics of forms
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

Common form element attributes
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


  • Use begin and end tags

  • Attributes:

    • ROWS=“…” (four by default)

    • COLS=“…” (40 characters by default)

  • Default text

    • What’s between <TEXTAREA> and </TEXTAREA>

Input types
<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=“…”

Single line of text
Single Line of Text


    • Attributes: NAME, optionally SIZE, MAXLENGTH, VALUE

    • Default text defined by VALUE

  • Example:<INPUT TYPE=“TEXT” NAME=“tfield1” VALUE=“your name here” SIZE=“30”>

A checkbox
A 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>

Radio buttons
Radio buttons


    • 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

Submit and reset buttons
Submit and Reset Buttons


    • 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”>

Aside more general buttons
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>

Multiple selections
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)

Select examples
<SELECT> Examples

<select name="cars">

<option value="volvo">Volvo</option>

<option value="saab">Saab</option>


<select name=”lunch” MULTIPLE>

<option value=”pizza">Pizza</option>

<option value=”pasta">Pasta</option>


Layout and design tips
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

And then what happens to that input
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

Javascript and forms
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:

Some nice events
Some Nice Events


    • 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


    • Input fields: ONFOCUS, ONBLUR (loses focus)

Form and events
<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.

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

Actions associated with forms
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

Mailto and action
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="" method="post">

Static web page delivery
Static Web Page Delivery

Web Server



Web server locates .htm file

Author writes



HTML stream returned to browser



Browser processes


Client requests page


Client side vs server side processing
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

Many technology choices
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

Client side scripting languages
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

Dynamic web page delivery
Dynamic Web Page Delivery

Web Server


Web server locates instructions file



HTML and script are returned to browser

Author writes



Web browser processes script to create HTML


Client requests page


Browser displays HTML


Server side processing overview
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!

Server side dynamic page delivery
Server-side Dynamic Page Delivery

Web Server


Web server locates instructions file



Author writes


Web server processes instructions to create HTML


HTML stream returned to browser



Browser processes


Client requests page


Cgi scripts
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:


  • 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

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: which provides a &ReadParse function that creates a map (associative array) with form name/value pairs

Cgi in practice
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:

    • Mac: MAMP