Artboard 16light, inspiration, solution, idea, innovation,ionicons-v5_logosGoogle Sheets iconSwift icon
Published at
Updated at
Reading time
2min
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">
  <label>
    Your name
    <input name="full-name" type="text" required>
  </label>
  <button 
    formaction="/some-other-endpoint"
    formmethod="get"
    formnovalidate>Submit</button>
</form>

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 funwithform.com 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 14 days ago.

Related Topics

Related Articles