Working with Forms and Window Objects Part 1

Introduction

Welcome to the Working with Forms and Window Objects - Part 1 Practice Lab. In this module, you will be provided with the instructions and devices needed to develop your hands-on skills.

Learning Outcomes

In this module, you will complete the following exercise:

• Exercise 1 - Managing Forms and Window Objects

After completing this lab, you will be able to:

• Set, get, and reset the values of form elements
• Use the Window object methods and popup boxes in JavaScript

Exam Objectives

The following exam objectives are covered in this lab:

• 1.5 Complete and debug code that interacts with the Browser Object Model (BOM)

• 5.1 Complete and debug code that retrieves input from forms and sets form field values

Lab Duration

It will take approximately 20 minutes to complete this lab

Exercise 1 - Managing Forms and Window Objects

You can create dynamic HTML forms using JavaScript. The forms can accept inputs at run-time. You can submit the inputs to the web server and clear the values from the form elements using various built-in methods.

To facilitate accurate inputs in forms at run-time, you can display user-friendly messages in popup boxes using the Window object built-in methods. You can open and close new browser windows using the Window object built-in methods.

In this exercise, you will learn how to set, get, and reset the values of form elements. You will also learn how to use the Window object methods and popup boxes in the web pages using JavaScript. The first task in this exercise will be to create a new folder named Forms on PLABWIN10 Desktop, add the folder to a Visual Studio Code workspace, and save the workspace with the name Forms. You will create two new HTML pages named Login.html and Register.html in the Forms workspace.

In the second task, you will design the pages Login.html and Register.html. You will write JavaScript code in Register.html to set, get, and clear the values of form elements. You will also use the Window object methods and popup boxes in the code. You will embed the code in the HTML page and run the page in Google Chrome web browser.