Ken Ward's HTML Tutorial ...

In this page we look at the following form components:

• Buttons
• Action
• Type of buttons
• Mailing with forms
• Text Area
• Images

Buttons

Press the button and use the back button on the browser to return here. Here is the code:

<!-- Start of button code -->

<form ACTION="index.htm" METHOD="GET">

<p><input TYPE="submit" NAME="B1" VALUE="Go to Contents"></p>

</form>

<!-- end of button code -->

  The button is made by enclosing the tags in <form></form> tags. The ACTION for the form is an URL, usually one that starts a server based program (cgi script). In our case we have used an HTML file (index.htm) which is our contents page. As you discovered, pressing the button loads the index.htm file. There are two METHODS, POST and GET, GET is the default. So much for the form! Inside the form we have:

<input TYPE="submit" NAME="B1" VALUE="Go to Contents"

On Internet Explorer 4, a warning message box appears and if you select 'Yes', then your email software activates, with my email as the address. Here is the code:

<form ACTION="mailto:kenjward@123ward.com" METHOD="post">

<input TYPE="submit" NAME="B1" VALUE="Send me feedback...">

</form>

This is essentially the same principle as before, except that the ACTION is now "mailto:" followed by an email address, in this case mine. Click here to see an example of a form with more explanation.

The following is a list of input TYPES supported. They are presented in a TEXTAREA to make a neater presentation. Whether you like it or not is a matter of opinion. In any case, it demonstrates the TEXTAREA. Use your editor to view the source.

Delete some of the text in the text area and write something of your own. Then press the reset button and note what happens.

On IE4, the form is returned to its original state. How nice it would be if we had RESET buttons, and we could do the same to ourselves? (Note question mark not exclamation!)

This is the code for the reset button:

<input TYPE="RESET" VALUE="Reset" ALIGN="texttop"> </form>

Note that the code is similar to the submit button's code. In this case, we have used the ALIGN. To view a list of options for ALIGN, go to Image Alignment .

The last input type we are going to look at here (under buttons) is IMAGE. Click on the home button and see what happens!

On my computer, using IE4, the index.htm page loads, the same as when using the SUBMIT button.

Here is the code:

<!-- start of form using image-->

<form method="GET" action="index.htm">

<input src="home.gif" name="I1" alt="Contents of HTML Tutorial" width="72" height="41"

type="image">

</form>

<!-- end of form using image -->

Once again the code is similar to the code for SUBMIT. The input type is IMAGE and the section:

<input src="home.gif" name="I1" alt="Contents of HTML Tutorial" width="72" height="41"

is similar to the normal code for images. The 'SRC=' tells the browser which image to use, and the ALT text, tells it what to display when the curser is over the image, in this case 'Contents of HTML Tutorial'. The final part mentions the size of the image.

Form ACTION is supposed to refer to a computer program on the server, and using other types of files is not quite correct and may not give the results you expect on all systems. However, my purpose has been to look at buttons in forms, and to make them more active, without using, for example, cgi script or Java Script.

[contents][back to: Forms][Next: Menus in Forms]

[on to:  Meta Tags] [Home Page]

Most Recent Revision: 18-Oct-98.
Copyright © 1998 Ken J Ward

I am always pleased to hear from you.
Send your comments to Ken Ward
and please visit: The New Life Course