How Form Encoding Works

by Joe Marshall on August 24th, 2021

Forms are a fundamental building block of the web - one of the most atomic units of data collection on the internet.

When they send information to the server, they do so using one of three encodings (specified using the <form> attribute enctype):

  • application/x-www-form-urlencoded
  • multipart/form-data
  • text/plain


This type represents a URL encoded form and is the default value if the enctype attribute is not set. URL encoding means - unsurprisingly - that the data from the form is being sent to the server by being appended to the current URL.


<form enctype="application/x-www-form-urlencoded">
  <input type="text" name="email" value="" />
  <input type="text" name="name" value="joe" />
  <button type="submit">Submit</button>

This will end up creating a GET request (the default form HTTP request type) that looks like:

Notice that the @ symbol is being URL encoded as %40.


The multipart form encoding type is used primarily for sending information about files (so a form with <input type="file" />).


  <input type="file" name="resume" />
  <button type="submit">Submit</button>

Opening the code in my browser, I attach a copy of my resume and click Submit. Going into the devtools I can see my POST request and, in the body of it, my encoded file, which is correctly being read as a PDF.

multipart form HTTP request

There's also an extra field you'll notice in the request's Content-Type, boundary. Boundary can either be passed by you or will be set as a default in the data and is, simply put, a delimiter that will be used to separate the different parts of your multipart form data.


This was introduced by HTML5 for debugging purposes. A form with this type sends plain text data just like the name implies.


<form enctype="text/plain">
  <input type="text" name="name" value="joe" />
  <button type="submit">Submit</button>

No surprises here, we just get a simple key=value pairing.

plain text HTTP request

Some Extra Quirks

As the MDN Web Docs explain, the enctype can be overriden by "formenctype attributes on <button>, <input type="submit">, or <input type="image">" so make sure to be aware of that when editing an existing form.

Also, if the value of the method attribute is POST, then the enctype is the MIME type of the form submission. The MIME Type is a media-type two-part identifier for file formats and other information transmitted through the Internet. An example of a MIME type would be application/json - or for that matter, our very own application/x-www-form-urlencoded, which we've already covered.

Hopefully this short primer has given you a greater understanding of how form submissions on the web are transmitted. It's just one of a series explaining the ins and outs of forms on the web. Sign up below for notifications!

< Back to Blog

Sign up for future posts