form buttons

Buttons are not the same as the other input types, although they are rendered with the <input> tag. Buttons form an distinct family of input types, and not just because they place clickable buttons on the page (though this is their most obvious shared characteristic). They are also different from other form elements in that although they use the <input> tag and the type attribute, they do not take names, and the value attribute is used not to return information, but to label the button. (It would have been better had the creators of HTML created a separate tag for buttons to avoid confusion - but they didn't, so we're a bit stuck with it.)

Buttons can stand alone, outside the context of a form (though you still need to enclose them in dummy <form> tags - if your button doesn't appear where it was expected, check you've done this - this is a common mistake). Because they can have onclick events programmed into them, they're quite commonly used to get clickable, interactive objects on a page. More details come from the link programmed into the button below...

<form action="">
    <input type="button" value="Unusual uses
        of forms" />
</form>

A stand-alone button won't actually do anything unless there's some associated JavaScript, but that's not the subject of this particular page; plenty of information about this came in lecture 8.

The other button types follow this pattern, but two of them have specific functions within a form. These are type="submit" and type="reset". These are very important buttons, and every real form on a page (i.e., those being used to actually send info rather than achieve some pretty layout techniques) requires them. The submit button, when clicked, sends the form info back to the server. Without this button you can wander around the on-screen form elements all day, but nothing will actually be sent. The reset button, on the other hand, clears all entered info and resets the form to its original state. This is a useful time-saver for any user, and while it's not a necessary aspect of getting a form to work, it's another one of those useful courtesies that really should be included on all forms.

In both cases, if value is omitted, the button displays default text: "Submit" and "Reset" respectively. You can change this with the value attribute, as shown here:

<input type="submit" value="Send your details" />
<input type="reset" value="Clear information and restart" />

There's a final possibility for the <input> tag, which is type="image". Add a src attribute in the <input> tag in the same way as for an <img> tag, and bingo, your image becomes an integral part of the form. What makes this a potentially powerful technique is that when the user clicks somewhere on the image, the X-Y co-ordinates of that click are what get returned to the server. So, potentially, you could ask the user to click on a map near where they lived, or to indicate which one of (say) your retail outlets on that map they were interested in. This is similar to how sites like http://www.multimap.co.uk/ work (although in fact these are more likely to use server-side image maps). However, it's too complex a subject to get into here - you need some proper programming skills to really make use of it.

Back to the top

Back to the menu for lesson 9