What a GET form would send
FormData collects exactly what the browser would send. Press Search too: the preview logs the submitted pairs instead of leaving the page.
A <form> collects the values of its named controls and, when submitted, sends them to the URL in action using the HTTP method in method: GET puts them in the URL, POST puts them in the request body.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write a GET form that sends a product search to /products with two fields: q (the search text) and sort with the value price. What URL does searching for red shoes produce?
Write a POST form that sends a comment to /comments with fields author and text, and log what it would send using FormData.
Explain it without notes
Walk through what happens when someone presses Submit on a form with method="get".
When would you choose GET and when POST for a form? Give an example of each.
Which controls in a form are included in the submitted data, and which are skipped?
Why do spaces and & signs need encoding in a query string?
Preview
Console
Nothing logged yet.Expected console output
Method: get
Action: /search
Query string: q=cats+%26+dogs&lang=en
Full URL: /search?q=cats+%26+dogs&lang=en