Re: Nested forms

Henri Sivonen wrote:
> 
> Given the developments in unifying HTML5 and XHTML5 content models after 
> WF2 was last revised and the outlook about the role of XHTML5, it would 
> make sense to unify the conformance requirement regarding nested forms. 
> That is, the spec should make nested forms non-conforming for XHTML5.

I'd like to implement the UI described below - I did it a while ago with 
nested forms, and couldn't think of a better way to do it, so either it 
would be nice to know a better way or else it would be nice for it to be 
conforming.

I want a form UI which looks somewhat like:

           __________________
     Name [_Whatever_________]
           _____    __________________   ________________
    Photo |  o  |  [_C:\Documents\..._] [Upload_new_image]
          | -|- |
          |_/_\_|
           _____
      Age [_312_]
           ____________
          [Save_details]

where you can select an image file while you're in the middle of the 
form, and upload it asynchronously when you click the button. In 
particular, the user should get almost-immediate feedback with the 
little thumbnail image updating to match what they uploaded, rather than 
waiting until they submit the form at the very end; and the entire page 
shouldn't submit/reload when they are uploading the photo in the middle, 
because that looks ugly and requires more server-side code.

It also needs to work in current common browsers (mostly IE6, IE7, FF2, 
preferably Safari 3 and Opera 9), and needs to work nicely in them 
rather than degrading to a functional but ugly fallback. (It doesn't 
help if there are new features that make this much easier but aren't 
widely implemented - I should be able to write code that is conforming 
HTML5 and still works in legacy browsers and still does what I want it 
to). It doesn't need to work at all when scripting is disabled.


I did this with something like:

  <form action="save_details" method="POST">
   <table>
    <tr><th>Name: <td><input name="name">
    <tr><th>Photo: <td>
     <img src="current_photo_thumbnail">
     <form action="upload_image" method="POST"
           enctype="multipart/form-data" target="upload-iframe">
        <input type="file" name="photo">
        <input type="submit" value="Upload">
     </form>
     <iframe name="upload-iframe" style="display: none"></iframe>
    <tr><th>Age: <td><input name="age">
   </table>
   <input type="submit" value="Save details">
  </form>

(except actually the nested form was inserted by DOM-altering scripts, 
because of the HTML parser limitations, but that's not relevant in terms 
of whether the document is conforming).

In all the browsers I tested, the 'Upload' button submits only the inner 
form (i.e. only the file input), and the submission response is loaded 
into the invisible iframe and can run some scripts to notify the user 
that it's finished, which is all good.

The 'Save details' button acts slightly differently between browsers. In 
(at least) FF2 and Opera 9.2, it submits only the inputs that are in the 
outer form and not in the inner form (i.e. it excludes the file input). 
In (at least) IE6, it submits all the inputs that are in the outer form 
(i.e. including the file input). Since the outer form isn't 
multipart/form-data, IE6 submits just the filename and not the file 
data, so it doesn't redundantly upload the file data on 'Save changes', 
and so that's not a problem. So it seems to work reliably enough between 
browsers.

(Demonstration of the browser differences: 
http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!doctype%20html%3E%0A%3Cbody%3E%0A%3Cform%20method%3Dget%3E%3Cinput%20type%3Dhidden%20name%3Da%20value%3Da%3E%3Cinput%20type%3Dsubmit%3E%3C%2Fform%3E%0A%3Cform%20method%3Dget%3E%3Cinput%20type%3Dhidden%20name%3Db%20value%3Db%3E%3Cinput%20type%3Dsubmit%3E%3C%2Fform%3E%0A%3Cscript%3E%0Af%3Ddocument.getElementsByTagName('form')%3B%0Af%5B0%5D.appendChild(f%5B1%5D)%3B%0A%3C%2Fscript%3E 
)

-- 
Philip Taylor
pjt47@cam.ac.uk

Received on Wednesday, 23 April 2008 13:32:18 UTC