Overview

Introduction

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

Exam Objectives

The following exam objective is covered in this lab:

3.4 Construct and analyze markup that uses form elements

Lab Duration

It will take approximately 25 minutes to complete this lab.

Exercise 1 - Creating HTML Forms

Consider a situation where you need to open a new bank account. As the first step, you need to fill out a paper form at the bank specifying your details. The bank records the details of its prospective customer mentioned in the paper form.

Similar to a paper form, you can create forms in websites using HTML. You can have different types of user interface controls on the forms in web pages. You can have textboxes, password box, email box, radio buttons, checkboxes, and buttons. The

tag in HTML is the most important tag to create web forms.

So far through the website, Smart Learning Solutions has provided a brief introduction about the company, their leadership team, courses offered, and blogs. Now, the company wants to enable their learners to create login accounts to facilitate online learning. In addition, they want the existing learners to directly login into the learning portal with the assigned usernames and passwords. All these objectives can be achieved by creating HTML forms in the company’s website.

In this exercise, as the first task, you will download the Visual Studio Code workspace from the Intranet and extract it.

In the second task, you will create two new HTML pages login.html and register.html in the sls workspace. You will add code in login.html to create a login form with form elements such as textbox, password box, and submit button. In a real-time scenario existing users can sign into the portal from this page. However, for new users you will create a link, which will take you to register.html.

In the third task, you will add code in register.html to create a registration form with textboxes, email box, password box, radio buttons, checkbox, submit, and reset buttons. To navigate back to login.html from register.html, you will create a link on register.html.

Learning Outcomes

After completing this exercise, you will be able to:

Use the form elements in HTML pages

Comprehensive Learning

See the full benefits of our immersive learning experience with interactive courses and guided career paths.