Recipe 11.12 Assembling an Advanced Form

11.12.1 Problem

You want to put together a form to which you can add advanced features such as one-step submission, validation, and multipage forms.

11.12.2 Solution

Create a custom Form class.

11.12.3 Discussion

In HTML, forms are created within the structure of a FORM element. Because HTML forms provide a container into which all the form elements can be added, it is possible to add more advanced functionality to them. ActionScript does not provide an analogous structure, however. Therefore, Flash offers nothing that inherently holds multiple elements on a page together into a true form. If you want to add advanced features to your forms, you must create a Form class to act as the container for all the form elements.

The Form class's primary function is to keep track of the otherwise disparate elements (text fields, list boxes, etc.) that you want to be part of a single form. To accomplish this, your Form class needs to have an array property to which elements can be added. In the example code, this array property is named formElements. Next, the Form class also needs a method, addElement( ), by which elements can be added to forms.

Here is the basic implementation of our Form class:

// Define the Form constructor as a global class, as with other UI components.
_global.Form = function (  ) {

  // Initialize the formElements array to store references to all the elements.
  this.formElements = new Array(  );
};

// The addElement(  ) method adds an element to the formElements array.
Form.prototype.addElement = function (element) {
  this.formElements.push(element);
};

The Form class serves as the foundation of all the advanced form features in the recipes that follow. Store it in a Form.as file and include it in any projects that require advanced form management.