This content originally appeared on Stefan Judis Web Development and was authored by Stefan Judis
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:
formaction
formenctype
formmethod
formnovalidate
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
This content originally appeared on Stefan Judis Web Development and was authored by Stefan Judis

Stefan Judis | Sciencx (2020-02-29T23:00:00+00:00) button elements offer attributes to change form behavior (#tilPost). Retrieved from https://www.scien.cx/2020/02/29/button-elements-offer-attributes-to-change-form-behavior-tilpost/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.