Module 8 - Page 09 - The INPUT Tag: IMAGE and BUTTON

The INPUT Tag: IMAGE and BUTTON

Having dealt with the most important members of the INPUT tag family, we now turn to two lesser, but no less useful, variations, IMAGE and BUTTON. The IMAGE INPUT allows us to substitute a GIF or JPEG for a regular submit button, while the BUTTON INPUT allows us to create a submit-like button that does nothing at all. The uses for the IMAGE INPUT seem obvious, but the uses for the BUTTON INPUT are only open to those who use JavaScript scripts to add functionality to plain HTML elements.

Image INPUT

The image INPUT requires that the TYPE attribute for the INPUT tag be set equal to "image". In addition to the TYPE attribute, you also need to use the SRC, WIDTH, and HEIGHT attributes of the IMG tag.

Example (abbreviated):

<input type="image" src="./graphics/goButton.gif" width="50" height="50" />

Example (in context):

<html>
<head>
<title>Example Form</title>
</head>
<body>
<form>

<p>Search Keywords:<br />
<input type="text" size="40" name="searchKeywords" /></p>

<input type="image" src="./graphics/goButton.gif" width="50" height="50" />

</form>
</body>
</html>

Here is the above example displayed. As you can see in the example, the new image INPUT has a hot-link border around it (in most browsers), which is not usual on the Web today. To prevent the appearance of the border, you must set the BORDER attribute of the INPUT tag equal to "0" (zero).

Example (abbreviated):

<input type="image" src="./graphics/goButton.gif" width="50" height="50" border="0" />

Example (in context):

<html>
<head>
<title>Example Form</title>
</head>
<body>
<form>

<p>Search Keywords:<br />
<input type="text" size="40" name="searchKeywords" /></p>

<input type="image" src="./graphics/goButton.gif" width="50" height="50" border="0" />

</form>
</body>
</html>

Here is the above example displayed. Being able to substitute a graphic of your own design for the submit button is very helpful to the designer. The image INPUT may NOT be used as a substitute for anything other than the submit button, however.

Button INPUT

The button INPUT is coded identically to the submit and reset buttons; the only difference is that the button INPUT has no specific function, but acts as a generic button for use in conjunction with a script.

Example:

<form>
<input type="button" value="Do-Nothing Button" />
</form>

Displayed:

In addition to the button INPUT, there are two final variations of the INPUT tag, FILE and HIDDEN. The file INPUT allows the programmer to create a text field which may be used to find and submit files to a server. The hidden INPUT is invisible to the user entirely and has many uses. For more information on INPUT tags of type FILE and HIDDEN, read "HTML and XHTML: The Definitive Guide", section 9.5.1.3 and 9.5.5, pp.321-322 and pp.328-329. I'm not going to go into these inputs within this class because of the esoteric nature of their function.

Main Menu