Button Type In HTML: Here's Why You Should Always Declare It

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?

Specifies the type of the button.

Code Example

<form action="/button-type">
<button type="button" onclick="alert('This button does nothing.')">Click me for 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>

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