DEV Community

TechBos😎 for - Postman without native apps

Posted on • Updated on

'x-www-form-urlencoded' or 'form-data' 😵 ? Explained in 2 mins.


If you need file uploads, form-data is your only option here. Otherwise, they serve the same job. form-data is a fancier way of encoding data than x-www-form-urlencoded. You can think of x-www-form-urlencoded as .txt file and form-data as .html file. In the end of day they both deliver some http payload.

Try 🏀 playground links 🏀 below to see what the headers and body look like:

Content Type

x-www-form-urlencoded application/x-www-form-urlencoded
form-data multipart/form-data; boundary={boundary string}

A quick note for form-data: Usually the browser generates a random {boundary string}, e.g., ----WebKitFormBoundaryKGUmWkAsjo5nUBp2, but you can specify your own if you want. See below for examples.

Request Payload

Let's say you have a login form with fields below:

Fields Values
username techbos
password Pa$$w0rd

When you post the form, the payload for x-www-form-urlencoded looks like below. Note how strings are encodeURIComponent()'d.


For form-data, each (key, value) pair is encoded in its own section, with {boundary string} as separator. Here I also included a sample section in the end to show you what a file upload looks like:

--{boundary string}
Content-Disposition: form-data; name="username",

--{boundary string}
Content-Disposition: form-data; name="password",

--{boundary string}
Content-Disposition: form-data; name="file"; filename="image.jpg"
Content-Type: image/jpeg,

--{boundary string}--

Explained inline:

Alt Text

API to send request

x-www-form-urlencoded form-data
fetch() body as URLSearchParams body as FormData
request() form option formData option
axios() data as URLSearchParams data as FormData

API to handle response

For x-www-form-urlencoded, use bodyParser, which will parse payload into req.body in the format of { key, value }.

express.use(bodyParser.urlencoded({ extended: true }));'/my-form-endpoint', (req, res) => {
  console.log(req.body.username); // print 'techbos'

Same functionality also comes built-in with Express v4.16.0+.

For parsing form-data, you can use packages such as busboy or formidable. See their doc for how-to.

What's your favorite library for sending / handling forms? Leave a comment below to share your experience ❤️❤️❤️!

Check out and leave some feedback on what features you'd like to see next ❤️❤️❤️!

Top comments (6)

9kopb profile image

wow, thx!

krankj profile image
Sudarshan K J

Thanks for the detailed info!

zohebkhan profile image
Zoheb Alli Khan

Thanks buddy

mo93odi profile image

Thanks for Sharing

ma7eer profile image
Maher Alkendi

Super useful! Thank you!

rukmanigupta7 profile image
Rukmani Gupta FCA MBA

Hi, I am a user, I built a form through CKEditor, now how can get the data filled by users.