What are the HTML button types and how are they different?
There are 3 types of buttons in HTML, each of them has its own purpose. In this article, we’ll inspect each one of the HTML button types and see how they are different.
For the button element, one of two HTML tags can be used:
input tag is used a
type attribute has to be specified in order for it to appear as a button. As well as a
value attribute to display the text on the button.
<input type="button" value="Click here" />
Both approaches will render a button to a page that will look the same by default, no matter the button type value. However, each browser displays a button in a slightly different way.
input share some common attributes:
The difference between button and input tags
input (when displayed as a button) do essentially the same thing, some differences exist.
inputtag cannot have pseudo-element, while button can;
inputtag has some unique attributes for additional functionality:
accesskeyattribute which allows the user to trigger a button using a key or combination of keys on the keyboard;
inputtag can have a
labeltag attached to it.
NOTE: It is advised to use the button tag over input when possible. As button tag is fully accessible and semantic out of the box.
To set the button type, use the according attribute:
submit- submits form data to the server
reset- resets the values from fields
<button type="button">Apply now</button> <button type="submit">Submit</button> <button type="reset">Reset</button>
<input type="button" value="Apply now" /> <input type="submit" value="Submit" /> <input type="reset" value="Reset" />
type attribute defines button behavior inside the form. Visually different button types look the same and don’t have many differences.
Inside the form, once clicked the button will perform an action by default specified by the
type attribute. If the button is inside the form and has no attribute specified it will act as a
submit type button. If the button is inside the form and it has a
Outside the form, each button type acts as a regular button, this means on click nothing will happen.
<form action=""> <input type="text" placeholder="Your name" required> <input type="email" placeholder="email@example.com" required> <input type="number" value="42"> <input type="submit" value="Submit" /> <input type="reset" value="Reset" /> <button type="button">Button</button> </form>