| | {section} |
| | {column:width=80%} |
| | |
| | h2. 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. |
| | |
| | h2. CommentForm.mxml |
| | |
| | The following code example demonstrates the use of a Form container control. |
| | {code} |
| | <?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> |
| | {code} |
| | |
| | h2. Rendered Application |
| | |
| | | {test-flash:350|275|Use_H_Form.swf}Use_H_Form{test-flash} |
| | | {test-flash:275|350|Use_H_Form.swf}Use_H_Form{test-flash} |
| | |
| | {column} |
| | {column} |
| | {adbe-prev:http://learn.adobe.com/wiki/display/Flex/Combined+Layout} |
| | {adbe-next:http://learn.adobe.com/wiki/display/Flex/MXML+vs+ActionScript+3.0} |
| | {rate:title=User rating|theme=dynamic|key=focal|display=default} |
| | {column} |
| | {section} |
| | |
| | {adbe-prev:http://learn.adobe.com/wiki/display/Flex/Combined+Layout} |
| | {adbe-next:http://learn.adobe.com/wiki/display/Flex/MXML+vs+ActionScript+3.0} |
