Advanced Forms Data Capture
Overview
In WDD 130 and WDD 131, you were introduced to frontend web form design. In this learning activity, we will focus on capturing and displaying the form data on a reservation confirmation page.
Web forms are a very powerful tool for interacting with users — most commonly they are used for collecting data from users, or allowing them to control a user interface - MDN
Prepare
- Read: form methods for GET and POST
- Read: Location: href property
- Read: String.prototype.split()
- Read: String.prototype.replace()
Activity Instructions
In this activity, you will create a form using several different form elements. You will then create a thanks.html page to display the form information entered by the user.
These labs are designed so that you can follow along and learn. You will need to pause the video instruction as you code your own project.
- Download the start file to your computer's desktop
- Watch Form Data Part 1 [2:54]
- Watch Form Data Part 2 [9:11]
Test and Share
Test your updates and share your work with your peers on Microsoft Teams.