HTML button Tag

The <button> tag is used to create a clickable button within HTML form on your webpage. You can put content like text or image within the <button>........</button> tag.

You should consistently define the type attribute for a <button> element. Various browsers may employ diverse default types for the button element.

The HTML button element is versatile and can be utilized both within and outside a form.

If incorporated within a form, it functions as the submission button. It can alternatively serve as a reset button.

If you apply it beyond the form, you have the ability to invoke a JavaScript function on it.

HTML Button Tag Example

Let's see the code to display the button.

<button name="button" type="button">Click Here</button>

Output:

HTML Button Example: Calling JavaScript Function

Let's explore the code snippet to invoke a JavaScript function when a button is clicked.

<button name="button" value="OK" type="button" onclick="hello()">Click Here</button>

<script>

function hello(){

alert("hello C# Tutorial user");

}

</script>

Output:

HTML Button Example: Submit Form

Let's review the code to handle form submission upon clicking a button.

<form>

Enter Name:<input type="text" name="name"/><br/>

<button>Submit</button>

</form>

Output:

HTML Button Example: Reset Form

Let's review the code to submit a form when a button is clicked.

<form>

Enter Name:<input type="text" name="name"/><br/>

<button type="reset">reset</button>

</form>

Output:

Attributes of HTML Button Tag

The <button> tag accommodates all global properties along with certain specific extra attributes.

There is a provided compilation of attributes for the HTML button tag.

Supporting Browsers

HTML button tag also supports the global and event attributes in HTML.