<fb:editor/>
Renders a special Facebook-formatted form with two columns. This is a great way to render a form that matches the standard Facebook look and feel. For more complex operations for a form, I strongly suggest you just use a standard HTML <form/> tag. See also the following tags elsewhere in this chapter:
<fb:editor-button/>
<fb:editor-buttonset/>
<fb:editor-cancel/>
<fb:editor-custom/>
<fb:editor-date/>
<fb:editor-divider/>
<fb:editor-month/>
<fb:editor-text/>
<fb:editor-textarea/>
<fb:editor-time/>
Here is example FBML code for a form using
<fb:editor/>
:
<fb:editor action="http://apps.facebook.com/fbmlessentials"> <fb:editor-custom> <input type="hidden" name="action" value="editor" /> <input type="hidden" name="submit" value="true" /> </fb:editor-custom> <fb:editor-text label="Your Name" name="name" value=""/> <fb:editor-textarea label="Your Address" name="address" value=""/> <fb:editor-date label="Your Birthday" name="birthday"/> <fb:editor-month label="Current Month" name="month"/> <fb:editor-time label="Current Time" name="time"/> <fb:editor-divider/> <fb:editor-buttonset> <fb:editor-button name="submit" value="Submit Name"/> <fb:editor-cancel name="cancel" value="Cancel"/> </fb:editor-buttonset> </fb:editor>
The underlying HTML looks like the following (Figure 3-34 shows the result). This is important because if you need Mock AJAX or a GET request, you have to render your own form:
<form action="http://apps.facebook.com/fbmlessentials" method="post"> <table class="editorkit" border="0" cellspacing="0" style="width:425px"> <tr class="width_setter"> <th style="width:75px"></th> <td></td> </tr> <tr> <th class="detached_label"><label></label></th> <td class="editorkit_row"> <input type="hidden" name="action" value="editor" /> <input type="hidden" name="submit" value="true" /> </td> <td class="right_padding"></td> </tr> <tr> <th><label>Your Name:</label></th> <td class="editorkit_row"><input type="text" name="name"/></td> <td class="right_padding"></td> </tr> <tr> <th class="detached_label"> <label>Your Address:</label> </th> <td class="editorkit_row"><textarea name="address"></textarea></td> <td class="right_padding"></td> </tr> <tr> <th><label>Your Birthday:</label></th> <td class="editorkit_row"> <select name="birthday_month" id="birthday_month" onchange="editor_date_month_change(this, 'birthday_day','')," > <option value="1">Jan</option><option value="2">Feb</option> <option value="3">Mar</option><option value="4">Apr</option> <option value="5">May</option><option value="6">Jun</option> <option value="7">Jul</option><option value="8">Aug</option> <option value="9">Sep</option><option value="10">Oct</option> <option value="11">Nov</option> <option value="12" selected>Dec</option> </select> <select name="birthday_day" id="birthday_day"> <option value="1">1</option><option value="2">2</option> <option value="3">3</option><option value="4">4</option> <option value="5">5</option><option value="6">6</option> <option value="7">7</option><option value="8">8</option> <option value="9">9</option><option value="10">10</option> <option value="11">11</option><option value="12">12</option> <option value="13">13</option><option value="14">14</option> <option value="15">15</option> <option value="16">16</option><option value="17">17</option> <option value="18">18</option> <option value="19">19</option><option value="20">20</option> <option value="21">21</option> <option value="22">22</option><option value="23">23</option> <option value="24">24</option> <option value="25">25</option><option value="26">26</option> <option value="27">27</option> <option value="28">28</option><option value="29">29</option> <option value="30">30</option> <option value="31" selected>31</option> </select> </td> <td class="right_padding"></td> </tr> <tr> <th><label>Current Month:</label></th> <td class="editorkit_row"> <select name="month" id="month" > <option value="-1">Month:</option><option value="1">Jan</option> <option value="2">Feb</option> <option value="3">Mar</option><option value="4">Apr</option> <option value="5">May</option> <option value="6">Jun</option><option value="7">Jul</option> <option value="8">Aug</option> <option value="9">Sep</option><option value="10">Oct</option> <option value="11">Nov</option> <option value="12">Dec</option> </select> </td> <td class="right_padding"></td> </tr> <tr> <th><label>Current Time:</label></th> <td class="editorkit_row"> <select name="time_hour" id="time_hour"> <option value="1">1</option><option value="2">2</option> <option value="3">3</option> <option value="4" selected>4</option><option value="5">5</option> <option value="6">6</option> <option value="7">7</option><option value="8">8</option> <option value="9">9</option> <option value="10">10</option><option value="11">11</option> <option value="12">12</option> </select><span>:</span> <select name="time_min" id="time_min"> <option value="00" selected>00</option><option value="05">05</option> <option value="10">10</option><option value="15">15</option> <option value="20">20</option> <option value="25">25</option><option value="30">30</option> <option value="35">35</option> <option value="40">40</option><option value="45">45</option> <option value="50">50</option> <option value="55">55</option></select><select name="time_ampm" id="time_ampm"> <option value="am">am</option><option value="pm" selected>pm</option> </select> </td> <td class="right_padding"></td> </tr> <tr><th></th><td colspan="2"><div class="divider"></div></td></tr> <tr><th></th><td class="editorkit_buttonset"> <input type="submit" class="editorkit_button action" value="Submit Name" name="submit" /> <span class="cancel_link"><span>or</span><a href="#">Cancel</a></span> </td><td class="right_padding"></td></tr> </table> </form>
18.220.202.209