30/11/22, 12:24 Button Type In HTML: Here's Why You Should Always Declare It »

Learn HTML Code, Tags & CSS

HTML  /  HTML Web Forms Tutorial For Coding Beginners  /  Creating A Button With The HTML Button Element: Here's How / Button Type In HTML:
Search HTML.com
Here's Why You Should Always Declare It

Search …
Button Type In HTML: Here's Why SEARCH

You Should Always Declare It

In HTML Attributes

Disclosure: Your support helps keep the site running! We earn a referral fee for some of the
services we recommend on this page. Learn more

Attribute of
Creating A Button With The HTML Button Element: Here's How

What does Button Type In HTML: Here's Why You Should Always Declare It do?
Most Popular
Specifies the type of the button.

<var> HTML Tag 1,1

Contents [hide]
Using The HTML Tag To Create Inline
1,157
1 Code Example
Frames: Here's How
2 Button Types
3 Difference between <button type="submit"> and <input type="submit"> <meta> HTML Tag 475 view

4 Browser Support for type

HTML Body Tag: Master The 473 views
Most Important HTML Element
Code Example Now

<title> HTML Tag 471 views

<form action="/button-type">

<button type="button" onclick="alert('This button does nothing.')">Click me f

or no reason!</button><br><br>

<label for="name">Name</label><br>

<input name="name"><br><br>

<button type="reset">Reset the form!</button><br><br>

<button type="submit" disabled>Submit (disabled)</button>

</form>

CLICK ME FOR NO REASON!

Name

RESET THE FORM!

https://html.com/attributes/button-type/ 1/3
30/11/22, 12:24 Button Type In HTML: Here's Why You Should Always Declare It »

SUBMIT (DISABLED)

Button Types

There are three types of buttons:

submit — Submits the current form data. (This is default.)

reset — Resets data in the current form.
button — Just a button. Its effects must be controlled by something else (that is, with
JavaScript).

It used to be the case that buttons primarily appeared in the context of forms, where the default
submit behavior made perfect sense. Today, it is common to see buttons in all sorts of in-browser
app contexts, and so it isn’t always clear at first glance at the markup. Therefore, it is a good practice to
always declare the type of a button explicitly.

Difference between <button type="submit"> and <input

type="submit">

Both <button type="submit"> and <input type="submit"> display as buttons and cause the
form data to be submitted to the server.

The difference is that <button> can have content, whereas <input> cannot (it is a null element).
While the button-text of an <input> can be specified, you cannot add markup to the text or insert a
picture. So <button> has a wider array of display options.

There are some problems with <button> on older, non-standard browsers (such as Internet Explorer
6), but the vast majority of users today will not encounter them.

Adam Wood
Adam is a technical writer who specializes in developer documentation and tutorials.

Browser Support for type

All All All All All All

https://html.com/attributes/button-type/ 2/3