TypeScript Academy · Lesson

Working with FormData, URL, URLSearchParams

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

Lesson 3 of 38 steps

Working with FormData, URL, URLSearchParams is a free TypeScript Academy lesson on CoddyKit. This is 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, and your progress syncs across the web and the CoddyKit app. The TypeScript Academy course includes 3 lessons in total.

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?

Answer it in the interactive lesson

Recap

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

Free to start

Learn TypeScript with an AI tutor — free

Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.

Courses: 101
Lessons: 352

Start learning free View the full course

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. 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. The TypeScript Academy course includes 3 lessons in total.

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, so you can start here or from the beginning and move at your own pace. This is lesson 3 of 3.

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

lib DOM types & querySelector (strict null checks)
Event types, custom events; narrowing HTMLElement subtypes
Working with FormData, URL, URLSearchParams

← Back to TypeScript Academy