---

Buttons are most commonly used to submit a form, although they are sometimes used to clear or reset a form and even to trigger client - side scripts. (For example, on a basic loan calculator form within the page, a button might be used to trigger the script that calculates repayments without sending the data to the server.) You can create a button in three ways:

• Using an <input> element with a type attribute whose value is submit , reset , or button
• Using an <input> element with a type attribute whose value is image
• Using a <button> element

Creating Buttons Using the <input> Element

<form>
<input type="submit" name="btnVoteRed" value="Vote for reds">
<input type="submit" name="btnVoteBlue" value="Vote for blues">
<br> <br>
<input type="reset" value="Clear form"><br> <br>
<input type="button" value="calculate" onclick="calculate()">
</form>

Live Preview

The table that follows shows the attributes used by the buttons.

Attribute	Purpose
type	Specifies the type of button you want and takes one of the following values: submit , reset , or button .
name	It Provides a name for the button. We need to add only a name attribute to a button if there is more than one button on the same form (in which case it helps to indicate which of the buttons was clicked). It is considered good practice, however, to give the button a name anyway to provide an indication of what the button does.
value	Enables you to specify what the text on the button should read. If a name attribute is given, the value of the value attribute is sent to the server as part of the name/value pair for this form control. If no value is given, then no name/value pair is sent for this button.
onclick	Used to trigger a script when the user clicks the button; the value of this attribute is the script that should be run.

In the same way that you can trigger a script when the user clicks a button, you can also trigger a script when the button gains or loses focus with the onfocus and onblur event attributes.

When an <input> element has a type attribute whose value is submit , reset , or button , it can also take the following attributes:

• All the universal attributes
• disabled , readonly , tabindex , and accesskey , which are discussed later in the chapter
• The UI event attributes

If you do not use the value attribute on the submit button, you may find that a browser displays text that is inappropriate to the purpose of the form — for example, IE displays the text Send Query , which is not ideal for a login button form.

Using Images for Buttons

You can use an image for a button rather than using the standard button that a browser renders for you. Creating an image button is very similar to creating any other button, but the type attribute has a value of image :

<input type="image" src="atnyla-button-1.png" alt="Submit" name="btnImage">

Live Preview

Note how you can start the value of a name attribute for a button with the characters btn , in keeping with the naming convention that I mentioned earlier. (When you refer to the name of the form control in other code, the use of this prefix will help remind you what type of form control the information came from.)

Because you are creating a button that has an image, you need to have two additional attributes, which are listed in the table that follows.

Attribute	Explanation
src	Specifies the source of the image file.
alt	Provides alternative text for the image. This will be displayed when the image cannot be found and also read to people using voice browsers. (It was first supported only in IE5 and Netscape 6.)

Creating Buttons Using the <button> Element

The <button> element is a more recent introduction that allows you to specify what appears on a button between an opening < button > tag and a closing </button> tag. So you can include textual markup or image elements between these tags.

Here are some examples of using the <button> element

<button type="submit" > Submit </button >
<br> <br>
<button type="reset" ><b> Clear this form ,</b> I want to start again </button >
<br> <br>
<button type="button" > <img src="atnyla-button-2.png" alt="submit"> </button>

As you can see, the first submit button just contains text, the second reset button contains text and other markup (in the form of the <b> element), and the third submit button contains an <img> element.

Live Preview

Another Examples

 
<button type="button" > <img src="atnyla-button-3.png" alt="submit"> </button>
<button type="button" > <img src="atnyla-button-4.png" alt="submit"> </button>
<button type="button" > <img src="atnyla-button-5.png" alt="submit"> </button>
<button type="button" > <img src="atnyla-button-6.png" alt="submit"> </button>
<button type="button" > <img src="atnyla-button-7.png" alt="submit"> </button>
<button type="button" > <img src="atnyla-button-8.png" alt="submit"> </button>
<br>
<input type="image" src="atnyla-button-9.png" alt="Submit" name="btnImage"><br>
<input type="image" src="atnyla-button-10.png" alt="Submit" name="btnImage"><br>
<input type="image" src="atnyla-button-11.png" alt="Submit" name="btnImage"><br>
<input type="image" src="atnyla-button-12.png" alt="Submit" name="btnImage"><br>

Live Preview

---