Advanced Form Input Tags

Form INPUT Tags: BUTTON, IMAGE & HIDDEN Illustrated

Two additional TYPE attribute you may want to try include:

button
image
hidden

Again these are illustrated with the form code, followed by the form produced by the code.

BUTTON - The button type is intended to be a general purpose button on a Web page. This example uses the onClick javaScript event handler to perform some actions. Discussion of javaScript is beyond the scope of this course, so please just take the code on faith.

<form>

<input type="button" value="Back" onClick="history.back()">   
<input type="button" value="Top" onClick="window.location.href='#top'">   
<input type="button" value="Home" onClick="window.location.href='../index.html'">

</form >

In this example note:

When the Back button is pressed, it has the same effect as pressing the back button on your browser.
When the Top button is pressed, it acts as a hyperlink to a named location on this page top.
The Home button causes a hyperlink to my home page, in the folder one up from this folder.
The buttons are separated by 3 spaces, using the space symbol:  
Buttons are very primative, in that there is no way to change the color of the background or text.
The size of the button, adjusts to fit the text specified in the value field.
The size of font is effected by defaulty font size in your document.

IMAGE - Instead of a submit button, you can use an image to submit the data information. With an image you don't need a "submit" button because the form data is automatically sent when the user clicks on the image.

<INPUT TYPE="image" src="../images/sendpen.gif" width="90" height="80" alt="Pencil Image"> <font color="red"><b> Press the image to transmit</b></font>

</FORM>

Note: As with previous form examples, the CGI script at: http://webdevfoundations.net/scripts/formdemo.asp may not be operational. Sorry, if this is the case.

HIDDEN - Using hidden fields allows you to pass information to your CGI script or through an email message which you need, but the reader does not have to see.

<FORM ACTION="mailto:hickslm@flint.umich.edu" ENCTYPE="text/plain" METHOD="post">

<INPUT TYPE="text" NAME="text" SIZE=20 VALUE="Enter Your Name">

<INPUT TYPE="HIDDEN" NAME="Page Source" VALUE="Advanced Form Input Page">

</FORM>

Here is the input I received when I sent this form:

Subject: Form posted from Mozilla
Date: Wed, 21 Mar 2001 08:31:08 -0500
From: "Linda M. Hicks" <hickslm@umich.edu>
To: hickslm@flint.umich.edu

Page Source=Advanced Form Input Page
Name=Linda Hicks