Chapter 6
Working with Forms
Since their introduction in the mid-90s, HTML forms have taken a largely static World Wide Web and turned it into a
place of business and a rich source of interactivity and entertainment. Initially, HTML forms were functionally limited
and clunky, but the specification evolved, and developers learned to work around the issues. Today, thanks in large
part to frameworks such as AngularJS, HTML forms are the underlying reason that web-based applications now rival
traditional desktop applications. To put all of this more concisely: HTML forms cannot be ignored!
In this chapter, we will look at how to use AngularJS with forms and how to perform tasks such as model binding
and data validation. Fortunately, AngularJS doesn’t require that you learn about forms from scratch, as it simply
enhances the way forms already work, although these enhancements are not always obvious or intuitive. Before we
get into all that, however, let’s start with a brief recap of what standard forms offer us.
HTML Forms Overview
I could probably devote a couple of chapters to forms, but I won’t do that, as our focus is, of course, AngularJS.
However, what I do provide here is a relatively brief recap of the basics. If you have already mastered forms, feel free
to skip ahead.
■ Note AngularJS relies upon some relatively new, though well supported, HTML5 features when working with forms.
If you are concerned about older browsers, you should pay extra attention to how your forms behave when testing.
The form Element
The form element itself is a good place to begin. This element defines the form as a whole, and it is a responsible
mechanism for telling the web browser what to do once the user presses the submit button. For instance, where
should it send the data that was collected, and what method should it use to send this data? It does this via its action
and method attributes, respectively.