FORM ELEMENT

The processing program can be a CGI program, or a JAVA program running under a Web Server such as JSP (JavaServer Pages). The Web Server receives the data and schedules the JAVA program, passing it the data in a decoded format.

Here is a sample FORM element:

<TABLE><FORM
  action="http://127.0.0.1:21000/books/CGI/MyCGI">
<TR><TD>First Name 
  <TD><INPUT type="text" name="first" value="Joe">
<TR><TD>Last Name 
  <TD><INPUT type="text" name="last" value="Blow">
<TR>
  <TD><BUTTON type="submit" name="push" value="xx">
        ENTER</BUTTON>
</FORM></TABLE>

It will display like this (the TABLE, TR and TD tags were used for alignment purpose):


First Name
Last Name

The elements included in the FORM contents, such as <INPUT> and <BUTTON> in the example are called controls. They all have a name which is the value assigned to their name attribute and a value which can be diversely defined. For an INPUT control, it is the value assigned to its value attribute ('John' and 'Blow' in the example); for a BUTTON control, it is the contents of the element ('ENTER' in the example).

As you click the 'ENTER' control, data from the FORM will be sent over to the destination specified by the action attribute of the FORM element. As set out here, the destination is the '21000' port of your own computer. Normally there should be a Web Server to monitor this port.

To get some insight into the working of the communications, you can run the JAVA program whose full name is web.MyServer, which is in the classes.web directory, then click the 'ENTER' button in the form on the left.
This program monitors the 21000 port of your computer, and when data is received, reads it and writes it out to the form.txt file in the directory from which the java command is entered, and also to the user screen for immediate examination.
Apart from the first line, an application normally never sees the data our JAVA program sees. They are HTTP protocol data, specifically request header data. As the file specified in the action attribute does not exist here, you will be taken to another page with a full page error message saying so. The experiment was devised to show you the data transmitted. Only with some more programming effort, can you make the JAVA program a Web Server.

The information useful to an application program is in the first line:

GET book/CGI/MyCGI?first=Joe&last=Blow&push=ENTER HTTP/1.1

which can be decoded into:

-	the retrieving method to use by the server is 'GET'
-	the application program file identification, complete with its directory path, is '`book/CGI/MyCGI`'
-	the element named 'first' has the value 'Joe'
-	the element named 'last' has the value 'Blow'
-	the element named 'push' has the value 'ENTER'
-	the HTTP version is 1.1

The & sign is used to separate the information on "first", "last" and "push" names.
The host and port identification part of the internet address ('127.0.0.1:21000') is not transmitted since the server knows where it is monitoring.
The 'GET' method is part of the HTTP protocol. We shall be coming to this later on.
The directory path locates the application program in the host.

The question marks (?) introduces the data part -- these data come from the INPUT and BUTTON elements which are called controls
Data come as name=value pairs. The name of an element is what is assigned to its name attribute. The value of an element is what is assigned to its value attribute.

1. SAMPLES

1.1 Text Field, Radio and Checkbox

Here is a sample page with text fields for data entry, radio buttons for exclusive choices and check boxes for multiple choices.

<FORM action="http://www.hatayservice.com:8080/books/servlet/MyServlet"
      method="GET">
<TABLE>
<TR><TD>First Name<TD colspan=2">
    <INPUT type="text" name="first">
<TR><TD>Last Name<TD colspan="2">
    <INPUT type="text" name="last">
<TR valign="top"><TD>Sex<TD>
    <INPUT type="radio" name="sex" value="male">male<br>
    <INPUT type="radio" name="sex" value="female">female
<TR valign="top"><TD colspan="2">Hobbies -- click one or more<TD>
    <INPUT type="checkbox" name="sport">sport<br>
    <INPUT type="checkbox" name="culture">culture<br>
    <INPUT type="checkbox" name="bird">bird watching<br>
    <INPUT type="checkbox" name="travels">travels<br>
<TR><TD>
    <BUTTON type="submit" name="push" value="xx">
    ENTER</BUTTON>
</FORM></TABLE>

Please click here to display the page.

The controls are wrapped in a table for presentation. Elements pertaining to the definition of the form are made to stand out in blue.

1.1.1 The FORM element
The control definitions are included in the contents of a FORM element. This has 2 attributes:

The action attribute specifies the URL that identifies the application to which data from the form is to be sent; this URL has 3 parts:

.	http is the communication protocol
.	www.hatayservices.com:8080 identifies the host containing the application, and the port (8080) where a Web Server is waiting for incoming messages
.	books/servlet/MyServlet identifies the application as the Web Server knows it

The method attribute specifies the method to be used by the Web Server to pass the data the application ('GET' is the default, so it could have been omitted); with the GET method, the data from the form is appended to the resource identification as defined by the action attribute. When clicking the 'ENTER' button you will flittingly see them on your browser status bar.

1.1.2 Text fields
The text field controls are defined by the INPUT elements with the type="text" attribute.The name attributes define the names of the controls. These are 'first' and 'last' in the example.

1.1.3 The radio controls
The radio controls are defined by the INPUT elements with the type="radio" attribute. Both of these elements have the same name (name="sex"); this puts them into the same group where only one element can be checked at any given time

1.1.4 The checkbox controls
The checkbox controls are defined by the INPUT elements with the type="checkbox" attribute. Any number of checkboxes can be checked a given time.

1.1.5 The submit button
The submit button is defined by the BUTTON elements with the type="submit" attribute. When you click on the submit button, the information assigned to the controls are sent over to the Web Server as a character string appended to the application URL:

-	the information from the text field controls is composed of the names and values, as defined by the name and value attributes, set in the form `name=value`
-	the information from the radio controls indicates what control was checked, in the form `name=value`, where name is the value assigned to the name attribute and value is the value assigned to the value attribute of the checked control.
-	the information from the checkbox controls indicates what controls were checked, in the form `name=on`, where name is the value assigned to the name attribute of the checked controls and on is a key word.
-	the information from the submit button control is composed of the name and contents of the clicked BUTTON element (the form can have more than one submit button), set in the form `name=contents`, where 'name' is the value assigned to the name attribute and contents is the text between the start <BUTTON> and the end </BUTTON> tags.

1.1.6 Data presentation
The data string sent to the Web Server is separated from the application identifcation by a question mark. Data items in the string are separated by ampersand signs (&). Any special characters in the data are replaced by their hexadecimal codes, preceded by the percent (%) sign. You can run the web.MyServer Java program as shown in the above introduction, to capture and see the message transmitted to the Web Server. This is for informational purpose. In practical work with a Web Server (such as the widely popular Tomcat Web Server), applications are presented the data in decoded form.

1.2 Menu Selection

<HTML><HEAD><TITLE>A SELECT</TITLE></HEAD><BODY>
<FORM action="http://localhost:21000/books/servlet/MyServlet"
      method="POST">
<TABLE><TR valign="top"><TD>Menu<TD>
<SELECT name="Poetry">
  <OPTGROUP label="shakespeare">William Shakespeare
      <OPTION label="macbeth"  
              onclick="location='../Samples/PoemMacbeth.html'";>
      Macbeth</OPTION>
      <OPTION label="hamlet"  selected
              onclick="location='../Samples/PoemHamlet.html'";>
      Hamlet</OPTION>
  </OPTGROUP>
  <OPTION label="wordsworth" 
          onclick="location='../Samples/PoemWordsworth.html'";>
  William Wordsworth</OPTION>
  <OPTION label="shelley"
          onclick="location='../Samples/PoemShelley.html'";>
  Percy B. Shelley</OPTION>
  <OPTION value="byron"
          onclick="location='../Samples/PoemByron.html'";>
  George G. Lord Byron</OPTION>  
  <OPTION value="tennyson" 
          onclick="location='../Samples/PoemTennyson.html'";>
  Alfred Lord Tennyson</OPTION>
</SELECT>
<TR><TD>
    <BUTTON type="submit" name="push" value="xx">SEND</BUTTON><TD>
</TABLE>
</FORM>
</BODY></HTML>

To see the page, please click here.

1.2.1 The SELECT and OPTION elements

The SELECT element creates a menu control. Options of the menu are defined by the OPTION elements. The option labels (i.e. what you see in the menu) are the contents of the elements. They are in a menu list. As no size attribute is present in the SELECT element here, only one line of the list is visible. With the Microsoft Internet Explorer and the Netscape Navigator browsers, an arrowed button can be used to open the list and see all of the option labels. You can select one of the option:
- by using the move down key, then pressing the 'Enter' key
- by clicking the desired option, with the mouse

Then the list will close and the selected option shows on the one ordinarily visible line.

1.2.2 The onclick event handling attribute

Well, in our example, if you click an option, normally the onclick attribute present in the OPTION tag is activated first. Their assigned script are in red in the above; they will take you to the specified HTML page. When returning from this page, you will see the selected option on the Menu visible line. This will happen with Netscape Navigator 7.1, not with Internet Explorer 6 which does not abide by the standard here on this point.

1.2.3 The OPTGROUP element

The OPTGROUP element contents is a group of OPTIONs. According to the HTML standard, only the group label ("shakespeare") would show on the menu, at first; by clicking it you would display the options in the group. Presently, with both Internet Explorer and Netscape Navigator, the group label does show, but so do the component option labels also.

1.2.4 Preselected item

The selected attribute in the OPTION tag named "hamlet" pre-selects the associated label, i.e. this the label is selected when the page is loaded, and will remain so if you don't select another one.

1.2.5 Submitted data

When you click the SUBMIT button (labelled "SEND" in the example), the information from the SELECT element will be:

select_name=selected_label

where select_name is the name of the SELECT element, as defined by its name attribute, selected_label is the label you selected.

According the W3C reference document, the label of an option is defined as follows:

-	a long label is defined by the contents of the OPTION element; this what shows in the displayed menu
-	a short label is defined by the label attribute; the short label is the value of the SELECT element, in the pair name/value as sent to the application, when the option is selected and the submit button is clicked; this label, when so defined, is to replace the long one, both in the menu list and in the name/value pair sent to the application

In practice, neither the Internet Explorer nor the Netscape Navigator strictly abides by the rules. You can check out and see what your browser really does. You can see that in both Internet Explorer and Netscape Navigator, it is really the value attribute that defines the short label. In the options with the label attribute, it is the contents that define the short label.

1.2.6 The POST method

Finally, the method specified in the FORM tag is POST. You can check, using the web.MyServer programm that the data is in the message-body, instead of the request line.

1.3 Enhanced presentation and access

<HTML><HEAD><TITLE>PRESENTATION FORM</TITLE></HEAD><BODY>
<b><font color="red">SUBSCRIBER</font></b>
<FORM action="http://localhost:21000/books/servlet/MyServlet">
<FIELDSET><LEGEND><b><font color="blue">IDENTITY</font></b></LEGEND> 
   <TABLE>
     <TR><TD><LABEL>First Name</LABEL><TD>
       <INPUT type="text" name="first" accesskey="F" tabindex="2"><br>
     <TR><TD><LABEL>Last Name</LABEL><TD>
       <INPUT type="text" name="last" accesskey="L" tabindex="1">
   </TABLE>
</FIELDSET>
<FIELDSET><LEGEND><b>PROFILE</b></LEGEND>
<TABLE>
<TR valign="top"><TD>Sex<TD>
    <INPUT type="radio" name="sex" value="male" tabindex="4">male<br>
    <INPUT type="radio" name="sex" value="female" tabindex="3">female<TD>
<TR valign="top"><TD class="white" colspan="2">Hobbies -- click one or more<TD>
    <INPUT type="checkbox" name="sport">sport<br>
    <INPUT type="checkbox" name="culture">culture<br>
    <INPUT type="checkbox" name="bird">bird watching<br>
    <INPUT type="checkbox" name="travels" tabindex="5">travels<br>
<TR><TD>
    <BUTTON type="submit" name="push" value="xxxx">
    ENTER</BUTTON>
</TABLE>
</FIELDSET>
</FORM></BODY></HTML>

Please click here to see the displayed page.

1.3.1 The FIELDSET and LEGEND elements

Elements can be enclosed in a FIELDSET elements to form a group. The corresponding controls are then set in a frame. The LEGEND elements can be used to define a caption displayed on top of the frame.

1.3.2 The LABEL element

You can use the LABEL element to place labels before or after a control, as is done here for the INPUT text fields. But they are quite unnecessary, as you can put a bare text wherever you choose on the HTML page.

1.3.3 Access key and tabbing index

The accesskey and tabindex attributes help organize the user's navigation across the HTML page:

The accesskey="F" and accesskey="L" attributes in the above assign the letters "F" and "L" respectively to the controls names "first" and "last". This makes it possible for you to focus on these controls using the "F" and "L" keys on the keyboard. With an Windows system, you have to hold down the ALT key when pressing the letter "F" or "L". Please try it.

The tabindex attributes define the tabbing order among the controls: when you press the TAB key, the cursor will move among the control in the increasing order of the assigned tabindex values; the controls without the tabindex attribute come last, and among themselves, they are in the "natural" order of the page: left to right, top to bottom. You can try it; this works fine with Netscape 7.1, but a control can be skipped with Internet Explorer 6.0.

2. USAGE

The FORM element creates a data entry form that helps the user enter data and transmit them to a remote application.

2.1 The controls

The contents of the FORM element hold form-elements that are used to define the data and to transmit them. These elements are called controls. The different types of control are:

-	Text fields:	one line data fields that can receive character input from the keyboard They are created by the INPUT element with the type="text" attribute
-	Text area fields:	multi line data fields that can receive character input from the keyboard They are created by the TEXTAREA element
-	Checkbox controls:	switches that alternately takes on the ON and OFF state as they are repeatredly clicked on by the user They are created by the INPUT element with the type="checkbox" attribute
-	Radio controls:	switches formed into groups where only one of the controls can have the ON state They are created by an INPUT element with the type="radio" attribute
-	Password fields:	Text fields where the user can enter a password which is not displayed in a legible form (usually as a sequence of asterisks) They are created by an INPUT element with the type="password" attribute
-	Menu options:	Labels set in a menu, to be selected by the user They are created by OPTION elements included in the contents of a SELECT element. OPTION elements in a SELECT contents can form groups enclosed in OPTGROUP elements.
-	Hidden fields:	Text fields not rendered on the HTML page They are created by an INPUT element with the type="hidden" attribute
-	Image controls:	submit button displaying an image on its face; when clicked it causes the pixel coordinates of the clicked point to be transmitted to the server, along with the information from the other controls in the FORM They are created by an INPUT element with the type="image" attribute and the image identified by the src="uri" attibute, or alternatively by a BUTTON element with a type="submit" attribute, and an IMG element in the contents.
-	File controls:	file select controls that allow the user to browse the directory tree of the host computer, to select a file path name; this name is retrieved into the text field of the control They are created by an INPUT element with the type="file" attribute
-	Submit buttons:	Buttons used to cause the form data to be transmitted to the remote Web Server They are created by a BUTTON element with the type="submit" attribute, or alternatively by an INPUT element with the type="submit" attribute
-	Reset buttons:	Buttons used reset all the controls of a FORM to their initial values They are created by a BUTTON element with the type="reset" attribute, or alternatively by an INPUT element with the type="reset" attribute
-	Push buttons:	Buttons used to allow interaction of the user They are created by a BUTTON element with the type="button" attribute.

2.2 Transmitted data

Data from the FORM are transmitted to the remote Web Server as a string of characters contained in an HTTP message. Each data item is in the general form:

name=value

Names and values are strings of characters; most of the characters that are not alphanumeric are considered special, and represented by their hexadecimal code, preceded by a percent (%) sign. Some of the characters and their representations are:


%20 - space

%22 - double quote (")

%2F - slash (/)

%3A - colon (:)

etc...

The data items are linked together by ampersand (&) signs:

data-item&data-item& ...&data-item

An example of data string is:

firstName=John&surname=Blow&age=26&SUBMIT=push

Depending on the method declared in the method attribute of the FORM element, the data string is:
- appended to the resource URL, if the method is 'GET'
- contained in the message-body, if the methode is 'POST'
For more details, please click here

2.3 Focus

When you click on a control, you make it active. For example, clicking in a text field you make it ready to receive the characters you type on the keyboard; clicking on an option in a menu you make it highlighted to show that it is selected. The control is said to have focus.

2.4 Tabbing navigation

When the user types data on the keyboard, the typed character goes into the control (a text field or a textarea field) that has focus. Focus is gained by a control when the user clicks on it. Alternatively, the user can move focus from one control to another by pressing the TAB key. This is tabbing navigation

If nothing special is specified, pressing the TAB key will move focus from one control to the next on its right, or to the first on the next row which has a control that can get focus (a control can get focus if its defining element does not have the disabled attribute, and has not been disabled programmatically). This is the normal tabbing order

This order can be changed by using the tabindex attribute. When the TAB key is pressed, the controls with a tabindex attribute will get focus in the order of the tabindex values. Ths controls where the tabindex is not present will come next, in the natural tabbing order among them.

2.5 Events

Events caused by user action with the key board (key events) or with the mouse (mouse events) can be reacted to using scripts assigned to event handling attributes of the control-defining elements.

User action with the keyboard or the mouse are handled by attribute handling events that can be used on almost all elements, even outide a form. These attributes are described as common attributes -- please click here to show them.

Attributes specifically used with form controls are:

ATTRIBUTE	When activated
`onfocus`	The control gets focus
`onblur`	The control loses focus
`onselect`	Used with a text or text area field - data in the control is selected by the user
`onchange`	Used with a text or text area filed - data in the control is changed by the user
`onsubmit`	Used in a FORM element - the SUBMIT key is clicked
`onreset`	Used in a FORM element - the RESET key is clicked

3. SYNTAX

3.0 The FORM element

<FORM action=uri method="{GET|POST}" other-attributes >
    normal BODY contents
    <LABEL>text</LABEL>  <INPUT type="xxx" other-atributes >
    <LABEL>text</LABEL>  <TEXTAREA>text-contents</TEXTAREA>
    <BUTTON type="xxx" name="name" > [<IMG server-side-image>] </BUTTON>
    <SELECT name="menu-name" size="n" "other-attributes">
        <OPTION label="short-label" "other-attributes">longer-label<</OPTION>
        <OPTGROUP label="text" [disabled]>
           <OPTION ... >
        </OPTGROUP>
    </SELECT>
    <FIELDSET>
       character-data
       <LEGEND>inline-text</LEGEND>
       normal-flow
    </FIELDSET>
</FORM>

3.0.1 FORM attributes

Specific attributes of the FORM element are:

action="uri" specifies the URI of a processing program. An example is:

action="http://www.hatayservices.com:8080/appl/servlet/MyServlet"

method="{get|post}" specifies the HTTP method to be used to submit the form data An example is:

method="POST"

name="string" defines the form name. An example is:

name="DataEntry"

onsubmit="script" specifies a script to be run when the form is submitted. An example is:

onsubmit="logMessage='Form submitted'"

onreset="script" specifies a script to be run when the form is reset. An example is:

onreset="logMessage='Form reset'"

enctype="type" specifies the MIME content type of the submitted data An example is:

enctype="application/x-www-form-urlencoded"

accept="types" specifies a list of content-types that the processing program can accept An example is:

accept="image/gif,image/x-xbitmap,image/jpeg,application/msword"

accept-charset="list" specifies a list of character sets that the processing program can accept. An example is:

accept-charset="ISO-8859-1,UTF-8"

3.0.2 FORM contents

A <FORM> element can contain text interspersed with the following elements:

INPUT

which defines one of these controls:

.	a single line text input control (type="TEXT")
.	a password input control (type="PASSWORD")
.	a checkbox control (type="CHECKBOX")
.	a radio button control (type="RADIO")
.	a submit control (type="SUBMIT")
.	a submit control with an image on its face (type="IMAGE")
.	a reset control (type="RESET")
.	a push button to run a script(type="BUTTON")
.	a hidden control (type="HIDDEN")
.	a file select control (type="FILE")

TEXTAREA

which defines a multi-line text input control

BUTTON

which can define one of the following controls:

.	a submit button (type="SUBMIT")
.	a reset button (type="RESET")
.	a push button (type="BUTTON")

SELECT

which defines a menu with items to select from

.	each item in the menu is defined by an OPTION element in the SELECT element contents
.	items can be grouped in the contents of a OPTGROUP element

Other elements that can be set in the contents of the SELECT elements are:

LABEL	which displays a label for certain types of controls
FIELDSET	defines a group of controls
LEGEND	defines the caption for a FIELDSET group

3.1 The INPUT element

The type attribute of the INPUT element determines the type of control created by the element.

3.1.0 INPUT types

TEXT type (type="text")

<FORM>Data input: <INPUT type="text" name="sample" value="initial"></FORM>

The TEXT type INPUT creates a single line text input control. When submitted, the control current value is sent to the processing program, as a pair control-name=value. This value is:

-	initially, the value specified by the value attribute -- this attribute is optional; if not present, the initial value is empty
-	thereafter, it is composed of the characters entered by the user

PASSWORD type (type="password")

<FORM>Password: <INPUT type="password" name="sample" value="initial"></FORM>

The text the user types in is not readable; but it becomes the value of the control and is sent when the form is submitted.

CHECKBOX type (type="checkbox")

<FORM>Check here: <INPUT type="checkbox" name="sample" value="initial">

A CHECKBOX is a toggle that switches on and off as the user clicks on it; usually, the "ON" or "checked" state is indicated by a check or a cross mark, the "OFF" or "unchecked" state by the control being blank.
The "name" and "value" attributes must be used to specify the control-name and the value of the CHECKBOX. Multiple CHECKBOX can share the same name; values should be different.
When the form is submitted, the control-name=value pairs of all checked CHECKBOX elements are sent to the processing program. If no value is specified, then the names must be different and all checked controls have their information sent as a control-name=on pair, where 'on' appears as is.

RADIO type (type="radio")

<FORM>Choose one:<br> Choice-1: <INPUT type="radio" name="sample" value="value-1" check> Choice-2: <INPUT type="radio" name="sample" value="value-2"> </FORM>

A RADIO button is a round shaped toggle that switched on and off as the user clicks on it; all of the RADIO elements having the same name (defined by the "name" attribute) make up a group in which only one button can have the "ON" state. Normally, in the inital state, one of the button is defined as being "ON" ("check" attribute present); otherwise, the resulting state is up to the user agent (the browser).
The "name" and "value" attributes must be used to specify the control-name and the value of the RADIO button.
When the form is submitted, the control-name=value pair of the checked RADIO button is sent to the processing program.

SUBMIT type (type="submit")

<FORM>Click here to submit: <INPUT type="submit" name="sample" value="initial"></FORM>

One or more SUBMIT buttons can be created in a FORM element. The label shown on the button is defined by the "name" attribute. A click on a submit button causes the form to be submitted to the processing program specified in the "action" attribute.
A SUBMIT button can also be created by a BUTTON element. The W3C recommendation on HTML 4 suggests that buttons created by an INPUT element be "flat" whereas those by a BUTTON element be rendered with relief, and show an up/down motion when clicked.
The control-name=value pair of the clicked SUBMIT button is sent along with the other submitted data.

RESET type (type="reset")

<FORM>Click here to reset: <INPUT type="reset" name="sample" value="initial"></FORM>

One or more RESET buttons can be created in a FORM. The label shown on the control is defined by the "name" attribute. A click on a RESET button causes all the controls to return to their initial values A RESET button can also be created by a BUTTON element. The W3C recommendation on HTML 4 suggests that buttons created by an INPUT element be "flat" whereas those by a BUTTON element be rendered with relief, and show an up/down motion when clicked.

IMAGE type (type="image")

<FORM><INPUT type="image" name="sample" value="initial" src="../Images/manitoba-rose.art" width="100" class="white"> The image is scaled using the width attribute (height is adjusted accordingly)</FORM>

An INPUT element with the "IMAGE" type creates a submit button decorated with an image. The image is identified by the src atribute. The button reacts as a submit button and a sensitive server side image, but no "ismap" attribute is needed; when the user clicks on the image:

- the form is submitted

information from the image button are the x and y pixel coordinates of the clicked point (the origin of the coordinates is at the upper left corner of the button, the x-axis points to the right, the y-axis, downward, in the form:

. name.x=x-coordinate

. name.y=y-coordinate

where "name" is the control-name as specified by the INPUT element name attribute.
The ILLFormImageButton shows an example of image buttons defined with both the INPUT and the BUTTON elements.

BUTTON type (type="button")

<FORM>Click here to submit: <INPUT type="button" name="sample" value="initial"><FORM>

An INPUT element with the "BUTTON" type creates a PUSH button. A PUSH button is usually associated with scripts (through event attributes such as onclick, ondblclick, onmouseup, etc...); when the button is clicked, the associated scripts are run.

HIDDEN type (type="hidden")

<FORM> <INPUT type="hidden" name="sample" value="initial"> <font color="red">Hidden control here</font> </FORM>

An INPUT element with the "HIDDEN" type creates a HIDDEN control. Such a control is not visible, but its value is sent to the processing program, along with other data when the FORM is submitted. The button initial value is set by the "value" attribute; thereafter, it can be modified by a script. When the form is submitted, information sent from the button is in the usual form of the pair control-name=value.

FILE type (type="file")

<FORM><INPUT type="file" name="sample" value="initial"></FORM>

The "FILE" type INPUT element creates a file select control, as seen just above.
The current value of the control (i.e. the string assigned to its value attribute) is the path name of a file on the client side. It can be assigned initially (by setting value="..." in the HTML code). Anyway, you can enter it manually.

The W3C recommendation is not specific on the subject. In the market place two of the most widely used browsers, the Internet Explorer and the Netscape Navigator, set up a browse button that the user can use to browse his local directory tree in order to find the desired file. Please click the 'Browse' button above to see how it works.

When the form is submitted, the contents of the file is sent to the server as part of the control value, with the name attribute the corresponding control-name (along with data from the other controls, as usual).
On the server side, there is some processing to allow access to the received file contents. How this is done depends on the processor called to receive the submitted message.

3.1.1 INPUT attributes

Some of the usual attributes of the INPUT element are:

-	type	`type="token"` - Required one of the types `text \| password \| checkbox \| radio \| submit \| reset \| image \| button \| hidden \| file`
		Sets the type of the INPUT control
-	name	`name="string"` - Required: a character string - specifies the control name - this is part of the information submitted from the control.
-	value	`value="string"` - Required- for types CHECKBOX and RADIO - Optional for other types - initial value of the control
-	checked	`check` - no explicit value - Used with the CHECKBOX and RADIO types - marks the control as initially checked (or "ON")
-	size	`size="n"` - an integer that specifies the visible size of the control - this size is expressed as
		. a number of characters for the TEXT and PASSWORD type controls
		. a number of pixels for the other types
-	maxlength	`maxlength="n"` - an integer that specifies the maximum number of characters contained in a TEXT or PASSWORD type control - if the number of characters is larger than the defined size, a scroll bar is provided.
-	src	`src="uri"` - image URI For image types: specifies the URI of the image to decorate the button - the width and height attributes can be used to scale the image ; if only one of the attribute is used, the corresponding dimension is scaled to the specifies size, the other is adjusted to preserve the dimensions porportion
-	alt	`alt="string"` - Used with the src attribute - specifies a fall-back information to display if the image as identified by the src attribute cannot be rendered
-	usemap	`usemap="#id"` Map ID preceded by a # sign Used with the src attribute - sets the control as a client-side image
-	ismap	`ismap` - no explicit value Used with the src attribute - sets the control as a server side image - this attribute is not necessary since this is the default option
-	disabled	`disabled` - no explicit value - marks the control as disabled. More...
-	readonly	`readonly` - no explicit value - when set, prevents the control value from being modified. More...
-	tabindex	`tabindex="integer"` - an integer that sets the tabbing order of the control
-	accesskey	`accesskey="character"` - Assigns a one character key to the control.
-	onclick	`onclick="script"` - script to be run when the control is clicked
-	ondblclick	`ondblclick="script"` - script to be run when the control is double-clicked
-	onfocus	`onfocus="script"` - script to be run when the control gets focus
-	onblur	`onblur="script"` - script to be run when the control loses focus
-	onselect	`onselect="script"` - script to be run when some text is selected in the control
-	onchange	`onchange="script"` - script to be run when the control value is manually changed
-	accept	`accept="content-type list"`used in a file type element - specifies a comma separated list of content-types acceptable by the server which is to receive the file content; the browser is expected to give a warning if the user chooses a file of a not-acceptable type.

Other permissible attributes are:

-	id	id="name" - assigns an ID to the control - More...
-	class	class="cdata-list" - assigns the control to a class - More...
-	lang	lang="languageCode" - speficifes the language used in the control - More...
-	dir	dir="LTR\|RTL" specifies the reading direction of the language, from Left to Right, or from Right to left - More...
-	title	title="text" - gives the control a "title" More...
-	style	style="style" specifies style information for the control - More...

other event-handling attributes More... -- a complete description of these is to be found in the Hatay Services JavaScript document

3.1.2 INPUT contents

The INPUT element has NO contents (ending tag not permitted)

3.2 The TEXTAREA element

<FORM>
<TEXTAREA rows="3" cols="60" name="TEXT">Initial value</TEXTAREA>
</FORM>

The area is allocated 3 rows of 60 characters each:

-	When the number of characters on a line reaches 60, a new line is automatically entered
-	More than 3 lines of data can be entered; if the number of line exceeds 3, a vertical scroll bar is created

3.2.1 TEXTAREA attributes

Specific attributes of the TEXTAREA element are:

-	name	`name="string"` - required: - specifies the name of the control - this is part of the information submitted from the control.
-	rows	`rows="n"` - integer - required - specifies the number of visible rows; if more rows are entered, a scroll bar is created (or enabled if it already existed) to make them accessible
-	cols	`cols="n"` - integer - required - number of characters per line; when the number of characters typed into a line reaches this limit, a new line is automatically created
-	disabled	`disabled` - no explicit value - marks the control as disabled. Click here for more...
-	readonly	`readonly` - no explicit value - when set, prevents the control value from being modified. More...
-	tabindex	`tabindex="integer"` - an integer that sets the tabbing order of the control
-	accesskey	`accesskey="character"` - Assigns a one character key to the control.
-	onclick	`onclick="script"` - script to be run when the control is clicked
-	ondblclick	`ondblclick="script"` - script to be run when the control is double-clicked
-	onfocus	`onfocus="script"` - script to be run when the control gets focus
-	onblur	`onblur="script"` - script to be run when the control loses focus
-	onselect	`onselect="script"` - script to be run when some text is selected in the control
-	onchange	`onchange="script"` - script to be run when the control value is manually changed

Other permissible attributes are:

-	id	id="name" - assigns an ID to the control - More...
-	class	class="cdata-list" - assigns the control to a class - More...
-	lang	lang="languageCode" - speficifes the language used in the control - More...
-	dir	dir="LTR\|RTL" specifies the reading direction of the language, from Left to Right, or from Right to left - More...
-	title	title="text" - gives the control a "title" More...
-	style	style="style" specifies style information for the control - More...

other event-handling attributes More... -- a complete description of these is to be found in the Hatay Services JavaScript document

3.2.2 TEXTAREA contents

The contents of the element is its initial value.

3.3 The BUTTON element

The 3 types of button are:
- submit
- reset
- button (push button)

SUBMIT type

<FORM action="http://localhost:21000/">
<BUTTON type="submit" name="submit_Name_1" value="submit_value_1">MySUBMIT</BUTTON>
<BUTTON type="submit" name="submit_Name_2" value="submit_value_2">MySUBMIT-2</BUTTON>
</FORM>

One or more Button of the "submit" type can be created in one FORM element. The element content is displayed on the button face. When such a button is clicked, normally, the name and value of that button is sent to the processing program (with some browsers, all of the "submit" buttons names and values of are sent, making it impossible to determine which button was clicked).

RESET type

<FORM><Data input: <INPUT type="text"  name="MyText" value="initial"><br>
BUTTON type="reset" name="reset_Name" value="reset_value">MyRESET</BUTTON>
</FORM>

One or more Button of the "reset" type can be cretated in one FORM element. The element content is displayed on the button face. When such a button is clicked, all of the controls in the FORM are reset to their initial values.

BUTTON type

<FORM><BUTTON type="button" name="push_Button" value="pushed_value"
              onclick="display.value='Button clicked';">MyPUSH</BUTTON>
      <INPUT type="text" name="display">

PUSH BUTTON

A 'button' type button is used for its envent-handling attributes. Events generated by user action on the buttons activate the scripts assigned to these attributes. For instance, the onclick attribute as in the example.

3.3.1 BUTTON attributes

Some of the attributes usually associated with the BUTTON elements are:

type

type="type" - specifies the BUTTON - the possible values are:

.	submit	declares a SUBMIT button
.	reset	declares a RESET button
.	button	declares a PUSH button

- name name="cdata" - specifies the button name

- value value="cdata" - specifies the button value

- disabled disabled - no explicit value - marks the control as disabled. Click here for more...

- tabindex tabindex="integer" - an integer that sets the tabbing order of the control

- accesskey accesskey="character" - Assigns a one character key to the control.

- onclick onclick="script" - script to be run when the control is clicked

- ondblclick ondblclick="script" - script to be run when the control is double-clicked

- onfocus onfocus="script" - script to be run when the control gets focus

- onblur onblur="script" - script to be run when the control loses focus

- onkeypress onkeypress="script" - the assigned script is run when a key on the keyboard is pressed while the button has focus

Other attributes are

-	id	id="name" - assigns an ID to the control - More...
-	class	class="cdata-list" - assigns the control to a class - More...
-	lang	lang="languageCode" - speficifes the language used in the control - More...
-	dir	dir="LTR\|RTL" specifies the reading direction of the language, from Left to Right, or from Right to left - More...
-	title	title="text" - gives the control a "title" More...
-	style	style="style" specifies style information for the control - More...

other event-handling attributes More... -- a complete description of these is to be found in the Hatay Services JavaScript document

3.3.2 BUTTON contents

The W3C HTML 4.01 specifications do not define the role of the BUTTON element contents in an obvious way.

With Internet Explorer 6.0, these, not the value attribute value make up the value of the button, which is displayed on the button face, and transmitted on submission, in the control-name=value pair as the information from the button.

With Nestcape Navigator 7.1, the contents of the BUTTON element constitute the label displayed on the button face, whereas the value of the value attribute is transmitted in the control-name=value pair as the information from the button.

3.3.3 Image buttons

Submit buttons can be made to show an image on their face. This is achieved by including an IMG element in the contents of the BUTTON element.

When the button is clicked, the form is submitted. As per the HTML 4.01 standard, the pixel coordinates of the point where the button is clicked are sent to the application along with the data from the other controls. But this is not always done so.

The ILLFormImageButton shows an example of image buttons defined with both the INPUT and the BUTTON elements.

3.4 The SELECT element

<SELECT name="menu_name" size="n" "other-attributes">
    <OPTION label="short-label" value="short-label" "other-attributes">longer-label<</OPTION>
    <OPTGROUP label="text" [disabled]>
       <OPTION ... >
    </OPTGROUP>
</SELECT>

The SELECT element defines a menu that contains a number of items. An item is defined by an OPTION element included in the contents of the SELECT element.

Menu items can be grouped by enclosing their defining OPTION elements in the contents of an OPTGROUP element included in the SELECT contents.

3.4.1 SELECT attributes

Some commonly used attributes of the SELECT element are:

-	name	name="cdata" - specifies the name of the control
-	size	size="number" - specifies the number of lines permanently visible in the menu -- if omitted, the number is 1. Usually, the user can display more of the menu by clicking on some widget
-	multiple	multiple - when present, indicates that more than 1 item can be selected -- if omitted, only one item can be selected You select an item of the menu by clicking on it, or by navigating to it using the TAB key In the Windows system, when you click on an item, the previously selected are de-selected; in order to select more than one item (when the multiple attribute makes it possible), you hold down the 'CTRL' key while clicking on the different items to select; you de-select a selected item by clicking on it
-	tabindex	`tabindex="integer"` - an integer that sets the tabbing order of the control
-	disabled	`disabled` - no explicit value - marks the control as disabled. Click here for more...
-	onclick	`onclick="script"` - script to be run when the control is clicked
-	ondblclick	`ondblclick="script"` - script to be run when the control is double-clicked

Other permissible attributes are:

-	id	id="name" - assigns an ID to the control - More...
-	class	class="cdata-list" - assigns the control to a class - More...
-	lang	lang="languageCode" - speficifes the language used in the control - More...
-	dir	dir="LTR\|RTL" specifies the reading direction of the language, from Left to Right, or from Right to left - More...
-	title	title="text" - gives the control a "title" More...
-	style	style="style" specifies style information for the control - More...

other event-handling attributes More... -- a complete description of these is to be found in the Hatay Services JavaScript document

When no multiple attribute is specified only one option is selected in the SELECT menu. As you click on a new option, the previously selected option is de-selected. The number of lines permanently visible from the menu is as specified by the size attribute; when this attribute is omitted its value is defaulted to 1.

When multiple attribute is specified the menu can be displayed differently depending on the browser. When no size attribute is specified, a number of lines are made permanently visible. When a size attribute is specified, Internet Explorer renders it well. The behaviour of Netscape Navigator 7.1 is still somewhat erratic.

3.4.2 SELECT contents

A SELECT element contains at least one OPTION element. The OPTION elements can be enclosed within OPTGROUP elements to form a group.

    <SELECT attributes
        <OPTION attributes> contents </OPTION>
        ...
        <OPTGROUP attributes>
           <OPTION attributes>
           ....
        </OPTGROUP>
    </SELECT>

3.5 The OPTION element

3.5.1 OPTION attributes

Some commonly used attributes of the OPTION element are:

-	selected	selected - when present, causes the OPTION control to be initially selected - if the multiple attribute is not present in the enclosing SELECT element, only one OPTION element can have the selected attribute.
-	value	value="cdata" - specifies the value of the control
-	disabled	disabled - causes the control to be initially disabled
-	label	label="text" - defines the short label of the option
-	onclick	`onclick="script"` - script to be run when the control is clicked
-	ondblclick	`ondblclick="script"` - script to be run when the control is double-clicked

Normally: - the contents of the OPTION element defines the option long name
- the value of the label attribute defines the option short name
With both the Netscape Navigator and the Internet Explorer browsers, the element contents define the option long name, and the value attribute value, the short name.

Other permissible attributes are:

-	id	id="name" - assigns an ID to the control - More...
-	class	class="cdata-list" - assigns the control to a class - More...
-	lang	lang="languageCode" - speficifes the language used in the control - More...
-	dir	dir="LTR\|RTL" specifies the reading direction of the language, from Left to Right, or from Right to left - More...
-	title	title="text" - gives the control a "title" More...
-	style	style="style" specifies style information for the control - More...

other event-handling attributes More... -- a complete description of these is to be found in the Hatay Services JavaScript document

The value attribute when specified defines a short name for an option. Otherwise the long name is defined by the contents of the element.

3.5.2 OPTION contents

The contents of the OPTION element make up the option long name.

3.6 The OPTGROUP element

3.6.1 OPTGROUP attributes

Some commonly used attributes of the OPTGROUP element are:

-	label	label="text"
-	disabled	disabled - causes the control to be initially disabled
-	onclick	`onclick="script"` - script to be run when the control is clicked
-	ondblclick	`ondblclick="script"` - script to be run when the control is double-clicked

Other permissible attributes are:

-	id	id="name" - assigns an ID to the control - More...
-	class	class="cdata-list" - assigns the control to a class - More...
-	lang	lang="languageCode" - speficifes the language used in the control - More...
-	dir	dir="LTR\|RTL" specifies the reading direction of the language, from Left to Right, or from Right to left - More...
-	title	title="text" - gives the control a "title" More...
-	style	style="style" specifies style information for the control - More...

other event-handling attributes More... -- a complete description of these is to be found in the Hatay Services JavaScript document

3.6.2 OPTGROUP contents

An OPTGROUP element contains a number of OPTION elements:

  <OPTGROUP attributes>
     <OPTION attributes> ... </OPTION>
     <OPTION attributes> ... </OPTION>
     ...
  </OPTGROUP>

3.7 The FIELDSET element

The FIELDSET element encloses a number of HTML elements in its contents. On the presented HTML page, it is rendered as a bordered frame enclosing the controls defined by these elements

3.7.1 FIELDSET attributes

No attribute

3.7.2 FIELDSET contents

The FIELDSET element contains, in any order:
- an optional LEGEND element
- ordinary HTML text
- a number of HTML elements.

3.8 The LEGEND element

The LEGEND element defines a caption that is displayed on top of the FIELDSET frame.

3.8.1 LEGEND attributes

Some commonly used attributes of the OPTION element are:

-	align	align="option"- deprecated - the possible options are: - 'top' - the caption is displayed on the top border of the FRAMESET frame - 'bottom' - the caption is on the bottom border of the FRAMESET frame - 'left' - the caption is on the left border of the FRAMESET frame - 'right' - the caption is on the right border of the FRAMESET frame These are the normal prescriptions. With the Netscape Navigator and the Internet Explorer, the 'right' option aligns the caption on the right of the top border. The other options have no effect. Obviously, this may change.
-	accesskey	`accesskey="character"` - Assigns a one character key to the control.
-	onclick	`onclick="script"` - script to be run when the control is clicked
-	ondblclick	`ondblclick="script"` - script to be run when the control is double-clicked

Other permissible attributes are:

-	id	id="name" - assigns an ID to the control - More...
-	class	class="cdata-list" - assigns the control to a class - More...
-	lang	lang="languageCode" - speficifes the language used in the control - More...
-	dir	dir="LTR\|RTL" specifies the reading direction of the language, from Left to Right, or from Right to left - More...
-	title	title="text" - gives the control a "title" More...
-	style	style="style" specifies style information for the control - More...

other event-handling attributes More... -- a complete description of these is to be found in the Hatay Services JavaScript document

3.8.2 LEGEND contents

The contents constitute the caption displayed on the FRAMESET frame.

3.9 The LABEL element

3.9.1 LABEL attributes

Defines a label for a form-control.
Some commonly used attributes of the LABEL element are:

-	for	for="id" - identifies a control by its ID (id attribute value) - this is the control to which the label is attached
-	accesskey	`accesskey="character"` - Assigns a one character key to the control.
-	onclick	`onclick="script"` - script to be run when the control is clicked
-	ondblclick	`ondblclick="script"` - script to be run when the control is double-clicked
-	onfocus	`onfocus="script"` - script to be run when the control gets focus
-	onblur	`onblur="script"` - script to be run when the control loses focus

Other permissible attributes are:

-	id	id="name" - assigns an ID to the control - More...
-	class	class="cdata-list" - assigns the control to a class - More...
-	lang	lang="languageCode" - speficifes the language used in the control - More...
-	dir	dir="LTR\|RTL" specifies the reading direction of the language, from Left to Right, or from Right to left - More...
-	title	title="text" - gives the control a "title" More...
-	style	style="style" specifies style information for the control - More...

other event-handling attributes More... -- a complete description of these is to be found in the Hatay Services JavaScript document

3.9.2 LABEL contents

3.10 General use attributes

Presented here are the attributes of general use:
- attributes applicable to more than one control
- attribute with a general scope extending farther than the Form controls

3.10.1 Form control attributes

These attributes are permissible in more than one control type:

disabled

disabled - no explicit value
- marks the control as disabled - the effects are:

.	the control cannot receive focus
.	the control is skipped in tabbing navigation
.	the control's data cannot be submitted

The control can be enabled by a script (this is the only way to do it -- for an example, click here).

readonly

readonly - no explicit value
- when set, prevents the control value from being modified. But the control:

.	can receive focus
.	is included in tabbing navigation
.	can be submitted if other required conditions are met

The only way to release this condition is by a script (similar to the enable/disable script)

- tabindex tabindex="number" - an integer that sets the tabbing order of the control

- accesskey accesskey="character" - Assigns a one character key to the control.

- onfocus onfocus="script" - specifies the script to be run when the control gets focus

- onblur onblur="script" - specifies the script to be run when the control loses focus

- onselect onselect="script" - used with a text type element (INPUT element with type="text" or TEXTAREA element) - specifies the script to be run when some text in the control is selected

- onchange onchange="script" - specifies the script to be run when the control value changes

Other event handling attributes

- onmouseover onmouseover="script" - specifies the script to be run when the mouse hovers over the control

- onmouseout onmouseout="script" - specifies the script to be run when the mouse leaves the control

- onmousedown onmousedown="script" - specifies the script to be run when the mouse button is pressed down, while the mouse is over the control

- onmouseup onmouseup="script" - specifies the script to be run when the mouse button is released after being pressed down, while the mouse is over the control

- onmousemove onmousemove="script" - specifies the script to be run when the mouse moves over the control

- onkeypress onkeypress="script" - specifies the script to be run when a key is pressed down, then released while the control has focus.

- onkeydown onkeydown="script" - specifies the script to be run when a key is pressed down while the control has focus

- onkeyup onkeyup="script" - specifies the script to be run when key is released after being pressed down, while the control has focus.

3.10.2 General use attributes

- id id="name" - set the ID name of the control - this name must be unique in the HTML page

- class class="cdata-list" - specifies a list of classes to which the control belongs. In the style sheet properties are set for elements of a given type that belong to a certain class. For example:
<STYLE>font.redOnYellow {color: red; background: yellow}</STYLE> <font class="redOnYellow">This text is in red characters on yellow background</font>
would set the foreground color to red, and the background color to green for 'font' elements in the class 'redOnYellow', so that the above text contained in the <font class="redOnYellow"> element will look like this:
This text is in red characters on yellow background When a list of classes is specified, the element has the combined properties of all the classes.

lang

lang="languageCode" - specifies the language in which the text contained in the control is. Examples of langage codes are:

`en`	for English
`en-us`	for American English
`fr`	for French
`de`	for German
`it`	for Italian
`zh`	for Chinese
`ja`	for Japanese

etc...

- dir dir="LTR|RTL" - specifies the reading direction of the language, either Left to Right (LTR) or Right to Left (RTL)

- title title="text" - specifies a title for the control.
Some browsers can pop up the title when the mouse hovers above the element. For example, the button below is defined by the line:
<BUTTON type="button" title="Push Button">PUSH</BUTTON>

When you let the mouse pointer hover over the button, with Internet Explorer or Netscape Navigator, you can see the title pop up.

style

style="style" - directly defines style properties of the element. An example is:

<TABLE>
  <TR><TD width="50" style="background: black; color: white;">BLACK
      <TD width="50" style="background: green; color: yellow;">GREEN
      <TD width="50" style="background: silver; color: red;">SILVER
      <TD width="50" style="background: lime; color: blue;">LIME
  <TR><TD width="50" style="background: gray; color: red;">GRAY
      <TD width="50" style="background: olive; color: white;">OLIVE
      <TD width="50" style="background: white; color: black;">WHITE
      <TD width="50" style="background: yellow; color: blue;">YELLOW
  <TR><TD width="50" style="background: maroon; color: white;">MAROON
      <TD width="50" style="background: navy; color: lime;">NAVY
      <TD width="50" style="background: red; color: white;">RED
      <TD width="50" style="background: blue; color: white;">BLUE
  <TR><TD width="50" style="background: purple; color: white;">PURPLE
      <TD width="50" style="background: teal; color: white">TEAL
      <TD width="50" style="background: fushia; color: black;">FUSHIA
      <TD width="50" style="background: aqua; color: blue">AQUA
</TABLE>

This will display as follows:

BLACK	GREEN	SILVER	LIME
GRAY	OLIVE	WHITE	YELLOW
MAROON	NAVY	RED	BLUE
PURPLE	TEAL	FUSHIA	AQUA

The style attributes define the background (back ground color) and color (letter color) properties of the TD elements, and you can see the result.

4. REFERENCES

HTML 4.01 Specifications - W3C Recommendations 24 december, 1999 - Latest version: http://www.w3.org/TR/html401

contents introduction reference index previous next