LIS 523/5 - Forms

To make use of form objects in an HTML file, you must define a part of it as a form using the form and /form tags; you can then place form objects within the form.

Generally, any form object may have a name attribute, which allows it to be referenced in scripts, and onBlur and onFocus event handlers, which are called when the object loses and gains focus, through the user's either clicking the mouse or pressing the tab key; other attributes depend on the type of object.

When designing forms, note that refreshing or reloading the page in the browser does not update some properties of form objects. Instead, you need to request the page again explicitly by URL or by opening it as a file.

Buttons

    <form>
    <input type="button" value="# of forms"
    onClick="alert(document.forms.length)">
    </form>

For Reset and Submit buttons, two special types of form objects, with type equal to "reset" and "submit" and no onClick, are defined. Using a Submit button requires that the form have an action attribute; the value of this attribute is a URL. The URL could just be that of another HTML file, in which case, if the method attribute is set to "get" (the default), clicking on the Submit button would call up that file with any data from the form being appended to the URL following a question mark; the question mark plus form data would be the value of the JavaScript variable window.location.search and could be used to provide dynamic content in the new page. Another alternative is for the URL to be that of a server-side script to which the form data will be passed for processing and which will produce a Web page or graphic in return. Yet another possibility is a mailto: URL, for which clicking on the Submit button will call up the default mail client; if the method attribute is set to "post", the form's data will be included as an attachment.

Text

Multi-line text objects, on the other hand, are defined using the textarea and /textarea tags, with the default text, if any, coming between the tags. The textarea tag may have rows and cols attributes. The text wraps automatically in recent versions of all graphical browsers.

Text objects provide a simple way of displaying responses to user input on the same page. You can prevent the user from editing the contents of a response by using "blur()" as the text object's onFocus event handler. (This also makes copying the response impossible in Netscape Navigator and Firefox.) For example, clicking the button in the following form causes a random number to be displayed in the text box, and the user is unable to edit the contents.

    <form name="form4">
    <input type="button" name="randomButton" value="Random"
    onClick="form4.randomText.value=Math.random()">
    <input type="text" name="randomText" onFocus="blur()">
    </form>

A text object may have onChange and onSelect event handlers.

Selection Lists, Checkboxes, and Radio Buttons

An option tag may have a value attribute representing a value to be transmitted when the form is submitted.

The selectedIndex property of the Select object can be used in scripting to identify which choice the user has selected. The object may have an onChange event handler to respond immediately to any change in selection. The object's options property is an array of Option objects that can be modified in scripting, but the results are generally not immediately reflected in the browser view.

Select objects are a simple way of temporarily hiding possible answers in practice exams or quizzes without using scripting or additional pages. For an example, see the LIS 504 - Sample quiz, which uses code such as

    <select>
    <option>
    <option>Nominal.
    <option>Ordinal.
    </select>

A Checkbox object is defined with the input tag with type equal to "checkbox". It may have an onClick event handler if desired. In scripting, you can find out whether a checkbox is checked by using its checked property.

A Radio object is defined with the input tag with type equal to "radio". The name attribute of a Radio object is not its own unique name, but the name of the group of Radio objects to which it belongs. In scripting, to find out which of a group of radio buttons is checked, it is necessary to address the checked property of each of them, using the form document.formid.radioid[n] where n is the number of the radio button within its group (starting from 0).

Other Form Objects

1. A "hidden" object can be used to store a value to be transmitted along with other values when the form is submitted.
2. A "password" object is like a "text" object, except that its value is displayed as a series of asterisks.
3. A "file" object is also similar to a "text" object, but it adds a "Browse..." button that allows the user to seek a file in the local directories, the pathname of which will be entered as the text. If this object has a name and if the form's enctype is set to "multipart/form-data", clicking on the form's Submit button will include the file's contents in the information submitted. For security reasons, the value of a "file" object cannot be set by HTML or JavaScript code.

Home