Introduction to the Forms

Learn why forms are a central part of any web application.

We'll cover the following

The evolution of web forms

Websites without forms provide a passive, unidirectional flow of information. We could benefit from the content, but it wouldn’t be interactive, with no way to edit some data. Early web users had precisely this experience.

Over the years, forms have become more and more important because they allow us to provide whole new streams of features. Without forms, we couldn’t authenticate or create an account, order dinner at any time of the day, or leave feedback about its quality.

Each of these form types comes with different goals and requirements, and they have several validation rules with varying complexity.

Originally, web forms were just functional and brutally dry. This is illustrated below.

The main goal was to gather client data or keys to execute queries and not much else.

Luckily, along with the development of JavaScript and CSS, forms went through constant evolution, leveraging the functionalities offered by new web technologies. Not only did the layout become richer, but the business rules also started getting more and more complex.

Animated login form by Darin Senneff
Animated login form by Darin Senneff

In this animated form, users can log in to the app and the yeti reacts to the cursor position while the user enters the email address, and hides its eyes when the user enters the password. This is an amazing example of how we can design complex, yet engaging forms.

Requirements became more sophisticated too. Some rules needed to consider multiple fields to confirm a valid state, or the result for validation checks came asynchronously from the server.

We’ll learn to master Angular reactive forms by directly implementing real-world web form requirements. Angular offers specific APIs to realize complex scenarios elegantly.

At the end of the course, you’ll have a solid understanding of Angular reactive forms and will be ready to implement any form specification in your projects.