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 Itdo?
- Specifies the type of the button.
<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>
There are three types of buttons:
submit— Submits the current form data. (This is default.)
reset— Resets data in the current form.
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.
<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.
Browser Support for type