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.
8 minute lesson
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 will cover controls, encoding, files, validation, and server-side safety in depth. For HTML, remember the core path:
control name + current value -> HTTP request -> serverLesson completed