Editor Display

To work with editing data, Facebook has derived a set of tags grouped in this section. The rendered form will display in two columns with the label on the left and an input field on the right. The one caveat to using the <fb:editor> tags to create forms is that you cannot use mock Ajax. If you want to be able to use mock Ajax, you will need to manually create your own form.

• <fb:editor> is the outermost tag used to create an editable form.
• <fb:editor-button> creates a button for your form.
• <fb:editor-buttonset> creates a container for one or more buttons.
• <fb:editor-cancel> creates a cancel button for the form.
• <fb:editor-custom> allows you to insert whatever code you want, as long as it’s valid FBML.
• <fb:editor-date> creates two select boxes in the form for the month and day.
• <fb:editor-divider> adds a horizontal line divider to your form.
• <fb:editor-month> creates a select box populated with the months of the year.
• <fb:editor-text> creates an input box for your form.
• <fb:editor-textarea> creates a textarea box for your form.
• <fb:editor-time> creates select boxes for hours, minutes, and an a.m./p.m. indicator for your form.

As an example of this usage, consider the following.

<fb:editor action="." labelwidth="100">
<fb:editor-text name="input" label="Text" />
<fb:editor-textarea name="textarea" label="Editor Text Area" />
<fb:editor-custom label="Select">

<select name="select">

<option value="editor-custom">Editor Custom Select</option>

</select>

</fb:editor-custom>
<fb:editor-divider />
<fb:editor-date name="date" label="e" />
<fb:editor-month name="month" label="h" />
<fb:editor-time name="time" label="e"/>
<fb:editor-buttonset>

<fb:editor-button value="Add"/>

<fb:editor-button value="Edit"/>

<fb:editor-cancel />

</fb:editor-buttonset>

</fb:editor>

Remember, the form the tag produces uses the Post method. If you use the tag, you will need to write some code on your server to then do something, but the purpose of this example was to show how to use these tags in conjunction with one another to create a form. In this case, the previous snippet will render as depicted in the below figure.