Forms and debugging

What forms send

Follow named form controls into a GET query or POST body and learn which values the browser includes or leaves out.

A form submission is a collection of name-value pairs.

Consider this search form:

<form action="/search" method="get">
  <label for="query">Search</label>
  <input id="query" name="q" value="html">
  <button>Search</button>
</form>

Submitting it takes the browser to this URL:

/search?q=html

The name is q. The current value is html.

The label and id make the control understandable and clickable. They do not change the submitted pair. The name attribute does that.

With method="post", the browser sends the values in the request body instead of adding them to the URL.

Which controls are included?

The browser normally sends successful named controls:

  • a text input sends its current value
  • a checked checkbox sends its name and value
  • the selected option sends its value
  • the button used to submit can send its name and value

An unchecked checkbox is not sent. A disabled control is not sent. A control without name is not sent.

This can surprise you when the control is visible in the page but missing on the server.

Use the Network panel to inspect a real submission. Look at the query string for GET or the request payload for POST.

The dedicated Forms course covers controls, encoding, files, validation, and server-side safety in depth. For HTML, remember the core path:

control name + current value -> HTTP request -> server

If the server says a field is missing, check three things in order: does the control have a name, is it disabled, and for checkboxes, is it checked?

Multiple checkboxes can share one name when they represent a list of choices. The server receives one pair per checked box. That pattern is easy to miss when you only inspect the visible UI.

Try submitting a form on a site you use, with the Network panel open. Reading one real payload teaches more than memorizing the rules.

Lesson completed