HTML GUIDE PAGE 8

INPUT TAGS FOR JAVA AND JAVASCRIPT

The final page on this introductory guide covers HTML tags that are used for user
input into Java and JavaScript files.
This section is only for those intending to move on to JavaScript later.

The information given below is enough to place the input objects onto your pages.
To learn about how to respond to the changes users make to these objects you need to read on into my JavaScript guide.

You can experiment with all of the items on this page by using Example File 7 on the examples page.

<FORM>

Before we consider the input items themselves, one important tag to look at is the <FORM> tag.

This is a very simple creature - without it none of the form objects will appear on the screen.
To use it just type in:
<FORM NAME="name">
followed by the code for your input tags, ending with the cancellation tag
</FORM>

The NAME of the form will be needed to refer to the input objects within the program that you write.

<INPUT>

The main attribute for all NAME.
This attribute is vital. Without it you have no way of referring to, and hence getting data from, the object within a script.
The name is placed in inverted commas withing the tag, like so:
<INPUT NAME="name">

Amongst all the tags, the <INPUT> tag is the most useful as it gives rise to many different TYPEs.

<INPUT NAME="name" TYPE="BUTTON" ... >

The most simplest input types is the BUTTON.
This has two main attributes: VALUE and onClick
but like all of these objects, you can insert a whole host of other
event handling attributes which we will come across later.

The onClick attribute defines the function that is to be called when someone clicks on the button.
We will not go into that here.

The VALUE of the button is reflected on screen as the text shown on the button:
<INPUT NAME="Button1" TYPE="BUTTON" VALUE=" I do nothing! ">

<INPUT NAME="name" TYPE="TEXT" ... >

The TEXT input object allows text input from users.
This input tag specifies two extra features :-

The SIZE of the text object reflects the width of the text line in characters.
<INPUT NAME="Smalltext" TYPE="TEXT" SIZE=5>

The VALUE gives the text field a default text string to display.
<INPUT NAME="Predtext" TYPE="TEXT" SIZE=12 VALUE=" Default text">

<INPUT NAME="name" TYPE="CHECKBOX" ... >

The CHECKBOX is a very simple input type. It allows users to input a simple yes or no decision by clicking the box on or off.

For example, you could ask the user if they would like the results in large text.
<INPUT NAME="Largetext" TYPE="CHECKBOX">

If an option is thought to be popular, you can make it automatically selected by inserting CHECKED into the tag.
<INPUT NAME="Normaltext" TYPE="CHECKBOX" CHECKED>

<INPUT NAME="name" TYPE="HIDDEN" ... >

The HIDDEN object is not really an input object. It is not displayed on the page, so users can not access or change its value. However, it can be used to store values, if for some reason you can not use the original object.
For example, if a text value is to be changed and then validated, you can store the old value in a hidden object, check the new text when the user enters it and if it is invalid, you can restore the old value back to the original text object.
The HIDDEN object has the same attributes as the TEXT input type.

<INPUT NAME="name" TYPE="RADIO" ... >

The RADIO input type is a further extension of the CHECKBOX.
Its use is slightly undermined by the SELECT object, since the latter is more efficient.

The RADIO input consists of several checkboxes, only one of which may be selected at any one time, thus giving the user a list of options from which to choose.
Notice that all the RADIO tags have the same name, this links them together.

<SELECT>

The <SELECT> object serves the same purpose as the RADIO input item, that is (as you may have guessed) it allows users to select an item from a given list.

To begin listing the items you need to create a select object on screen.
This is done using the <SELECT> tag:

<SELECT NAME="name">
</SELECT>

Items are now inserted into this list via the <OPTION> tag.

<OPTION VALUE="value"> option name
Where value is the value read in by the program when it accesses the users chosen item and option name is the text shown on screen when the user pulls down the option list.
As with the RADIO type, you can defaultly select an item by inserting the attribute SELECTED into one of the <OPTION> tags.

<HTML> <HEAD> <TITLE> Select Object Example </TITLE> </HEAD> <BODY> <FORM NAME="SelForm"> <SELECT NAME="SelTopping"> <OPTION VALUE="CT">Cheese & Tomato <OPTION VALUE="PP">Pepperomi <OPTION VALUE="PA" SELECTED>Pineapple <OPTION VALUE="SS">Spam & Sprouts </SELECT> </FORM> </BODY> </HTML>

Cheese & Tomato Pepperomi Pineapple Spam & Sprouts

You can try your hand at editing this example in Example File 7 on the examples page.

<TEXTAREA>

The last input item we will discuss here is the <TEXTAREA>.
It is another text input object, and allows multiple rows for text input.

It is a container tag, any text written between the tags is taken as default text for the object.

The area size is defined in ROWS and COLS

<HTML> <HEAD> <TITLE> Text Area Example </TITLE> </HEAD> <BODY> <FORM NAME="TextForm"> <TEXTAREA NAME="MainText"          ROWS=7 COLS=20> Default text set by programmer. </TEXTAREA> </FORM> </BODY> </HTML>

Default text set by programmer.

You can specify a HARD WRAP within the <TEXTAREA> tag, which disables the horizontal scrolling function.

<HTML> <HEAD> <TITLE> Text Area Example </TITLE> </HEAD> <BODY> <FORM NAME="TextForm"> <TEXTAREA NAME="MainText"          ROWS=7 COLS=20 WRAP=HARD> Default text set by programmer. </TEXTAREA> </FORM> </BODY> </HTML>

Default text set by programmer.

Dont forget to experiment with these tags using Example File 7 on the examples page.