jim.shamlin.com

Form Elements

A form element is an input "widget" (a text field, a checkbox, etc.) that appears within a Web page. The separate elements are documented individually, and the present document contains general information.

---

Basics

There is no HTML code that is common to all form elements, though it's worth noting that most are implemented using <INPUT TYPE="type"> - with the exception of text areas, selectors, and one species of HTML button (the last of which isn't presently documented in much detail.

---

Usage

There's much to be said about the "proper" usage of form elements - instances where one element should be preferred over another for usability's sake, but the present documentation is (mostly) technical, so usability is out of scope (though I may stray into it from time to time).

---

Processing

No metadata about all elements is passed to the server for processing, only the value of each element.

If two or more elements have the same name, the Web browser decides how to resolve the conflict, and there is no standard solution. Some browsers append all values to a single attribute, others will use only one of their values.

There also does not seem to be any standard logic for the order in which name=value pairs are assembled.

---

HTML Attributes

Most form elements have the attributes listed below:

Typical:

• NAME - The name of the element, to be passed to the server when the form is submitted.
• VALUE - The value to be passed to the server, generally a default value the user may alter.
• ID - An ID to make the element accessible to JavaScript.

Unusual:

• STYLE - CSS Style declarations can be specified, but it's unusual (and inadvisable) to goof with the appearance of form elements.
• CLASS - A CSS "class" to assign multiple style declarations to specific instances. Ditto.

---

JavaScript

Most form elements have the properties, methods, and event handlers listed below:

Properties

form - An object reference to the form to which the element belongs.

type - Returns the TYPE attribute of any element that is implemented using the INPUT tag.

name - Returns the NAME attribute of the element.

id - Returns the ID attribute of the element.

class - Returns the class attribute of the element.

style - Accesses the style properties of the element.

disabled - Indicates whether the element has been disabled.

Methods

• focus() - Places focus on the element.
• blur() - Removes focus from the element.
• handleEvent(event) - Assigns an event handler to the element.

Event Handlers

• onfocus - Takes effect when the user places focus on the element.
• onblur - Takes effect when the user removes focus on the element.
• onchange - Takes effect when the focus is removed from the element, but only if the value was altered

---

Misc Notes

Some Web browsers will refuse to render form elements properly if they are not contained within a defined form - so it's a good practice to ensure all elements are enclosed within FORM tags.