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.

Output:

HTML Button Tag

HTML Button Example: Submit Form

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

Output:

HTML Button Tag

HTML Button Example: Calling JavaScript Function

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

Output:

HTML Button Tag
HTML Button Tag

HTML Button Example: Reset Form

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

Output:

HTML Button Tag

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.

AttributeDescription
DisabledIt defines deactivation of a button.
FormactionIt is used for form submission. It determines where to send data about the form when submitting the form.
AutofocusThis specifies that while loading the page a button will automatically get attention.
NameIt specifically states of the button name.
ValueIt specifies button value.
FormtargetAfter submitting the form, it determines where to display the answer.
FormenctypeIt defines how to encode the form-data before it is sent to server.
FormmethodThis sets out how the form-data will be submitted.
FormIt defines one or more forms which belong to the click.
FormnovalidateIt determines that the data on the form will not be validated after submission.
typeIt 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.
TabindexDetermines the selection order by using the Tab key.

Supporting Browsers

Internet ExplorerChromeFirefoxOpera

Pin It on Pinterest

Share This