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.

Attribute	Description
Disabled	It defines deactivation of a button.
Formaction	It is used for form submission. It determines where to send data about the form when submitting the form.
Autofocus	This specifies that while loading the page a button will automatically get attention.
Name	It specifically states of the button name.
Value	It specifies button value.
Formtarget	After submitting the form, it determines where to display the answer.
Formenctype	It defines how to encode the form-data before it is sent to server.
Formmethod	This sets out how the form-data will be submitted.
Form	It defines one or more forms which belong to the click.
Formnovalidate	It determines that the data on the form will not be validated after submission.
type	It specifically states button type.
<button accesskey="">	It defines click keyboard shortcut. As for HTML5, this attribute is global and can be used on any item.
Tabindex	Determines the selection order by using the Tab key.

Supporting Browsers

Internet Explorer

Chrome

Firefox

Opera