1. 1 More JavaScript, HTML Forms, CGI Scripts Tom Horton Alfred C. Weaver CS453 Electronic Commerce

2. 2 Overview HTML Forms JavaScript and Forms Event model and events CGI Programming for server-side scripts

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

4. 4 Basics of Forms A form element: Inside: Used to define a large number of common inputs Empty element (no end-tag (Except the following…) multiple lines of text List of choices in pop-up or scrollable list

5. 5 Common Form Element Attributes On the 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. 6 Use begin and end tags Attributes: ROWS=“…” (four by default) COLS=“…” (40 characters by default) Default text What’s between and

7. 7 types Specify with 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. 8 Single Line of Text Attributes: NAME, optionally SIZE, MAXLENGTH, VALUE Default text defined by VALUE Example:

9. 9 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:

10. 10 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: First choice Second choice

11. 11 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:

12. 12 Aside: More General Buttons Also a 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: Save Example that links to a page: Change Password

13. 13 Multiple Selections element with Need to organize this like a list, so empty element not enough Attributes: NAME, optionally SIZE, MULTIPLE Use for choices inside Attributes: VALUE, optionally SELECTED (for default)

14. 14 Examples Volvo Saab Pizza Pasta

15. 15 Layout and Design Tips In HTML you don’t have full control over layout Check for resizing, wrapping issues Use line breaks and paragraphs Use lists or (descriptive lists) Multiple forms in one page Each with a SUBMIT button

16. 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. 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. See lists of events here: http://www.w3schools.com/jsref/jsref_events.asp http://www.w3schools.com/jsref/jsref_events.asp

18. 18 Some Nice Events ONCLICK Attach to particular element, or 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. 19 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) Method may: Validate fields by accessing form-input elements’ values Use alert-boxes to confirm submission Etc.

20. 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. 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. 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:

23. 23 Static Web Page Delivery Web Server Client 1 Author writes HTML 2 Client requests page 3 Web server locates.htm file HTML stream returned to browser 4 5 Browser processes page

24. 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. 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. 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. 27 Dynamic Web Page Delivery Web Server Client 1 Author writes instructions 2 Client requests page 3 Web server locates instructions file HTML and script are returned to browser 5 6 Browser displays HTML 4 Web browser processes script to create HTML

28. 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. 29 Server-side Dynamic Page Delivery Web Server Client 1 Author writes instructions 2 Client requests page 3 Web server locates instructions file HTML stream returned to browser 5 6 Browser processes page 4 Web server processes instructions to create HTML

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

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