Learning Angular/

...

/

Introducing Forms to Web Apps

Introducing Forms to Web Apps

Learn what data binding is with template-driven forms and create your first form.

We'll cover the following...

A form in a web application consists of a <form> HTML element that contains some <input> elements for entering data and a <button> element for handling that data. The form can retrieve data and either save it locally or send it to a server for further manipulation. The following is a simple form that is used for logging a user into a web application:

Press + to interact
<form> 
    <div>
        <input type="text" name="username" placeholder="Username"> 
    </div> 
    <div>
        <input type="password" name="password" placeholder="Password"> 
    </div> 
    <button type="submit">Login</button> 
</form>

The preceding form has two <input> elements: one for entering the username and another for entering the password on line 3. The type of the password field is set to password so that the content of the input control is not visible while typing on line 6.

The type of the <button> element is set to submit so that the form can collect data by clicking the button or pressing “Enter” on any input control. We could have added another button with a reset type to clear form data. Notice that an HTML element must reside inside the <form> element to be part of it. The following screenshot shows what the form looks like when rendered on a page:

Press + to interact
Login form
Login form

Web applications can significantly enhance the user experience by using forms that provide features such as autocomplete in input controls or prompting to save sensitive data. Now that we have understood what a web form looks like, let’s learn how all that fits into the Angular framework.

Data binding with template-driven forms

Template-driven forms are one of two different ways of integrating forms with Angular. It is an ...