If XHTML does not allow nested forms, then how/why does this validate? Is this code ok to use?

Question

I'm working on a webpage that lists several rental reservations from a database. I think I may have built myself into a corner. I originally had each row end with 3 cells, each one containing a tiny form made of 2 or 3 hidden fields and a button to "edit", "return", or "cancel" the reservation.

Those worked fine, and were all valid because each entire form was within a single cell.

Now I need to add functionality to allow selecting multiple rows, and passing them to another page. So without thinking, I added a <form> that wrapped around the whole table, added a checkbox to each row, and a submit button at the bottom of the table.

After some research, I'm pretty sure nested forms are not allowed in XHTML. But the document still somehow validates with the W3C validator. I'm using XHTML 1.0 Transitional. Maybe because its not a <form> directly within another <form>, its a <form> within a <table> within a <form>? Is that allowed?

The form works as it is (it submits a few extra fields from the top row, but I can just ignore those if I have to).

I'm just afraid to implement this because I feel like there's no way this is correct. If anyone could clarify whether or not this is valid I would really appreciate it. And if it's not, do you have any suggestions to fix it?

Thanks in advance!

<form id="form2" name="form2" method="post" action="pickup.php">
    <table width="1200" border="1" align="center" cellpadding="5" cellspacing="0" style="border-collapse:collapse; border-color:#CCC;">
        <tr>
            <td colspan="10" bgcolor="#CCCCCC"><h2>Equipment Being Picked Up Today</h2></td>
        </tr>
        <tr class="highlight">
            <td><input type="checkbox" name="res1" id="res1" value="2278" /></td>
            <td>George Washington</td>
            <td>555-333-4444</td>
            <td><a href="product.php?sku=R6209" target="_self">Lghting kit 6209</a></td>
            <td>2/12/15</td>
            <td>2/13/15</td>
            <td></td>
            <td align="center">
                <form name="editForm" method="post" action="edit.php">
                    <input name="editFrom" type="hidden" value="today2.php" />
                    <input name="theDate" type="hidden" value="2015-02-12" />
                    <input name="reservationID" type="hidden" value="2278" />
                    <input type="submit" name="edit" value="edit" />
                </form>
            </td>
            <td align="center">
                <form name="returnForm" method="post" action="today2.php">
                    <input name="reservationID" type="hidden" value="2278" />
                    <input name="return" type="hidden" value="yes" />
                    <input name="theDate" type="hidden" value="2015-02-12" />
                    <input type="submit" value="return" />
                </form>
            </td>
            <td align="center">
                <form name="cancelForm" method="post" action="cancel.php">
                    <input name="editFrom" type="hidden" value="today2.php" />
                    <input name="theDate" type="hidden" value="2015-02-12" />
                    <input name="reservationID" type="hidden" value="2278" />
                    <input type="submit" name="cancel" value="cancel" />
                </form>
            </td>
        </tr>
        <tr class="highlight">
            <td><input type="checkbox" name="res2" id="res2" value="2279" /></td>
            <td>Sam Adams</td>
            <td>333-222-7777</td>
            <td><a href="product.php?sku=R8300" target="_self">camera kit 3456</a></td>
            <td>2/12/15</td>
            <td>2/13/15</td>
            <td></td>
            <td align="center">
                <form name="editForm" method="post" action="edit.php">
                    <input name="editFrom" type="hidden" value="today2.php" />
                    <input name="theDate" type="hidden" value="2015-02-12" />
                    <input name="reservationID" type="hidden" value="2279" />
                    <input type="submit" name="edit" value="edit" />
                </form>
            </td>
            <td align="center">
                <form name="returnForm" method="post" action="today2.php">
                    <input name="reservationID" type="hidden" value="2279" />
                    <input name="return" type="hidden" value="yes" />
                    <input name="theDate" type="hidden" value="2015-02-12" />
                    <input type="submit" value="return" />
                </form>
            </td>
            <td align="center">
                <form name="cancelForm" method="post" action="cancel.php">
                    <input name="editFrom" type="hidden" value="today2.php" />
                    <input name="theDate" type="hidden" value="2015-02-12" />
                    <input name="reservationID" type="hidden" value="2279" />
                    <input type="submit" name="cancel" value="cancel" />
                </form>
            </td>
        </tr>
        <tr class="highlight">
            <td><input type="checkbox" name="res3" id="res3" value="2280" /></td>
            <td>Bob Dole</td>
            <td>111-222-4444</td>
            <td><a href="product.php?sku=R8609" target="_self">Other item 6789</a></td>
            <td>2/12/15</td>
            <td>2/13/15</td>
            <td></td>
            <td align="center">
                <form name="editForm" method="post" action="edit.php">
                    <input name="editFrom" type="hidden" value="today2.php" />
                    <input name="theDate" type="hidden" value="2015-02-12" />
                    <input name="reservationID" type="hidden" value="2280" />
                    <input type="submit" name="edit" value="edit" />
                </form>
            </td>
            <td align="center">
                <form name="returnForm" method="post" action="today2.php">
                    <input name="reservationID" type="hidden" value="2280" />
                    <input name="return" type="hidden" value="yes" />
                    <input name="theDate" type="hidden" value="2015-02-12" />
                    <input type="submit" value="return" />
                </form>
            </td>
            <td align="center">
                <form name="cancelForm" method="post" action="cancel.php">
                    <input name="editFrom" type="hidden" value="today2.php" />
                    <input name="theDate" type="hidden" value="2015-02-12" />
                    <input name="reservationID" type="hidden" value="2280" />
                    <input type="submit" name="cancel" value="cancel" />
                </form>
            </td>
        </tr>
        <tr>
            <td colspan="10">
                <input type="submit" name="submit" id="submit" value="Pickup Selected Equipment" />
            </td>
        </tr>
    </table>
</form>

It seems that the XHTML validator allows nested forms (perhaps a limitation in what the DTD can prohibit), but browsers doesn't allow nested forms. See: anderwald.info/internet/nesting-form-tags-in-xhtml (Note that the workaround presented doesn't actually nest forms, it only ends the "outer" form before the first "inner" form.) — Guffa
– Guffa, Commented Feb 12, 2015 at 22:56
@Guffa - The workaround really does nest the forms. See this Live DOM viewer example of the workaround HTML parsing is really weird. It's the form owner association that breaks, not the nesting. — Alohci
– Alohci, Commented Feb 13, 2015 at 20:17
@Alohci: If you just use the ending tag from the workaround form tag, the result is the same. I don't think that the forms are actually nested, it's just that the DOM viewer can't show a form that ends at a different level that it starts. — Guffa
– Guffa, Commented Feb 13, 2015 at 20:33
@Guffa - It's maybe just difference of terminology. I don't know what "nesting" means if not with respect to the DOM. The DOM behaves exactly like the form elements were nested. For example in JS, walking up the ancestor list from the inner form element will find the outer form element. Or in CSS, form form { color:red; } will colour text inside the inner form red. See tinyurl.com/5h3hdv4y — Alohci
– Alohci, Commented Feb 13, 2015 at 20:45

Jukka K. Korpela · Accepted Answer · 2015-02-12 23:07:55Z

3

It validates because the formal validation of XHTML 1.0 is based on XML rules, and XML is a strongly simplified modification of SGML, which is what HTML 4.01 is nominally based on. Consequently, some features, such as nested forms, which are prohibited in all versions of HTML are not forbidden by the formal syntax of XHTML 1.0 described in a DTD based on XML. The specification says this as follows:

SGML gives the writer of a DTD the ability to exclude specific elements from being contained within an element. Such prohibitions (called "exclusions") are not possible in XML.

For example, the HTML 4 Strict DTD forbids the nesting of an 'a' element within another 'a' element to any descendant depth. It is not possible to spell out such prohibitions in XML. Even though these prohibitions cannot be defined in the DTD, certain elements should not be nested. A summary of such elements and the elements that should not be nested in them is found in the normative Element Prohibitions.

And the Element Prohibitions says that a form element must not contain another form element.

It is not safe to nest forms. There is no specification of what should happen if you do that. For example, it is not specified whether the fields on an inner form should be included when an outer form is submitted.

Thus, you should consider restructuring the page so that form nesting is avoided. If you need help with this, consider posting a new question that specifies the desired functionality and shows your best attempt at restructuring.

answered Feb 12, 2015 at 23:07

Jukka K. Korpela

203k38 gold badges281 silver badges408 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

KMurphy Over a year ago

Thanks for the clarification. I knew it was a bad idea, but I just wanted to see if it was truly valid or not.

Alohci Over a year ago

"There is no specification... it is not specified whether the fields on an inner form should be included when an outer form is submitted." Not true, HTML5 defines this. Only field elements whose form owner is the form being submitted are included. Since a field element can only have one form owner, and by default that is its nearest ancestor form element (may be explicitly over-ridden), there is no ambiguity over whether a particular field in an inner form should be included in the outer form submit.

Jukka K. Korpela Over a year ago

@Alohci, I expect you to be right here as usual, but the question was about XHTML 1.0. While HTML5 generally canonicalizes common browser practices, it also adds new features and new definitions, which may or may not be honored by browsers.

Collectives™ on Stack Overflow

If XHTML does not allow nested forms, then how/why does this validate? Is this code ok to use?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related