What’s special about the Button element in HTML?

There are many features that we may not be aware of

John Au-Yeung
Feb 13 · 4 min read
Photo by Nirzar Pangarkar on Unsplash

The button lets us do something on a web page when we click on it.

In this article, we’ll look at parts of an HTML button that we may not know they existed.

Attributes

HTML buttons have various attributes. They’re the following:

  • disabled — prevents a button from being clicked if it’s true

Example

We can use the button element with a form element as follows:

<form id="form">
<input type="text" value="foo" />
</form>
<button type="reset" form="form">Reset</button>

We set the ID of the form and then we can add buttons outside the form that controls the form as we did with the reset button.

We can add a submit button as follows:

index.html :

<form id="form">
<input type="text" value="foo" name="name" />
</form>
<button type="submit" form="form">Submit</button>
<button type="reset" form="form">Reset</button>

index.js :

const form = document.getElementById("form");
form.onsubmit = e => {
e.preventDefault();
alert(
[...form.elements].find(e => e.tagName.toLowerCase() === "input").value
);
};

In the code above, we get the form ‘s elements and the spread it into an array so that we can use the find method.

We call preventDefault() to prevent the default submitting behavior.

Then we find our input element by checking the input tag.

Finally, we can get its value and show the value in an alert box.

As we can see, we can place our button element anywhere and still control the form if we set the form attribute to the ID of the form that we want to control.

Photo by Diomari Madulara on Unsplash

Styling

Button elements are much easier to style than input elements. We can add styles inside it like em , strong , or img .

Also, we can use the ::after and ::before pseudo-elements to add more complex styling.

We have to set the button’s type to button if we aren’t using it for submitting data.

Conclusion

We don’t have to place a button inside a form to control the form. This is because we can specify the form attribute with the value of the ID of the form.

Also, we can specify the formmethod , formenctype , formtarget , etc. to override the corresponding attributes that were set on the form.

This makes buttons much more flexible.

They can also be styled in a much more flexible way than input elements.

JavaScript in Plain English

Learn the web's most important programming language.

John Au-Yeung

Written by

Web developer. Subscribe to my email list now at http://jauyeung.net/subscribe/ . Follow me on Twitter at https://twitter.com/AuMayeung

JavaScript in Plain English

Learn the web's most important programming language.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade