We have already learnt the basic navigation related FBML tags and user related FBML tags.

This time, we will discuss some Editor Display related FBML tags.

Editor Display related FBML tags are basically used in displaying a form containing UI elements to gather user input. The concept behind is actually the same as that for a HTML form.

 

Creating a Form for Gathering User Input - fb:editor

The <fb:editor> tag is similar to HTML's <form> tag. Sample code is listed below:

<fb:editor action="process_form.php?fbuid=<?php echo $user_id; ?>"
labelwidth="150"> <!-- input elements are to be inserted here --> </fb:editor>

 

Displaying an Input Text Field - fb:editor-text

Display an input text field within a FBML form is simple.

To display the following input text field in the form,

the code would be:

<fb:editor action="process_form.php?fbuid=<?php echo $user_id; ?>"
labelwidth="150"> <fb:editor-text label="Field 1 - Text" name="field1" value="default text" maxlength="50" />
</fb:editor>

That's simple, right?

Let's take a look at the <fb:editor-textarea> tag in official documentation, its usage is simple too.

 

Displaying a Date Selector - fb:editor-date

The <fb:editor-date> tag is used for displaying a date selector in the form.

The date selector is simply 2 drop down list boxes, one for the month and one for the day.

To display the following date selector,

simply add the following code within the <fb:editor> tag:

<fb:editor-date label="Field 2 - Date" name="field2" value="1281848400" />

 

Displaying a Custom Element - fb:editor-custom

I use the term "custom elements" to refer the UI elements that FBML does not support. Referring to the official documentation, there is no FBML tags for UI elements like drop downs, checkboxes, radio buttons.

According to the FBML documentation, the <fb:editor-custom> tag allows us to put any content into an fb:editor block (i.e. within the form), as long as it is valid FBML. However, the documentation does not explain what are valid and what are invalid.

As a sample, if you want to display the following drop down,

the following code can be used:

<fb:editor-custom label="Field 4 - Drop Down" name="custom1">
<select name="field4">
<option value="">Please select...</option>
<option value="1">Option 1</option>
<option value="2">Option 2 </option>
</select>
</fb:editor-custom>

 

Displaying Radio Buttons

While we can display a drop down field by a inserting a HTML <select> element within the <fb:editor-custom> tag, it is natural that we want to the same for displaying radio buttons. However, that doesn't work! (I suggest you to try it and see what the results are.)

My way to display radio buttons within the FBML form is to cheat it!

Take a look at the following code :

<tr><th class="label"><label>Field 5,6,7 - Radio Buttons:</label></th><td>
<input type="radio" name="field5" value="Radio1" />Value1
<input type="radio" name="field5" value="Radio2" />Value2
<input type="radio" name="field5" value="Radio3" />Value3
</td></tr>

The radio button created will look like this:

I believe this trick is applicable also for displaying checkboxes.

 

Displaying the Form Buttons - fb:editor-buttonset, fb:editor-button & fb:editor-cancel

A form will never be completed without the "Submit" and "Cancel" buttons (or whatever you name them).

To display buttons, we should do the followings:

For example, the following code will display a "Submit" button and a "Cancel" button on the form:

<fb:editor-buttonset>
<fb:editor-button name="submit" value="Submit"/>
<fb:editor-cancel value="Cancel" href="input_form.php"/>
</fb:editor-buttonset>

 

Putting Them All Together

To round up what we have learnt, the complete code for displaying a form is shown below:

<h1>This is a demo page with various Edit Display related FBML tags.</h1>
<p>&nbsp;</p>

<fb:editor action="process_form.php?fbuid=<?php echo $user_id; ?>" labelwidth="150"> <fb:editor-text label="Field 1 - Text" name="field1" value="default text" maxlength="50" /> <fb:editor-date label="Field 2 - Date" name="field2" value="1281848400" /> <fb:editor-textarea label="Field 3 - TextArea" name="field3" rows="10"/> <fb:editor-custom label="Field 4 - Drop Down" name="custom1"> <select name="field4"> <option value="">Please select...</option> <option value="1">Option 1</option> <option value="2">Option 2 </option> </select> </fb:editor-custom> <tr><th class="label"><label>Field 5,6,7 - Radio Buttons:</label></th><td> <input type="radio" name="field5" value="Radio1" />Value1 <input type="radio" name="field5" value="Radio2" />Value2 <input type="radio" name="field5" value="Radio3" />Value3 </td></tr> <fb:editor-buttonset> <fb:editor-button value="Submit"/> <fb:editor-cancel value="Cancel" href="input_form.php"/> </fb:editor-buttonset> </fb:editor>

And the resulted form displayed will be:

 

FBML form vs. HTML form

I know there are people displaying forms by using plain HTML code. This sounds reasonable to me as there are limitations in using FBML tags to render the form (e.g. some UI elements and features are not supported by FBML). Both of them have their own advantages and disadvantages.

Depending on your needs and skills, the choice is up to you!