Making a fieldset form in Plone with no form framework
Today I was looking into improving a very unusable form. One possible path I was thinking about was to just throw out all types of form generators like Archetypes and z3c.form, and do the whole form just in plain HTML. But the first issue I had there was to make several fieldsets.
This was slightly tricky, and this is because there is some Javascript magick in Plone to take the HTML code and massage it into the fieldset tabs. So here is some example code to set that up:
<form name="edit_form" method="post" enctype="multipart/form-data" class="enableUnloadProtection enableAutoFocus enableFormTabbing enableUnlockProtection" action="whatevah"> <fieldset id="fieldset-send"> <legend id="fieldsetlegend-send">Send</legend> <select id="channel" tal:define="channels view/channels"> <option tal:repeat="channel channels" id="channel/id" tal:content="channel/title"/> </select> </fieldset> <fieldset id="fieldset-preview"> <legend id="fieldsetlegend-preview">Preview</legend> It's the preview page! </fieldset> <div> <input type="hidden" name="fieldsets:list" value="send" /> <input type="hidden" name="fieldsets:list" value="preview" /> <input type="hidden" name="form.submitted" value="1" /> <input type="submit" name="form.button.save" value="Save" /> <input type="submit" name="form.button.cancel" value="Cancel" /> </div> </form>
I haven’t looked into the details here, but the necessary things are obviously the fieldset tags, and then also the hidden inputs with fieldsets:list that list what fieldsets there are. I think the enableFormTabbing class is necessary also.The resulting form looked like this:
It was tricky to figure out, but easy once you know this, so that’s why I document it here, even though I probably won’t end up using it.
You also have an example markup in form_tabbing.js itself: http://svn.plone.org/svn/plone/Plone/trunk/Products/CMFPlone/skins/plone_ecmascript/form_tabbing.js
That example isn’t complete, you need the hidden fieldset:id fields as well.