Forms Intro

Wrap inputs in a `<form>` with `action` and `method`. The browser handles submission, URL encoding, and navigation.

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

What you'll learn

Build a minimal form
Set `action` and `method`
Recognize the default browser behavior

A <form> is how the browser sends user input to a server. Without any JavaScript, the browser:

Collects every named input
Encodes them for transport
Sends them to the URL in action
Navigates to the response

That’s a lot of behavior for free.

A Minimal Form

<form action="/api/contact" method="POST">
  <label for="email">Email</label>
  <input id="email" name="email" type="email" required />

  <label for="message">Message</label>
  <textarea id="message" name="message" required></textarea>

  <button>Send</button>
</form>

Key Attributes

Attribute	Purpose
`action`	Where to send the form. Defaults to the current URL.
`method`	`GET` (data in URL) or `POST` (data in request body)
`enctype`	How the data is encoded — `application/x-www-form-urlencoded` (default), `multipart/form-data` (for files), `text/plain`
`target`	Like a link’s `target`. `_blank` opens the response in a new tab
`autocomplete`	`on` / `off` for the whole form
`novalidate`	Skip built-in validation on submit

GET vs POST

GET — data goes in the URL as ?email=ada@example.com&.... Good for searches and filters. Visible in browser history.
POST — data goes in the request body. Good for creates, updates, sensitive data, or large payloads.

For an upload form, also set enctype="multipart/form-data".

Inputs Need `name`

Only inputs with a name attribute get sent. An input without name is for display only.

<input name="email" />     <!-- sent as: email=... -->
<input />                  <!-- NOT sent          -->

Submission Without JavaScript Works

The form above, with no JS, actually submits — the browser POSTs to /api/contact and navigates to the response. JavaScript can intercept submission with event.preventDefault() and send the data via fetch instead — but the form still works without JS.

Up Next

The many flavors of <input>.

Inputs →