WDD 231: Web Frontend Development I

W04 Learning Activity: Advanced Forms

Overview

The focus of this learning activity is to capture and display HTML form data on a confirmation page using URL query parameters.

Prepare

In previous learning activities, you have learned about the purpose of HTML forms and when to use the different form elements such as various input types (text, password, checkbox, date, etc.) to collect information and interact with the user.

The key HTML form concepts include:

• HTML forms are used to collect user input and submit it to a server for processing.
• There are many form-related elements and input types, including text fields, labels, radio buttons, checkboxes, dropdowns, and buttons.
• Form data can be sent using different methods (GET or POST) depending on the requirements.
• Form elements can be grouped using the <fieldset> and <legend> elements.
• Form validation can be done using HTML attributes (e.g., required, pattern) or JavaScript.

In this learning activity, you will learn how to use JavaScript to capture the information entered into the form and display it on a confirmation page using the URLSearchParams object to parse the URL and extract the query string parameters.

The key concepts are:

• JavaScript can be used to manipulate form data and handle form submissions dynamically.
• The query string of a URL can be read with URLSearchParams.

URLSearchParams

The URLSearchParams interface provides utility methods to work with the query string of a URL. It allows you to easily access, manipulate, and iterate over the parameters in the query string.

For example, if you have a URL like this: https://example.com/?name=John&age=30

You can use URLSearchParams to extract the parameters:

const params = new URLSearchParams(window.location.search);
const name = params.get('name'); // "John"
const age = params.get('age'); // "30"

In this example, window.location.search returns the query string part of the URL (e.g., ?name=John&age=30). The URLSearchParams constructor takes this string and creates an object that allows you to access the individual parameters using the .get() method.

Additionally, you can use methods like .has(), .set(), and .delete() to check for the existence of parameters, update their values, or remove them from the query string.

For example, you can check if a parameter exists:

if (params.has('name')) {
  console.log('Name parameter exists!');
}

You can also update a parameter's value:

params.set('age', 31); // Update age to 31

And you can remove a parameter:

params.delete('name'); // Remove name parameter

Finally, you can convert the URLSearchParams object back to a query string using the .toString() method:

const queryString = params.toString(); // "age=31"

This allows you to easily manipulate the query string and update the URL without having to manually construct it.

Activity Instructions

In this activity, you will work with a form that has several different form elements. You will then create a page to display the form information entered by the user. You will use the URLSearchParams object to parse the URL and extract the query string parameters and display them on the confirmation page.

Download Starting Files

Download the starting files (ZIP) and extract them into your wdd231 folder.

Overview of Form Methods

Watch and follow along: Form Data Part 1 Project Overview

Capturing Form Data

Watch and follow along: Form Data Part 2 A demonstration capturing information from URLSearchParams

In summary, the steps demonstrated in the videos are:

1. Set the form's method to get and its action to the confirmation page.
2. On the confirmation page, create a URLSearchParams object from window.location.search.
3. Read each value with .get(), using the name attribute of each form control.
4. Display the values on the page.

Test and Share

Test your updates and share your work with your peers on Microsoft Teams.