HTML Form Components

HTML Forms are used widely on the Internet to gather information from users or adminstrators accessing the web site. This information is typically entered into a database and later retrieved in other applications. Input for information such as a name, a choices of preferences, etc. are pervasive features. Whenever you type something into an HTML web page and submit the page, it is done through an HTML form.

The HTML Form is constructed using a form element, typically like this:

<form action="a-web-server-side-script">
... form components ...
</form>

As suggested, the information entered is usually processed by a server-side program, i.e., a program running on the server where you accessed the HTML page. In contrast, JavaScript is a client-side program, namely, it runs in the browser.

The components within forms are these:

buttons: used to submit the form or execute JavaScript code.
textfields and password fields: single line inputs
check boxes and radio buttons: allow the user to say yes/no to a choice, or one of several choices. radio buttons can be used to give an exclusive choice among several possibile options
selection lists: these give a choice through a popup or scroll list
textareas: multi-line inputs

Our purpose is not to use these components within a form for server-side processing of the information, instead we simply want to use them for collecting and displaying information with JavaScript by manipulating the DOM (Document Object Model) properties of the elements.

Buttons

Buttons can be created using the input element with type attribute either submit, reset or button but we prefer to use the actual button element because it is simpler to create the button's label. When the button is used, you have to define the onclick mouse event attribute to make the button do something.

 <button onclick="">Push Me</button>

The input elements

The input element represents many diverse HTML form elements including buttons, text fields, checkboxes, etc. The type of element depends on the type attribute which is one of these values:

text, password,
checkbox, radio,
submit, reset, button (types of buttons),
file, hidden, image,

The other attributes used in input elements are these:

name: used to identify the component in the form
value: an internal value
readonly: for type text and password
size: for type text and password
maxlength: maximum number chars: type text and password
checked: for type radio and checkbox
src: for fields with images
alt: short description
usemap: use client-side image map
ismap: use server-side image map
tabindex: position in tabbing order
accesskey: accessibility key character
accept: list of MIME types for file upload

Textfields and Password fields

The most important attributes are size and value:

```
<input type="text" size="20"/>
```

<input type="text" size="20" value="YOUR NAME"/>

```
<input type="password" size="20"/>
```

Checkboxes and radio buttons

These are input elements of type checkbox or radio. They allow the user to check something, typically using the mouse. The important attributes are name and checked. The checked attribute is a boolean attribute. In order to be activated it only has to be listed among the attributes and otherwise has no particular value.

<input type="checkbox" /> 
Would you like to receive our monthly newsletter?

Would you like to receive our monthly newsletter?

<input type="checkbox" checked /> 
Would you like to receive our monthly newsletter?

Would you like to receive our monthly newsletter?

Radio Buttons create exclusive choices by using the name attribute, which is required for the radio button to function. Two or more radio buttons with the same value of the name attribute (within the same form) have mutually exclusive choices.

 <input type="radio" name="gender1" /> Male 
 <input type="radio" name="gender1" /> Female

Male Female

 <input type="radio" name="gender2" checked/> Male 
 <input type="radio" name="gender2" /> Female

Male Female

Selection Lists

Selection lists are created by the select element. They can appear as drop-down lists or scrolled lists of items. Each item in the list is specified by an option element and has a has a visible label and an underlying value. If the value is absent, it is taken to be the label.

In addition to the name attribute the key attributes are these:

size: display size; if this is 1 or it is not present, the element creates a dropdown (or, popup) selection, otherwise it is a scrolled selection
multiple: used in the select element to allow multiple selection
selected: used in an option element to indicate this element should be selected

<select>
 <option value="1">dog</option>
 <option value="2">cat</option>
 <option value="3">cow</option>
 <option value="4">pig</option>
</select>

<select size="3">
 <option value="1">dog</option>
 <option value="2">cat</option>
 <option value="3">cow</option>
 <option value="4">pig</option>
</select>

Textareas

The textarea element is used for permitting multi-line input. The key attributes are

rows: number of rows
cols: number of columns

The other attributes used are similar to those for textfields:

name, readonly, tabindex, accesskey

<textarea rows="5" cols="20"></textarea>

<textarea rows="5" cols="20">With some 
initial input</textarea>

Activation via the onclick event

Form elements are commonly processed when the user clicks a button. In the case of a button element it activates a JavaScript function specified by the onclick event. Here is the simplest example of this behavior, activating the alert function:

<button onclick="alert('button pressed')">Press Me</button>

which behaves like this:

Button as hyperlink

We can also make a button act like a hyperlink. The key idea is to use the JavaScript location object and reset the it to the target URL as follows:

<button onclick="location='http://www.google.com'">Go to Google</button>

Here is the effect:

Strictly speaking, we are using the JavaScript object

window.location

which indicates the current URL displayed by the browser.

Image as hyperlink

We can also make an image act like a hyperlink without surrounding it by anchor elements. Combining the onclick event with the onmouseover/onmouseout rollover effects used in Notes 13 we get this:

<img src="yahoo_out.gif"
     onclick="location='http://www.yahoo.com'" 
     onmouseover="src='yahoo_over.gif'" 
     onmouseout="src='yahoo_out.gif'" />

with the following effect:

Text as hyperlink

We can make simple text, surronded by a span act like a hyperlink. One missing ingredient is how to make the cursor behave differently. We can do so by setting the cursor style property as in this style rule: