more javascript html forms cgi scripts
Download
Skip this Video
Download Presentation
More JavaScript, HTML Forms, CGI Scripts

Loading in 2 Seconds...

play fullscreen
1 / 33

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


  • 142 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:[email protected]" 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
ad