HTML button Tag formenctype Attribute Tutorial

In this section, we will learn what formenctype attribute is and how it works.

What is formenctype Attribute in HTML <button> Tag?

If there is a form in a document and the HTTP-method, it used to send data to a server, is set to “POST” then that form data needs to be encoded before being sent to that server. For this reason, we have two ways to encode these data before submitting:

  1. We can use the enctype attribute which belongs to the HTML <form> element.
  2. We can use the formenctype attribute that belongs to HTML <button> element.

If a form already has the enctype attribute, then using formenctype attribute will override the value set for the enctype attribute.

HTML formenctype Attribute in <button> Tag Syntax:

<button type = "submit" formenctype = " application/x-www-form-urlencoded | multipart/form-data | text/plain"> </button>

<button> Tag formenctype Attribute Values

There are three values that could be used to set the value of formenctype:

Name

Description

application/x-www-form-urlencoded

This is the default value and when used, all the character of the form data will be encoded before being sent.

multipart/form-data

If in the form we have file as well (<input type= “file”>), then this is the value that should be set for the formenctype attribute.

text/plain

If we use this value, it means the form data should not be encoded! For security reasons, this is not recommended at all.

Example: using formenctype attribute in HTML <button> tag

See the Pen using formenctype attribute in HTML <button> tag by Omid Dehghan (@odchan1) on CodePen.

Leave a Reply