farrah-newman
Uploaded by
33 SLIDES
534 VUES
330LIKES

More JavaScript, HTML Forms, CGI Scripts

DESCRIPTION

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

1 / 33

Télécharger la présentation

More JavaScript, HTML Forms, CGI Scripts

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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. More JavaScript, HTML Forms, CGI Scripts Tom Horton Alfred 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 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

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

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

  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

More Related