Today, I was reading A Complete Guide to Links and Buttons written by Chris Coyier. button and a elements are often misused. To help out, Chris' article gives a good overview of their functionalities and best practices.
One section about button attributes caught my eye. In it, Chris lists the attributes one could use with a button element.
The following attributes were new to me:
formactionformenctypeformmethodformnovalidate
It turns out, that you can use these 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 submitable 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 of 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 you can have a look at the above form example 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!
Reply to Stefan
