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

Có thể bạn quan tâm

Disclosure: Your support helps keep the site running! We earn a referral fee for some of the services we recommend on this page. Learn moreAttribute ofCreating A Button With The HTML Button Element: Here's HowWhat does Button Type In HTML: Here's Why You Should Always Declare It do?Specifies the type of the button.

Contents

1 Code Example
2 Button Types
3 Difference between <button type="submit"> and <input type="submit">
4 Browser Support for type

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> Click me for no reason! Name Reset the form! 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.