形式内部形式替代

I have a rather strange problem. I know forms within forms are not valid HTML. But i need a solution that allows me to do something simular.

I use 'tabifier' javascript library, to create tabs. Different tabs are created by using divs with special id for each tab.

I have a main form that is around all tabs like this:

<form id=......>
   <div id=...>
   </div>
   <div id=...>
   </div>
</form>

In one of the tabs i need to create a fileupload systems, which makes use of a form. If i place this form outside of the 'main form' it is not displayed in the tab layout, but seperatly.
```
<form id=......>
   <div id=...>
   </div>
   <div id=...>
   </div>
   <div id='fileuploads'>
        <form id=......>
        </form>
   </div>
</form>
```

Is there any way to make this work?

I tried moving the fileupload as the last subtab and then ending the main form before the last subtab, but this way the form ends inside the tab div. Which is also not valid html.
I'm guessing that document.getelementbyid(div).innerhtml and inserting the form like that would not work aswell.

UPDATE:

Thanks for the given answers, although i dont quite understand how to fully implement them. I came up with an other idea.

If i just create the fileupload input fields, but not surrounded with a form, and then add a button which calls a js function. This functions places the values of the fileuploads in the 'invisible form' outside the div, and sumbits.

Would that be a good solution?

Place your file upload controls in the outer form:

<form id=...>
    <!-- other tabs go here -->
    <div id="fileuploads">
        <!-- your file upload controls and markup go here -->
    </div>
    <!-- other tabs go here -->
</form>

You can use a trick here. First leave the original wrapper form inact.

Then if you put a submit button inside the fileupload form, set an onsubmit event and before sending the form create a new form just around the fileuploads tab, and delete the outside form. If you send the form after that with your new form id ($(form_id).submit in Prototype or document.getElementById(form_id).submit in normal javascript) the new form will be send without the outside form elements.

You could use the HTML 5 <input> form attribute

<form id="fileuploads" action="http://yo.ur/target/" method="POST"></form>
<form id="mainform">
   <div id="first_tab">
   </div>
   <div id="second_tab">
   </div>
   <div id="fileuploads">
        <input type="text" name="desc" form="fileuploads">
        <input type="file" name="file" form="fileuploads">
        <input type="submit" value="Submit" form="fileuploads">
   </div>
</form>

The only problem is that you'll have to provide a JS fallback (like Opi suggested) for Internet Explorer, as it does not support this attribute at all.