Use a GET form when a submission only searches, sorts, or filters data: give every control a name, and the browser places its successful values in the action URL’s query string. For state-changing submissions, use POST, process the request, then redirect to a clean result URL—preferably with HTTP 303 See Other. If JavaScript handles the form without navigation, build the query with URLSearchParams and update history with pushState() or replaceState().
Choose the URL-update pattern that matches the form
| Situation | Use | Result |
|---|---|---|
| Search, sorting, or filtering | GET form | Named fields become query parameters and the result can be bookmarked. |
| Saving or changing server data | POST, then redirect | Submitted data stays in the request body; the browser finishes at a GET URL. |
| JavaScript renders results without navigation | URLSearchParams with pushState() or replaceState() |
The app synchronizes its URL, history, and displayed state. |
| Passwords or other sensitive values | POST; never put the value in the URL | Credentials are not exposed in the address bar or ordinary URL handling. |
Use a GET form for sorting, filtering, and searching
GET is the browser’s built-in mechanism for putting submitted named controls into the query string. Each independent value needs its own named control.
<form action="/finance/markets/" method="get">
<label for="sortname">Sort by</label>
<select id="sortname" name="sortname">
<option value="date">Date</option>
<option value="title">Title</option>
</select>
<label for="sortdir">Direction</label>
<select id="sortdir" name="sortdir">
<option value="asc">Ascending</option>
<option value="desc">Descending</option>
</select>
<button type="submit">Apply</button>
</form>Choosing “Title” and “Descending” produces a URL such as /finance/markets/?sortname=title&sortdir=desc. The exact path comes from the form’s action, and the values come from the selected options.
Why separate names matter
Do not put sortdir=desc inside the sortname option value and expect a second parameter. The browser treats that entire text as one value and URL-encodes reserved characters. Use separate controls such as name="sortname" and name="sortdir"; the form handles encoding for you. Although GET is the default form method, writing method="get" makes the intended behavior explicit.
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Scan for outdated or missing drivers - takes under a minute3Repair Windows errors before they cause bigger problems#1 Best Overall
Use POST followed by a redirect when the form changes data
Creating an account, saving a record, or performing another state-changing operation belongs in a POST request. After validating and processing the submitted fields, have the server return a redirect to the canonical result URL, for example /results?sortname=title&sortdir=desc.
- Receive the POST request and validate every submitted value on the server.
- Apply the requested change or complete the operation.
- Build the destination URL from accepted values using your server language’s URL-building tools.
- Return a redirect response with that URL in the
Locationheader. - Use HTTP
303 See Otherwhen the follow-up request should clearly be a GET.
A 303 redirect tells the browser to request the destination with GET, creating the standard POST/Redirect/GET flow and preventing a refresh from resubmitting the original POST. Never copy unvalidated input directly into a redirect URL.
Rank #2
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Keep sensitive data out of query strings
URLs appear in browser history, bookmarks, address bars, logs, analytics systems, and sometimes referrer data. Do not submit passwords or similarly sensitive values with GET or place them in a redirect query string. Use POST and keep such data in the request body; avoid reflecting it in the destination URL.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Update the URL in a JavaScript application
When JavaScript intercepts the submit event and fetches or renders results without a full page navigation, use browser URL APIs rather than concatenating raw strings.
Rank #3
const params = new URLSearchParams(new FormData(form));
const url = new URL(window.location.href);
for (const [key, value] of params) {
url.searchParams.set(key, value);
}
// Fetch/render the results separately, then add a Back-button step.
history.pushState(
{ sort: url.searchParams.get("sortname") },
"",
url
);Choose between pushState and replaceState
history.pushState()adds a new history entry, so the Back button can return to the previous filter or sort.history.replaceState()changes the current entry without adding another Back-button step; use it for transient edits or normalization.
Both methods require a same-origin URL. They change the visible address bar and browser history, but they do not fetch the new URL or render its results. Your application must update the interface itself and restore the corresponding state when the user navigates Back or Forward, typically by handling the popstate event.
Quick Recap
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Common mistakes and fixes
- Missing
nameattributes: controls without names are not submitted as query parameters. Add a name to every value you need. - Combining parameters in one option value: use separate named fields instead of embedding ampersands in a value.
- Using GET for a state change: use POST for operations that create, edit, or delete server data.
- Expecting POST data in the destination URL: process the POST, then issue a redirect to the desired GET URL.
- Assuming
pushState()loads a page: render or fetch the new state separately and implement Back/Forward restoration. - Building query strings by hand: use a native form,
URL, orURLSearchParamsso spaces, ampersands, and other reserved characters are encoded correctly.
A practical decision checklist
- Does submission only request a representation, such as search, sort, or filter results? Use a GET form.
- Does it change server-side data? Use POST, then redirect—normally with 303—to a GET result URL.
- Does JavaScript own the interaction and avoid navigation? Update the URL with
URLSearchParams, then choosepushState()orreplaceState()according to the desired Back-button behavior. - Could a value be confidential? Keep it out of the URL entirely.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
