More JavaScript, HTML Forms, CGI Scripts

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