HTML5 Button Tag

HTML Button Tag

The < button > tag is used on the webpage to construct a clickable button inside the HTML. Within the < button>....</button > tag, we can place content like text or picture.

The type attribute to a < button > tag should always be defined. For the button item various browsers use different default type.

You are required to use HTML button tag inside and outside the form. If you use it inside the form, it will act like the submit button. It can also be used as a reset button.

You can call the JavaScript feature on it, while using the outside type.

HTML Button Tag Sample

Let's look at the code that shows the button.

<button name="button" type="button">sign in</button>

Output:

HTML Button Example: Submit Form

Let's see the code to click on button to Submit form.

<form>
Enter First Name:<input type="text" name="name"/><br/>
Enter Second Name:<input type="text" name="name"/><br/>
Gender:<input type="text" name="name"/><br/>
<button>Submit Form</button>
</form>

Output:

HTML Button Example: Calling JavaScript Function

Let's see the code to click on button to call JavaScript feature.

<button name="button" value="OK" type="button" onclick="hello()">Press me</button>
<script>
function hello(){ 
alert("Hii Tutorialandexample"); 
} 
</script>

Output:

HTML Button Example: Reset Form

Let's see the code to click on button to reset form.

<form>
Type Your First Name:<input type="text" name="name"/><br/>
Type Your Last Name:<input type="text" name="name"/><br/>
<button type="reset">reset</button>
</form>

Output:

Attributes of HTML Button Tag

The <button> tag accepts all the global attributes and even some additional unique attributes.

A list of attributes with the HTML button tag is given.

Supporting Browsers