Cross-div forms? is it valid?

Question

basically because of some javascript/css rules I cannot just wrap these two div's in a form tag and be done with it.

So, I am wondering if the below html is considered valid?

<div id="tab1">
    <form>
        <input type="text" name="whatever" />
</div>

<div id="tab2">
        <input type="submit" value="Submit" />
    </form>
</div>

Answer 1

No. This is not valid HTML/XML.

Even worse, it will be parsed as:

<div id="tab1">
    <form>
        <input type="text" name="whatever" />
    </form> <!-- form will be closed here, because parent is being closed -->
</div>

<div id="tab2">
        <input type="submit" value="Submit" />
    </form> <!--  not sure about what happens with this one, but it will be either removed or replaced with empty <form></form> element -->
</div>

Answer 2

Covered here: http://www.impressivewebs.com/dom-improperly-nested/

It is invalid XML/XHTML, but HTML5 will be more tolerant. The display/strucutre may not be consistent so it should be tested thoroughly. Many browsers now will automatically "correct" this type of format. It is best avoided in any case.