Forms: How Data Gets to the Server

The original mechanism for sending data from client to server — still foundational today

GET Forms: Data in the URL

HTML forms are the original mechanism for sending data from the client to the server. Before fetch(), before XMLHttpRequest, before any JavaScript at all — forms were the only way users could send data. Be careful here: this is more about their foundational nature as opposed to being somehow out of date.

When a form uses method="GET", the form data is appended to the URL as query parameters:

<form action="/search" method="GET"> <input type="text" name="q" value="javascript"> <button type="submit">Search</button> </form> <!-- Submitting navigates to: /search?q=javascript -->

POST Forms: Data in the Body

When a form uses method="POST", the form data is sent in the HTTP request body, not the URL:

<form action="/signup" method="POST"> <input type="text" name="firstName"> <input type="text" name="lastName"> <select name="size"> <option value="small">Small</option> <option value="medium">Medium</option> <option value="large">Large</option> </select> <button type="submit">Submit</button> </form>

Common Form Controls

Control HTML Purpose
Text input <input type="text"> Single-line text entry
Password <input type="password"> Masked text entry (but still plaintext in the request!)
Hidden <input type="hidden"> Data sent with form but not displayed (but visible in source!)
Dropdown <select> Choose from predefined options
Textarea <textarea> Multi-line text entry
Checkbox <input type="checkbox"> Boolean toggle (only sent when checked)