Ken Ward's HTML Tutorial ...

In this page we look at the following form components:


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" " id="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:

Note: while I have used capitals for emphasis, HTML code should be in lowercase, to make it compatible with XHTML and future browsers. Also note that the input tag has " />" at the end, showing the tag is finished.

<input type="submit" name="B1" value="Go to Contents" />

For buttons, you have a choice of the following types:

  • SUBMIT
  • RESET
  • BUTTON

Copy the above code and use reset, and then substitue button to see what happens. On my computer, using Internet Explorer 4, nothing happens! The RESET  button is used to reset a form, and the BUTTON is used, for example, with Java Script.

Click the next button and see what happens!

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:me@myCom" 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 a fake. 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" />

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 . Also this tag ends with " />" to show it has finished. Tags without an end tag, should have this at the end to make the code compatible with future browsers.

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 type="image" 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.

Label

If you type the alt key and the letter "d", the text in the text box is selected. Also, if you click on the "label", "Label Example", then the text box is selected.

The code is as follows:

    <form name>

<p><label accesskey="d" for="myText">Label Example: </label>

<input type="text" id="myText" value="Select me with alt+d" size="20"> </p>

</form>

The accesskey property is the letter "d", and the for property is the id of the element referred to, in this case "myText".

Legend and Fieldset

"fieldset"draws a box around the items it encloses. And "legend" provides a caption for the box. For example:

Personal Details

The code is:

<form name="" id="" method="post" action="" enctype="text/plain">

<fieldset><legend>Personal Details</legend><label for="t1" accesskey="">Email: </label><input type="text" name="" id="t1" value=""><br>

<label for="t2" accesskey="">Name: </label><input type="text" name="" id="t2" value=""><br>

</fieldset></form>

You can use a box like this several times to enclose HTML elements. While the legend has an align property, it may not work in all browsers.


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

[Home Page]


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

I am always pleased to hear from you.
Send your comments to
and please visit: Living Consciously