foundations of the web: html forms

04/22/23 HTML Forms 1

Foundations ofthe Web:HTML Forms

Sana` [email protected] York University

V22.0480-001Spring, 2005


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


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

http://volume1.coreservlets.com/archive


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.


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.


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.


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.

GetForm.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">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>

In the <FORM>tag, you can specify GET or POST. Ifnothing is specified,the form defaults to GET.

Let’s try it out…

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

</FORM></CENTER></BODY></HTML> Let’s try it out…


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>


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.


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.


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.


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


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.


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…


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.


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.


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=).


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.


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.


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.


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.


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>


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.


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.


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.


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>


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


Example<FORM ACTION="http://localhost:8088/SomeProgram"><BUTTON TYPE="SUBMIT">Single-line Label</BUTTON> <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>


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.


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.


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.


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>


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.


Example #1Favorite 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>


Example #2Languages 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>


Example #3Server-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>


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.


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.


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>


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.


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>


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.


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.


Hidden Field HTML Element:

<INPUT TYPE="HIDDEN" NAME="…" VALUE="…">

Attributes: NAME (required), VALUE. Example:

<INPUT TYPE="HIDDEN" NAME="itemID"value="brown001”>


Additional Items Lets look at additional examples:

File Upload Controls Groups of Controls Tab Order Control

foundations of the web: html forms

Documents