1 / 48

Foundations of the Web: HTML Forms

Foundations of the Web: HTML Forms. V22.0480-001 Spring, 2005. Sana` Odeh Odeh@cs.nyu.edu New York University. Road Map. Introduction to HTML Forms GET v. POST The HTML FORM Element Text Controls Submit/Reset Buttons Check Boxes and Radio Buttons Select and drop-down menus

skylar
Download Presentation

Foundations of the Web: HTML Forms

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. Foundations ofthe Web:HTML Forms V22.0480-001 Spring, 2005 Sana` Odeh Odeh@cs.nyu.edu New York University HTML Forms

  2. Road Map • Introduction to HTML Forms • GET v. POST • The HTML FORM Element • Text Controls • Submit/Reset Buttons • Check Boxes and Radio Buttons • Select and drop-down menus • Server Side Image Maps • Hidden Fields HTML Forms

  3. Attribution • All information and examples in these slides come from: Hall and Brown, Core Servlets and JSPs, 2nd Edition, Chapter 19. • All Examples are available at: http://volume1.coreservlets.com/archive HTML Forms

  4. Introduction • HTML forms provide a simple and reliable interface to collect data from a user and transmit the data to a servlet or other server side program. • In this lecture, we cover the standard form controls defined by HTML 4.0. • We also discuss how form data is transmitted to the server when a GET or POST request is made. • To explore these issues, we use a mini Web server that is provided by our text book. HTML Forms

  5. How Forms Transmit Data • HTML forms lets you create a variety of user interface controls to collect input in a web page. • Each of the controls typically has a name and a value. • name: specified within the HTML. • value: comes either from user input or from a default value in the HTML. • The entire form is associated with the URL of a program that will process the data. • When the user submits the form, the names and values of all controls are sent to the designated URL as a string. HTML Forms

  6. How Forms Transmit Data • HTML form data can be submitted via one of two ways: GET or POST. • The first method, HTTP GET, appends the form data to the end of the specified URL after a single question mark. • The second method, HTTP POST, sends the data after the HTTP request headers and a blank line. • In either case, the names and values of all active elements are collected into a string with = between each name and value, and with an & between each name/value pair. HTML Forms

  7. The Mini Web Server • Our text book includes code for a mini web server. • You can run this locally to view HTML form submissions. • The mini web server simply echoes back the complete HTTP request from any browser. HTML Forms

  8. GetForm.html In the <FORM> tag, you can specify GET or POST. If nothing is specified, the form defaults to GET. <HTML> <HEAD> <TITLE>A Sample Form Using GET</TITLE> </HEAD> <BODY BGCOLOR="#FDF5E6"> <CENTER> <H2>A Sample Form Using GET</H2> <FORM ACTION=" http://volume1.coreservlets.com/archive/ SomeProgram"> First name: <INPUT TYPE="TEXT" NAME="firstName" VALUE="Joe"><BR> Last name: <INPUT TYPE="TEXT" NAME="lastName" VALUE="Hacker"><P> <INPUT TYPE="SUBMIT"> <!-- Press this button to submit form --> </FORM> </CENTER> </BODY> </HTML> Let’s try it out… HTML Forms

  9. PostForm.html <HTML> <HEAD> <TITLE>A Sample Form Using GET</TITLE> </HEAD> <BODY BGCOLOR="#FDF5E6"> <CENTER> <H2>A Sample Form Using GET</H2> <FORM ACTION=" http://volume1.coreservlets.com/archive/ SomeProgram" METHOD="POST"> First name: <INPUT TYPE="TEXT" NAME="firstName" VALUE="Joe"><BR> Last name: <INPUT TYPE="TEXT" NAME="lastName" VALUE="Hacker"><P> <INPUT TYPE="SUBMIT"> <!-- Press this button to submit form --> </FORM> </CENTER> </BODY> </HTML> Let’s try it out… HTML Forms

  10. The FORM Element • HTML Element: <FORM ACTION=".. "…> … </FORM> • Attributes: ACTION, METHOD, ENCTYPE, TARGET, ONSUBMIT, ONRESET, ACCEPT, ACCEPT-CHARSET • The FORM element creates an area for data input elements, and designates the URL to which any collected data will be transmitted. • Example: <FORM ACTION="SomeProgram"> FORM input elements and regular HTML </FORM> HTML Forms

  11. FORM Attributes • ACTION • Specifies the URL of the server side program that will process the FORM data. • If the server-side program is located on the same server from which the HTML form was obtained, it’s recommended that you use a relative URL instead of an absolute URL. • This approach lets you move both the form and the servlet to a different host without editing either one. • This is important as you typically develop and test on one machine, and then deploy on another. HTML Forms

  12. FORM Attributes • METHOD: • Specifies how the data will be transmitted to the HTTP Server. • The main options are: GET or POST. GET is the default. • Since GET data is part of the URL, it has some advantages: • Save the results of a form submission. For example, you can submit data and bookmark the resultant URL, send it to a colleague by email, or put it in a normal hypertext link. That’s why most search engines, e.g. google.com use this approach. • Type data in by hand. You can test servlets or JSP pages that use GET simply by entering a URL with the appropriate data attached. HTML Forms

  13. FORM Attributes • METHOD (Continued): • Since POST data is not part of the URL, it has some advantages: • Transmit large amounts of data. Many browsers limit URLs to a few thousand characters, making GET inappropriate when your form must send a large amount of data. • Send Binary Data. Spaces, carriage returns, tabs and many others characters are illegal in URLs. If you upload a large binary file, it would be time consuming to encode all the characters before transmission and decode them on the other end. • Keep the data private from someone looking over the user’s shoulder. When using GET or POST, data is submitted as clear-text. But, at least with POST, sensitive data is not displayed directly within the URL. • To submit encrypted data, you need to use SSL. HTML Forms

  14. FORM Attributes • ENCTYPE • Specifies the way in which the data will be encoded before being transmitted. • The default is: • application/x-www-form-urlencoded. • In this encoding, the client converts each space into a plus sign (+), and each other non-alphanumeric character into a percent sign (%) followed by the two hexadecimal digits representing that character. • For example, this string: • Larry (Java Hacker?) • is encoded as: Larry+%28Java+Hacker%3F%29 HTML Forms

  15. FORM Attributes • ENCTYPE (Continued) • Most recent browsers also support an additional ENCTYPE of: multipart/form-data. • This encoding transmits each field as a separate part of a MIME-compatible document. • To use this ENCTYPE, you must specify POST. • This encoding is used for file upload controls, e.g. upload Word documents, photos, etc. HTML Forms

  16. MultipartForm.html <HTML> <HEAD> <TITLE>Using ENCTYPE="multipart/form-data"</TITLE> </HEAD> <BODY BGCOLOR="#FDF5E6"> <CENTER> <H2>Using ENCTYPE="multipart/form-data"</H2> <FORM ACTION="SomeProgram" ENCTYPE="multipart/form-data" METHOD="POST"> First name: <INPUT TYPE="TEXT" NAME="firstName" VALUE="Joe"><BR> Last name: <INPUT TYPE="TEXT" NAME="lastName" VALUE="Hacker"><P> <INPUT TYPE="SUBMIT"> </FORM> </CENTER> </BODY> </HTML> Let’s try it out… HTML Forms

  17. FORM Attributes • TARGET: • Used by frame-capable browsers to determine which frame call should be used to display the server results. • ONSUBMIT and ONRESET • These attributes are used by JavaScript to attach code that should be evaluated when the form is submitted or reset. • Handy for performing client-side form validation. HTML Forms

  18. Text Controls • HTML Supports three types of text-input elements: textfields, password fields, and text areas. • Each is given a name, and the value is taken from the content of the control. • Textfields: <INPUT TYPE=“TEXT” NAME=“...” ..> (No End Tag Required) Attributes: NAME (required), VALUE, SIZE, MAXLENGTH, ONCHANGE, ONSELECT, ONFOCUS, ONBLUR, ONKEYDOWN, ONKEYPRESS, ONKEYUP • This element creates a single-line input field. • Netscape 7.0 and Internet Explorer 6.0 submit the form when the user presses Enter while the cursor is in a textfield and the form has a SUBMIT button. HTML Forms

  19. Textfield Attributes • NAME • Identifies the text field when the form is submitted. • VALUE • If supplied, specifies the initial contents of the text field. However, when the form is submitted, the current contents are sent. • Note: if the text field is empty when the form is submitted, the form data simply consists of the name and an equal sign (e.g. name1=value&name2=). HTML Forms

  20. Textfield Attributes • SIZE • Specifies the width of the text field. • If text beyond this size is entered, the text field scrolls to accommodate it. • MAXLENGTH • Specifies the maximum number of allowable characters. • This number is in contrast to the number of visible characters, which is specified via the SIZE attribute. • Note that users can always override this; for GET requests, they can type data directly into the URL, and for POST requests, they can write their own HTML form. • Other Attributes: ONCHANGE, ONSELECT, etc. • These are all used for JavaScript. HTML Forms

  21. Password Fields • HTML Element: <INPUT TYPE=“PASSWORD” NAME=“…” ..> (No End Tag Required) • Attributes: NAME (required), VALUE, SIZE, MAXLENGTH, ONCHANGE, ONSELECT, ONFOCUS, ONBLUR, ONKEYDOWN, ONKEYPRESS, ONKEYUP • Password fields are just like textfields, except that when the user enters text, the input is not echoed; instead, some obscuring character, usually an asterisk, is displayed. HTML Forms

  22. Password Fields • Useful for collecting data, such as credit card numbers or passwords. Note, however that the regular clear text is submitted when the form is submitted. • Since GET data is appended to the URL, you should always use POST with a password field so that a bystander cannot read the password from the URL. • For real security, the form must be secured via SSL. HTML Forms

  23. Text Areas • HTML Element: <TEXTAREA NAME=“..” ROWS=xxx COLS=yyy> … </TEXTAREA> • Attributes: • NAME (required), ROWS (required), COLS (required), WRAP (nonstandard), ONCHANGE, ONSELECT, ONFOCUS, ONBLUR, ONKEYDOWN, ONKEYPRESS, ONKEYUP. • Creates a multi-line text area. • The element has no VALUE attribute; instead, text between the start and end tags is used as the initial content of the text area. HTML Forms

  24. TextAreaForm.html <HTML> <BODY BGCOLOR="#FDF5E6"> <CENTER> <H2>Enter some HTML:</H2> <FORM ACTION="SomeProgram"> <TEXTAREA NAME="HTML" ROWS=5 COLS=30> Delete this text and replace with some of your own HTML. </TEXTAREA> <P> <INPUT TYPE=SUBMIT> </FORM> </CENTER> </BODY> </HTML> HTML Forms

  25. Push Buttons • Push buttons are used for two main purposes in HTML forms: • To submit forms; and • To reset the controls to the values specified in the original HTML. • Browsers that use JavaScript can also use buttons for a third purpose, to trigger arbitrary JavaScript code. HTML Forms

  26. Submit Buttons • HTML Element: • <INPUT TYPE="SUBMIT" …> • Attributes: NAME, VALUE, ONCLICK, ONDBLCLICK, ONFOCUS, ONBLUR. • When a submit button is clicked, the form is sent to the servlet or other server-side program. HTML Forms

  27. Submit Buttons • NAME and VALUE • If a submit button is used simply to initiate the submission of the form, the button’s name can be omitted. • If a name is supplied, then only the name and value of the button that was actually clicked are sent. • This capability lets you use more than one button and detect which one is pressed. • The value attribute determines the label of the button. HTML Forms

  28. Example with 2 Buttons <FORM ACTION=" http://localhost:8088/SomeProgram"> <CENTER> Item: <INPUT TYPE="TEXT" NAME="Item" VALUE="256MB SIMM"><BR> <INPUT TYPE="SUBMIT" NAME="Add" VALUE="Add Item to Cart"> <INPUT TYPE="SUBMIT" NAME="Delete" VALUE="Delete Item from Cart"> </CENTER> </FORM> HTML Forms

  29. Reset Buttons • HTML Element: • <INPUT TYPE=“RESET”…> • Attributes: NAME, VALUE, ONCLICK, ONDBLCLICK, ONFOCUS, ONBLUR. • Value specifies the button label: “Reset” is the default. • Resets the values of all items in the form to those specified in the original VALUE parameters. HTML Forms

  30. HTML 4.0 Buttons • Introduced in HTML 4.0 • Supported by Internet Explorer 6.0 and Mozilla Netscape 7.0. • Lets you create buttons with multi-line labels, images, font changes and the like. • However, early browsers may not support the BUTTON element. HTML Forms

  31. Example <FORM ACTION="http://localhost:8088/SomeProgram"> <BUTTON TYPE="SUBMIT">Single-line Label</BUTTON> &nbsp;&nbsp; <BUTTON TYPE="SUBMIT">Multi-line<BR>label</BUTTON> <P> <BUTTON TYPE="SUBMIT"> <B>Label</B> with <I>font</I> changes. </BUTTON> <P> <BUTTON TYPE="SUBMIT"> <IMG SRC="images/Java-Logo.gif" WIDTH="110" HEIGHT="101" ALIGN="LEFT" ALT="Java Cup Logo"> Label<BR>with image </BUTTON> </FORM> HTML Forms

  32. Check Boxes and Radio Buttons • Check boxes can be selected or deselected individually. • Radio buttons can be grouped so that only a single member of the group can be selected at a time. HTML Forms

  33. Check Boxes • HTML Element: <INPUT TYPE=“CHECKBOX” NAME=“…” …> • Creates a check box whose name/value pair is transmitted only if the check box is checked when the form is submitted. • Example: <INPUT TYPE="CHECKBOX" NAME="noEmail" CHECKED> Check here if you do <I>not</I> want to get our email newsletter. </INPUT> • VALUE: the value attribute is optional and defaults to “on”. • CHECKED: if the CHECKED attribute is supplied, then the check box is initially checked. HTML Forms

  34. Radio Buttons • HTML Element: <INPUT TYPE=“RADIO” NAME=“…” VALUE=“…” …> • Only a single radio button in a given group can be selected at any one time. • You indicate a group of radio buttons by providing all of them with the same NAME. HTML Forms

  35. Example <DL> <DT>Credit Card: <DD><INPUT TYPE="RADIO" NAME="creditCard" VALUE="visa"> Visa <DD><INPUT TYPE="RADIO" NAME="creditCard" VALUE="mastercard"> Master Card <DD><INPUT TYPE="RADIO" NAME="creditCard" VALUE="java" CHECKED> Java Smart Card <DD><INPUT TYPE="RADIO" NAME="creditCard" VALUE="amex"> American Express <DD><INPUT TYPE="RADIO" NAME="creditCard" VALUE="discover"> Discover </DL> HTML Forms

  36. Combo Boxes and List Boxes • A SELECT element presents a set of options to the user. • If only a single entry can be selected and no visible size has been specified, the options are presented in a drop-down menu; • List boxes are used when multiple selections are permitted or a specific visible size has been specified. HTML Forms

  37. Example #1 Favorite language: <SELECT NAME="language"> <OPTION VALUE="c">C <OPTION VALUE="c++">C++ <OPTION VALUE="java" SELECTED>Java <OPTION VALUE="lisp">Lisp <OPTION VALUE="perl">Perl <OPTION VALUE="smalltalk">Smalltalk </SELECT> HTML Forms

  38. Example #2 Languages you know:<BR> <SELECT NAME="language" MULTIPLE> <OPTION VALUE="c">C <OPTION VALUE="c++">C++ <OPTION VALUE="java" SELECTED>Java <OPTION VALUE="lisp">Lisp <OPTION VALUE="perl" SELECTED>Perl <OPTION VALUE="smalltalk">Smalltalk </SELECT> HTML Forms

  39. Example #3 Server-side Languages: <SELECT NAME="language"> <OPTGROUP LABEL="Common Servlet Languages"> <OPTION VALUE="java1">Java </OPTGROUP> <OPTGROUP LABEL="Common CGI Languages"> <OPTION VALUE="c">C <OPTION VALUE="c++">C++ <OPTION VALUE="java2">Java <OPTION VALUE="perl">Perl <OPTION VALUE="vb">Visual Basic </OPTGROUP> HTML Forms

  40. Server Side Image Maps • In standard HTML, an element called MAP lets you associate URLs with various regions of an image. • This form of mapping is known as client-side image mapping. • HTML also support server-side image maps that can be used within HTML forms. • With server-side maps, when the user clicks on the image, the coordinates of the click are sent to a server-side program. HTML Forms

  41. Server Side Image maps • HTML Element: • <INPUT TYPE="IMAGE"…> • Attributes: • NAME (required), SRC, ALIGN. • This element displays an image, that when clicked, sends the user coordinates to a server-side program. • Upon submission, the parameters name.x=xpos and name.y =ypos are submitted. • Coordinates are relative to the upper left corner of the image. HTML Forms

  42. Example <html> <head> <title>The IMAGE Input Control</title> </head> <body> <h1 ALIGN="CENTER">The IMAGE Input Control</h1> Which island is Java? Click and see if you are correct. <form ACTION="http://localhost:8088/GeographyTester"> <input TYPE="IMAGE" NAME="map" SRC="images/indonesia.gif"> </form> Of course, image maps can be implemented <b>in</b> Java as well. :-) </body> </html> HTML Forms

  43. ISMAP - Server Side Map • ISMAP is an optional attribute to the regular HTML IMG element. • Can be used in a manner similar to the <INPUT TYPE="IMAGE"…> form entry. • If an IMG element with ISMAP is inside a hypertext link, then clicking on the image results in the coordinates being sent. HTML Forms

  44. Example <html> <head> <title>The ISMAP Attribute</title> </head> <body> <h1 ALIGN="CENTER">The ISMAP Attribute</h1> <h2>Select a pin:</h2> <a HREF="http://localhost:8088/ChipTester"> <img SRC="images/chip.gif" WIDTH=495 HEIGHT=200 ALT="Chip" BORDER=0 ISMAP></a> </body> </html> HTML Forms

  45. Hidden Fields • Hidden fields do not affect the appearance of the page that is presented to the user. • Instead, they store fixed names and values that are sent unchanged to the server, regardless of user input. HTML Forms

  46. Hidden Fields • Used for three purposes: • Tracking the user: as the user moves around within a site, user IDs in hidden fields can be used to track the user. • Providing predefined input to a server-side program: multiple static HTML pages can provide input forms to the same server side program. • Storing contextual information in pages: for example, in a shopping cart, each item can have its own hidden product number. HTML Forms

  47. Hidden Field • HTML Element: • <INPUT TYPE="HIDDEN" NAME="…" VALUE="…"> • Attributes: NAME (required), VALUE. • Example: <INPUT TYPE="HIDDEN" NAME="itemID" value="brown001”> HTML Forms

  48. Additional Items • Lets look at additional examples: • File Upload Controls • Groups of Controls • Tab Order Control HTML Forms

More Related