button elements offer attributes to change form behavior (#tilPost)

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 …


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


Print Share Comment Cite Upload Translate
APA
Stefan Judis | Sciencx (2022-12-08T15:41:15+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/.
MLA
" » button elements offer attributes to change form behavior (#tilPost)." Stefan Judis | Sciencx - Saturday February 29, 2020, https://www.scien.cx/2020/02/29/button-elements-offer-attributes-to-change-form-behavior-tilpost/
HARVARD
Stefan Judis | Sciencx Saturday February 29, 2020 » button elements offer attributes to change form behavior (#tilPost)., viewed 2022-12-08T15:41:15+00:00,<https://www.scien.cx/2020/02/29/button-elements-offer-attributes-to-change-form-behavior-tilpost/>
VANCOUVER
Stefan Judis | Sciencx - » button elements offer attributes to change form behavior (#tilPost). [Internet]. [Accessed 2022-12-08T15:41:15+00:00]. Available from: https://www.scien.cx/2020/02/29/button-elements-offer-attributes-to-change-form-behavior-tilpost/
CHICAGO
" » button elements offer attributes to change form behavior (#tilPost)." Stefan Judis | Sciencx - Accessed 2022-12-08T15:41:15+00:00. https://www.scien.cx/2020/02/29/button-elements-offer-attributes-to-change-form-behavior-tilpost/
IEEE
" » button elements offer attributes to change form behavior (#tilPost)." Stefan Judis | Sciencx [Online]. Available: https://www.scien.cx/2020/02/29/button-elements-offer-attributes-to-change-form-behavior-tilpost/. [Accessed: 2022-12-08T15:41:15+00:00]
rf:citation
» button elements offer attributes to change form behavior (#tilPost) | Stefan Judis | Sciencx | https://www.scien.cx/2020/02/29/button-elements-offer-attributes-to-change-form-behavior-tilpost/ | 2022-12-08T15:41:15+00:00
https://github.com/addpipe/simple-recorderjs-demo