Published at
Updated at
Reading time
This post is part of my Today I learned series in which I share all my web development learnings.

I read Chris Coyier's complete Guide to Links and Buttons today. Unfortunately, button and a elements are often misused, and to help out, Chris gives a good overview of their functionalities and best practices.

One section about button attributes caught my eye. Chris lists the attributes one could use with a button element.

The following attributes were new to me:

  • formaction
  • formenctype
  • formmethod
  • formnovalidate

It turns out, that you can use these button attributes to overwrite the behavior of an associated form.

Let's have a look at an example.

<form action="/some-endpoint" method="post">
    Your name
    <input name="full-name" type="text" required>

The initial configuration of this form leads to a POST request made to /some-endpoint. Also, the form should only be submittable when the full-name input holds a value.

This configuration is overwritten by the submit button, though. 😲

If you hit the submit button (or press ENTER inside the input field), there is no input value validation anymore (formnovalidate). The made request is a GET request (formmethod) going to /some-other-endpoint (formaction).

You might not need these "overwrite-attributes" very often, but when you do, I bet they're life-savers!

You can read more about these attributes on MDN, or look at the form example from above on CodePen.

Edited: Today, I read an article on and learned that buttons also support a form attribute. This attribute enables you to connect developers to place buttons somewhere in the document but still keep a form connection. Very cool!

Was this TIL post helpful?
Yes? Cool! You might want to check out Web Weekly for more quick learnings. The last edition went out 8 days ago.
Stefan standing in the park in front of a green background

About Stefan Judis

Frontend nerd with over ten years of experience, freelance dev, "Today I Learned" blogger, conference speaker, and Open Source maintainer.

Related Topics

Related Articles