More javascript html forms cgi scripts
Download
1 / 33

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


  • 144 Views
  • 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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
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


Overview
Overview

  • 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:http://www.w3schools.com/html/html_forms.asp


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


Textarea
<TEXTAREA>

  • 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

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


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


Radio buttons
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


Submit and reset buttons
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”>


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>

<select name=”lunch” MULTIPLE>

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

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

</select>


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:http://www.w3schools.com/jsref/jsref_events.asp


Some nice events
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)


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
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="mailto:horton@virginia.edu" method="post">


Static web page delivery
Static Web Page Delivery

Web Server

1

3

Web server locates .htm file

Author writes

HTML

4

HTML stream returned to browser

5

2

Browser processes

page

Client requests page

Client


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

3

Web server locates instructions file

1

4

HTML and script are returned to browser

Author writes

instructions

5

Web browser processes script to create HTML

2

Client requests page

6

Browser displays HTML

Client


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

3

Web server locates instructions file

1

4

Author writes

instructions

Web server processes instructions to create HTML

5

HTML stream returned to browser

6

2

Browser processes

page

Client requests page

Client


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: http://hoohoo.ncsa.uiuc.edu/cgi/forms.html


Scripts
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


Get vs post
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


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: http://www.wampserver.com/en/

    • Mac: MAMP