What a form does

What a form does

Understand how a form collects named values and turns a user action into an HTTP request the server can process.

8 minute lesson

~~~

A form is an agreement between the page and the server. The page collects named values. The browser turns those values into an HTTP request. The server decides whether to accept them.

Start with a form that works without JavaScript:

<form action="/subscribe" method="post">
  <label for="email">Email address</label>
  <input id="email" name="email" type="email" required>
  <button type="submit">Subscribe</button>
</form>

When you submit it, the browser reads the successful controls inside the form. Here it finds one named value, such as email=hello@flaviocopes.com.

The action tells the browser where to send the request. The method tells it to use POST. The server at /subscribe still has to parse and validate the value before storing it or sending email.

Notice the different jobs:

  • id connects the input to its label
  • name creates the key sent to the server
  • type gives the browser input and validation behavior
  • required blocks an empty native submission

An input without a name can still appear and accept text, but normal form submission leaves it out.

Open the Network panel, submit the form, and inspect the request method, URL, and payload. That request is the real output of the form.

Lesson completed