button elements offer attributes to change form behavior
- Published at
- Updated at
- Reading time
I read Chris Coyier's complete Guide to Links and Buttons today. Unfortunately,
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
The following attributes were new to me:
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
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!
Yes? Cool! You might want to check out Web Weekly for more quick learnings. The last edition went out 6 days ago.