Skip to content

Making a fieldset form in Plone with no form framework

June 24, 2010

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.

From → plone

2 Comments
  1. That example isn’t complete, you need the hidden fieldset:id fields as well.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: