Sending Form Data

When a form is submitted, the browser packages the data and sends an HTTP request to the server. Whether that data travels in the URL or in the request body — GET or POST — and how it's encoded determines what forms are good for. This lesson shows what actually gets sent.

GET: data in the URL

Submitting this sends the browser to a URL like:

TXT resulting URL

https://httpbin.org/get?q=html+forms&sort=newest

Everything after ? is the query string. GET is the default method. Use it for requests that only read data — searches, filters, pagination — because the resulting URL can be bookmarked, shared and cached, and refreshing the page is harmless.

POST: data in the request body

With POST, the data travels inside the HTTP request rather than in the URL. Use POST for anything that changes something — creating an account, placing an order, sending a message, uploading a file — and for sensitive or large data.

	GET	POST
Data location	URL query string	Request body
Visible in address bar and history	Yes	No
Bookmarkable / shareable	Yes	No
Size limit	Practical URL limits (a few thousand characters)	Much larger
Safe to repeat	Yes	No — the browser warns before resubmitting
Use for	Searches, filters	Logins, purchases, uploads, changes

Security: POST hides data from the URL, but it isn't encrypted by itself. Only HTTPS protects form data in transit — never put a login form on a plain HTTP page.

Encoding types

`enctype`	Format	Use for
`application/x-www-form-urlencoded` (default)	`name=Ana&city=Lisbon`	Ordinary forms
`multipart/form-data`	Separate parts, can contain binary files	Forms with `type="file"` inputs
`text/plain`	Unencoded text	Debugging only

HTML upload.html

<form action="/upload" method="post" enctype="multipart/form-data">
  <label for="cv">Upload your CV</label>
  <input id="cv" name="cv" type="file" accept=".pdf">
  <button type="submit">Upload</button>
</form>

Without enctype="multipart/form-data" (and method="post"), only the file's name would be sent, not its contents.

What does and doesn't get sent

Only controls with a name are submitted.
Disabled controls aren't submitted; readonly ones are.
Unchecked checkboxes and radios send nothing at all.
The clicked submit button's name/value is included, if it has them.
Several controls with the same name (like a checkbox group) send several pairs: topping=cheese&topping=olives.

Where the data goes

The action URL must point to something that can process the data — server code written in PHP, Python (Django, Flask, FastAPI), Node.js, or a form-handling service. A static HTML site has no server code, so for things like contact forms people use services such as Formspree, Netlify Forms or Basin, which receive submissions and email them on.

After submitting

A well-behaved server responds to a successful POST by redirecting to a confirmation page (the "Post/Redirect/Get" pattern). That way, refreshing the confirmation page doesn't submit the form a second time.

Submitting without a page reload

Modern apps often intercept the submit event and send the data with JavaScript's fetch(), updating the page in place. The HTML form stays the same — which means it still works if JavaScript fails to load. See the JavaScript fetch lesson.

Try it yourself

Submit this form, then change method="get" to post (and the action to https://httpbin.org/post) and compare what the test service shows:

<form action="https://httpbin.org/get" method="get">
  <p><label for="t-name">Name</label> <input id="t-name" name="name" value="Ben"></p>
  <fieldset>
    <legend>Interests</legend>
    <label><input type="checkbox" name="interest" value="html" checked> HTML</label>
    <label><input type="checkbox" name="interest" value="css" checked> CSS</label>
    <label><input type="checkbox" name="interest" value="js"> JavaScript</label>
  </fieldset>
  <button type="submit" name="action" value="save">Save</button>
</form>

Result

PreviousForm Validation NextThe <head>