Form Layout in flex

The Form Layout Container

• The Form container lets you:
  • Control the layout of a form.
  • Mark form fields as required or optional.
  • Handle error messages.
  • Bind your form data to the Flex data model to perform data checking and validation.
• The Form container, like all containers, encapsulates and lays out its children.
• The Form container controls the sizing and layout of the contents of the form.
• The FormHeader defines a heading for your Form. Multiple FormHeading controls are allowed.
• A FormItem container specifies a Form element consisting of the following parts:
  • A single label.
  • One or more child controls or containers, such as input controls.
• You can also insert other types of components in a Form container.

CommentForm.mxml

The following code example demonstrates the use of a Form container control.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="absolute"
    backgroundColor="#FFFFFF"
    backgroundAlpha="0">

    <mx:Form x="50" y="50"
        verticalGap="15">

        <mx:FormHeading label="Send us comments" />

        <mx:FormItem label="Full Name:">
            <mx:TextInput id="fullName" />
        </mx:FormItem>

        <mx:FormItem label="Email:">
            <mx:TextInput id="email" />
        </mx:FormItem>

        <mx:FormItem label="Comments:">
            <mx:TextArea id="comments" />
        </mx:FormItem>

        <mx:FormItem>
            <mx:Button id="submit"
                label="submit" />
        </mx:FormItem>

     </mx:Form>

</mx:Application>

Rendered Application