Re: Nested forms

Could you also use separate forms and use css to position them in the
layout you desire?
Is there a need for the nesting beyond the intended layout?

If it's just about uploading the file... maybe more work on file
inputs can address this?
e.g. <input type="file" required> ... could this require that the file
is uploaded before progressing?

cheers
Ben


On Wed, Apr 23, 2008 at 11:31 PM, Philip Taylor <pjt47@cam.ac.uk> wrote:
>
>  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 Thursday, 24 April 2008 10:02:48 UTC