HTML ought to have nested forms

So far, the redesign of the role editor has been done like this:

Role editor subforms

The selection box on the left is a list of all the existing roles. It is an necessary piece of information that needs to be submitted for the copy, rename, and remove operations.

The four panels on the right are initially hidden (using CSS). When one of the four buttons (add, copy, rename, remove) is pressed, its corresponding panel becomes visible.

The code for the form(s) can be designed in at least three ways, each with its own serious problems.

Option 0: The left side select is common to three operations, so one form should enclose all the input elements shown in the screenshot. Note that the form would contain multiple (i.e. four) submit buttons. This is not a problem because when the user clicks an OK button, the hidden value of the button is sent, so the server can distinguish which action the user intended to take.

The problem here is when the user presses enter in one of the text input fields. This also submits the form. But because there are multiple buttons and none of them are specifically pressed, the web browser pretends that an arbitrary (e.g. the first) button is pressed. So if a user was trying to copy a role and presses enter in the copy panel’s text field, then the server thinks the user wants to add a role and fails the operation because no name was entered for the add operation.

Option 1: Put each of the four panels in its own form. Use JavaScript to copy the select’s state onto a hidden field in each form. Already, this smells like a hack. This is the approach that is currently implemented.

Problems with this idea include possible desynchronization between the select and hidden fields, and mandating the use of JavaScript.

Option 2: Instead of having four panels, just have one. Use JavaScript DOM manipulation to change the panel’s contents appropriately for each action. Use a hidden field (updated by JavaScript) inform the server which action the user intended to perform.

Again, this mandates the use of JavaScript, and DOM manipulation is more difficult than declaring the forms in HTML.

The ideal solution would be for HTML to support nested forms. (If you look at the authoritative page on HTML forms and squint at the DTD snippet hard enough, you’ll see that form elements are forbidden to nest.) In this case, everything (the select and the 4 panels) would be in a form, and each panel would be in its own subform. When a user presses enter in one of the text fields, its enclosing subform is submitted, along with all the fields in the parent form – but not the fields in sibling forms.

Explore posts in the same categories: DrProject, Uncategorized

One Comment on “HTML ought to have nested forms”

  1. […] Qiyu Zhu is working through the design of a new role editor, and believes that dumb redirects interact poorly with forms. Suggestions, […]

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your 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: