HTML Buttons

There are three types of buttons: the submit button which is used for submitting forms such as contact forms, the reset button which is used for resetting the data in a form (clears the field), and finally there are general buttons which don’t do anything themselves, but you can give them function.

Example – Submit Buttons

<input type="text" name="name"/>
<input type="submit" value="Submit Form"/>

The value attribute gives the submit button the display text.

Output  / Try It!

Enter Name:

The second type of button is the reset button, and is used to reset a form.

Example – Reset Buttons

<input type="reset" value="Reset Form"/>

Output

Type something:
 

The last type of button is a general button. You might generally see these buttons on forms where you can cancel the form and it will redirect you.

Example – Button

<input type="button" value="Back to top"/>

Output

Using the Button Tag

You can also create buttons using the <button> tag, which is similar to the input tag. The advantage here is that you can include HTML inside it.

Syntax

<button type="submit | reset | button">Button</button>

Output

You can also have images.

Example

<button type="button"><img src="../upfiles/images/favicon.png"/></button>

Output

The button tag does not work well with IE6 and other older browsers.