Form Submit

Submission encodes form data and sends it to the `action` URL. Understand the default behavior before you intercept it with JS.

3 min read Level 1/5 #html#forms#submit

What you'll learn

Trigger submission (Enter or button click)
Pick GET vs POST per use case
Know what `enctype` does

When a user submits a form, the browser:

Validates fields (unless novalidate)
Encodes the data per enctype
Sends it to action via method
Navigates to the response

What Counts As Submission

Pressing Enter while focused in a single-input form (or any text input)
Clicking a <button> (without type="button") or <input type="submit">
Calling form.requestSubmit() from JavaScript

GET Encoding

method="GET":

<form action="/search" method="GET">
  <input name="q" />
  <button>Search</button>
</form>

Submitting with q=astro → browser goes to /search?q=astro. Data becomes a query string. Limited by URL length; visible in browser history.

POST Encoding

method="POST":

<form action="/api/contact" method="POST">
  <input name="email" />
  <textarea name="message"></textarea>
  <button>Send</button>
</form>

The data goes in the request body, by default URL-encoded:

email=ada%40example.com&message=Hello

For file uploads, use enctype="multipart/form-data":

<form method="POST" action="/upload" enctype="multipart/form-data">
  <input type="file" name="avatar" />
  <button>Upload</button>
</form>

Default Button Behavior

A <button> inside a <form> defaults to type="submit". To make a button that does NOT submit, use type="button":

<form>
  <button>Submit</button>
  <button type="button" onclick="toggleHelp()">Help</button>
</form>

Resetting a Form

<button type="reset">Clear</button>

Reset returns every field to its default value. Useful in long forms.

Intercepting With JavaScript

To handle submission without leaving the page:

form.addEventListener("submit", e => {
  e.preventDefault();
  // build the request yourself
  const data = new FormData(form);
  fetch(form.action, { method: form.method, body: data });
});

The HTML form still works without JS — JS adds the no-reload UX.

Up Next

Buttons in detail.

Buttons →