The <button> element will display a clickable button in the browser. It is a generic element which we use mostly in forms.
As always, it has a default browser style that imitates a button. It is an element with meaning, so it has an accessible function.
<button>Submit</button>
Types of the Button
The button is an accessible element, assistive technologies will recognize it. When we interact with it, the browsers handle many things for us (states, events).
As I said earlier, we usually attach it to a form (as a submit button), but we can also use it elsewhere. Like if you have a mobile menu (or any menu hidden), you want to open on a click. In this case, you should use a button element (with aria-expanded at least) to mockup the toggle control.
Need a WordPress website? Or you prefer the more performant headless and static solutions? We can help!
If you declare the <button> tag inside a form, it will fire the submit event, outside of it won’t.
<button type="submit">Submit</button> <button type="reset">Reset</button> <button type="button">Button</button>
We can declare it’s behavior with the type attribute:
- type=”submit”: will submit the form data to the server. It is the default behavior if it is placed inside a form.
- type=”reset”: will reset the form values if placed inside a form.
- type=”button”: will be function as a generic button.
A Button or a Link
By design, we have to differentiate the links and buttons. The reason is that the expected behavior differs. When we click on a link, we expect to navigate to another post. When we click on a button, we hope for an on-page action (like sending a form).
So it is not the same the use the <a> and the <button> element. Both of them have their function use it properly because it can mean a lot.
<a href="/about.html">Navigate to about page</a> <button>Submit form</button>
The <button> element also has similar parameters like any input:
- we can disable it with the disabled attribute,
- we can declare a name attribute,
- or use autofocus on it.
A Button or an Input Element
We can send a form in two way (with native element): <button> and <input type=”submit”>. Using the input tag which is an older solution that can feel a bit weird because that is an input element.
<button>Submit</button> <input type="submit" value="Submit"/>
The <button> is semantically correct in this case and has other advantages like that it is not a self-closing element. This means that we can add anything between the opening and closing tags. Using the input, we have only the option to add a caption.
