Facebook Cookbook

Forms the Facebook Way

Problem

I need to display a form in my app and would really like to use the same layout and fields that Facebook uses for its forms so that my app matches the rest of Platform.

Solution

The fb:editor family of tags gives you the ability to quickly create a Facebook-style form. The layout gets wrapped in fb:editor tags, with the rest of the family inserted between your opener and closer to fill in the form itself:

<fb:editor action="http://someserver.com/somePage.php">
    <fb:editor-custom label="About You">It's all about you!</fb:editor-custom>
    <fb:editor-text label="Your Name" name="name"/>
    <fb:editor-textarea label="Comments" name="comments"/>
    <fb:editor-divider/>
    <fb:editor-time label="Current Time" name="time" value="<?php echo time();?>"/>
    <fb:editor-month label="Current Month" name="month" value="4"/>
    <fb:editor-date label="Current Date" name="date" value="<?php echo time();?>"/>
    <fb:editor-divider/>
    <fb:editor-custom label="Favorite Ice Cream">
        <select name="iceCream">
            <option value="chocolate" selected="selected">Chocolate</option>
            <option value="vanilla">Vanilla</option>
            <option value="strawberry">Strawberry</option>
            <option value="moosetracks">Moose Tracks</option>
        </select>
    </fb:editor-custom>
    <fb:editor-divider/>
    <fb:editor-buttonset>
        <fb:editor-button value="Give me Ice Cream!"/>
        <fb:editor-cancel />
    </fb:editor-buttonset>
</fb:editor>

The code here shows all of the various subtags, which are covered in great detail in the upcoming Discussion. This code ...