Form Handling Live Demo

This demo shows how Express handles different types of form submissions. Try each method and see how the server receives the data.

            Key Point: The server can handle both URL-encoded forms and JSON. This lets you support traditional HTML forms (progressive enhancement) AND modern JavaScript clients.
        

GET Form GET

Data goes in the URL query string. Good for searches, filters, bookmarkable URLs.

Server access: req.query.fieldname

POST Form (URL-encoded) POST

Traditional HTML form submission. Works without JavaScript!

Content-Type: application/x-www-form-urlencoded

Server access: req.body.fieldname

POST JSON (via JavaScript) POST

Modern API-style submission. Requires JavaScript to encode the payload.

Content-Type: application/json

Server access: req.body (parsed object)

Flexible Endpoint (Handles Both!)

A well-designed endpoint can accept both form-urlencoded AND JSON, supporting progressive enhancement:

The Code Behind This

View the source: form-live-demo.js

Back to Module 04