Working with FormData, URL, URLSearchParams
Collect form inputs with FormData, parse and build URLs safely, and manipulate query parameters with URLSearchParams.
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);
}
}All lessons in this course
- lib DOM types & querySelector (strict null checks)
- Event types, custom events; narrowing HTMLElement subtypes
- Working with FormData, URL, URLSearchParams