0Pricing
TypeScript Academy · Lesson

Working with FormData, URL, URLSearchParams

Collect form inputs with FormData, parse and build URLs safely, and manipulate query parameters with URLSearchParams.

Working with FormData, URL, URLSearchParams is a free TypeScript Academy lesson on CoddyKit — lesson 3 of 3. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the TypeScript Academy learning path, one of 3 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Intro

Goal: Work with browser data APIs: FormData, URL, and URLSearchParams.

  • Collect form values
  • Build and parse URLs
  • Manage query parameters

FormData basics

FormData collects inputs by name. Iterating entries() gives [name, value] pairs as strings or File objects.

const form = document.querySelector("form#login");
if (form) {
  const fd = new FormData(form);
  for (const [key, val] of fd.entries()) {
    console.log(key, val);
  }
}

FormData append

You can build FormData manually with append, including Blob/File objects for uploads.

const fd = new FormData();
fd.append("username", "alice");
fd.append("file", new Blob(["hi"]), "greet.txt");

for (const [k,v] of fd.entries()) {
  console.log(k, v);
}

URL parts

URL parses a string into parts (hostname, pathname, search, hash). Safer than manual string splitting.

const url = new URL("https://example.com/page?x=1");
console.log(url.hostname); // example.com
console.log(url.pathname); // /page

URLSearchParams get

URLSearchParams lets you read/write query params easily. get() returns string | null.

const params = new URLSearchParams("?q=go&type=video");
console.log(params.get("q")); // go
console.log(params.get("missing")); // null

Params update

Update params with set, add with append, remove with delete. Use toString() to serialize.

const params = new URLSearchParams();
params.set("page", "1");
params.set("q", "typescript");
console.log(params.toString()); // page=1&q=typescript

Params get check

Quick check: What does URLSearchParams.get("key") return when missing?

Recap

Recap: FormData collects input name/values. URL parses safely. URLSearchParams manages query params.

Frequently asked questions

Is the “Working with FormData, URL, URLSearchParams” lesson free?

Yes — the full text of “Working with FormData, URL, URLSearchParams” is free to read here on the web, and the TypeScript Academy course includes 3 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the TypeScript Academy course, upgrade to CoddyKit PRO.

What will I learn in “Working with FormData, URL, URLSearchParams”?

Collect form inputs with FormData, parse and build URLs safely, and manipulate query parameters with URLSearchParams. You practise TypeScript Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start TypeScript Academy?

No prior experience is required. TypeScript Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 3, so you can start here or from the beginning and move at your own pace.

How long does the “Working with FormData, URL, URLSearchParams” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this TypeScript Academy lesson?

Yes. Every TypeScript Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. lib DOM types & querySelector (strict null checks)
  2. Event types, custom events; narrowing HTMLElement subtypes
  3. Working with FormData, URL, URLSearchParams
← Back to TypeScript Academy