<input type="text" size="20" name="textbox" value="Text Box">

input { font-family: arial,helvetica,sans-serif; color: #FF0000;}

input.small, select.small { font-family: arial,helvetica,sans-serif; font-size: 75%; color: #0000FF;}

<input type="password" size="20" name="password" value="Password">

input { font-family: arial,helvetica,sans-serif; color: #FF0000;}

input.small, select.small { font-family: arial,helvetica,sans-serif; font-size: 75%; color: #0000FF;}

Example of a multiple line input box (Text Area)

Example of a multiple line input box (Text Area)

<textarea name="areabox" rows="3" cols="20">

textarea { font-family: "andale mono", "monotype.com", "courier new", monospace; color: #00FF00;}

textarea.small { font-family: "andale mono", "monotype.com", "courier new", monospace; font-size: 75%;color: #0000FF;}

Example of a multiple line input box (Text Area)

</textarea>

The initial value is set by the text between the start tag and end tag, the size is represented in rows (3) and columns (20).

1 2 3

<input type="checkbox" name="check1" value="chosen">1

<input type="checkbox" name="check2" value="chosen">2

<input type="checkbox" checked name="check3" value="chosen">3

The value chosen is the value of the parameter if it is checked; if the checkbox is NOT checked, then the entire parameter is simply NOT passed to the web server.

Notice that the third checkbox is specified to be initially checked.

1 2 3

<input type="radio" checked name="optiongroup" value="1">1

<input type="radio" name="optiongroup" value="2">2

<input type="radio" name="optiongroup" value="3">3

Notice that option 1 is the option that is initially chosen (checked).

Option 1 Option 2 Option 3 Option 4

<select name="combobox" size="1">

<option value="1">Option 1</option>

<option value="2">Option 2</option>

<option selected value="3">Option 3</option>

<option value="4">Option 4</option>

</select>

(N.B. If we did not specify a value within the <option> tag, the value would have been the string 'Option 2')

The size parameter of the <select> tag determines whether or not the options are presented as a combo box or a list box, i.e. 1 = Combo Box and >1 = List box of that size.

The initial option selected here has been set to 'Option 3'

Option 1 Option 2 Option 3 Option 4

<select name="listbox" multiple size="4">

<option selected value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option selected value="4">Option 4</option>

</select>

(N.B. A drop down combo box (i.e. size=1) which is set as a multiple selection automatically becomes a list box)

To make multiple selections click the mouse while holding the ctrl key. (or hold the shift key to select a group from the previous selected option)

<input type="submit" name="pressed" value="Submit 1">

<input type="submit" name="pressed" value="Submit 2">

<input type="reset">

<input type="image" name="pressed" src="/dissertation/week3/button.gif">

This example demonstrates how to generate an additional parameter (named pressed) to distinguish between which button was used to submit the form. However, if we only require one submit button, we can use the condensed form of this statement, <input type="submit">; this also gives the added benefit of enabling the form to be submitted when the user presses the return key.

image The image input type submits a form (as above) however the button face contains an image source rather than a value. When the user clicks on the image two parameters are passes, pressed.x and pressed.y and their respective 'click position' values rather than pre-sets values as used with the submit buttons above.

reset This button type simply un-does any changes the user may have made to the form by resetting the form controls to their respective initial states.