The Plain Button

As you learn JavaScript and backend coding, you'll come across instances where you want to make a form button that will do a custom task. You can do this by making a plain, generic button.

Unlike the reset and submit buttons, there is no pre-made function for a generic button. You'll have to code a function for yourself. I'll be using a simple JavaScript you can cut and paste.

Here's a "Help" button that pops up some simple instructions:

This button was coded using the <input> for a generic button and a JavaScript event. Don't worry too much about the JavaScript for now. Concentrate on the button.

<form name="form1">

<input type="button" value="Help!" onClick="alert('Fill out the form and click the submit button.')">

It's the TYPE="button" part that makes the button. VALUE puts the text on the button. The "onClick" part is a JavaScript "event". That means that JavaScript will recognize when this button is clicked. When the button is clicked, a simple alert box pops up.

NOTE: For those of you who'd like to jump ahead to a little more JavaScript, try using the "onMouseOver" event instead of "onClick" and see what happens.

As you expand your coding knowledge, you'll find that you'll be making more and more generic buttons to activate your custom functions.

The Image Submit Button

The buttons we've been making so far aren't very attractive. They're about as bland as it gets. You can use an image as a submit button to liven things up.

<form name="form1" action="javascript:alert('Button Works!')">

<input type="image" src="URL to image" name="anImageButton">

</form>

An image button has two attributes that make it work. First is TYPE="image" this sets up the image as a submit button. Next is SRC="URL to image file". This displays the actual image. Here's an example of the above code in action:

The above image button will only act as a submit button. There are other methods using JavaScript that can make generic image buttons that can do a variety of tasks. What's important at this point is that you know how to code generic buttons in your forms and use an image button for submitting the form data.

Summary & Exercises

You can make a generic button -- one without any pre-set function -- by using <input type="button">.

You can use a graphic (image) button for a submit button by using TYPE="image" and a SRC to the image's URL.

Lets add a "Help!" button and a second submit button using an image on our current form.

To Next Advanced HTML Lesson

Back To Advanced HTML Index