Balise de formulaire ne sera pas joindre des éléments à l'intérieur d'un tableau

J'ai couru dans un curieux problème; j'ai un formulaire à l'intérieur d'un <tr>, cependant la forme refuse d'emballer toutes les balises à l'intérieur. J'ai fait un rapide JSFiddle ici à jouer avec. Firebug rapports que le formulaire n'est pas d'emballage:

Balise de formulaire ne sera pas joindre des éléments à l'intérieur d'un tableau

La <form> élément est grisé et pas d'emballage rien. Le code HTML pour que ce test est en dessous de

<table>
    <form>
        <tr>
            <td>Input</td>
            <td>Another input</td>
        </tr>
        <tr>
            <td colspan="4"><span>Other stuff</span></td>
        </tr>
    </form>

    <tr>
        <td>
            Rows not affected by the form
        </td>
    </tr>
    <tr>
        <td>
            Rows not affected by the form
        </td>
    </tr>
</table>

Comme on le voit, la form est titulaire de deux trs dans le balisage. J'ai lu ici que ce n'est pas valide, donc ma question est puis-je créer un formulaire qui contient deux ou plus de deux trs et un certain nombre d'autres éléments à l'intérieur d'un tableau? Le tableau a d'autres lignes, il n'est pas associé au formulaire, afin de mettre un <form> tour de l'ensemble de la table est inutile, bien que voyant que les autres lignes ne possède aucune entrée pour le formulaire (POST), je suppose que form pourrait être mis autour de la table entière.

Qui est une meilleure solution; ensemble de la table enveloppe, ou un travail correctif pour juste joignant le besoin de lignes dans un form tag? Je sais que je pourrais mettre un table à l'intérieur d'un td > form, mais alors la largeur des colonnes ne serait pas la même dans la table imbriquée, qui est pourquoi je suis venu poser cette question.

OriginalL'auteur Bojangles | 2011-07-07

  1. 18

    Vous ne pouvez pas interrompre le <table> structure avec toutes les étiquettes d'ailleurs <thead>, <tfoot>, <tbody>, <tr>, <th>, ou <td>. Vous balises de formulaire doivent être encapsulées entre deux <td> ou l'ensemble de votre <table> doit être placé à l'intérieur de la <form> tag.

    <table>
    <tr>
        <td>
            <form>
            ...form data...
            </form>
        </td>
    </tr>
</table>

    ..ou..

    <form>
    <table>
    ...
    </table>
</form>
    Merci Michael. À l'extérieur, il est 🙂

    OriginalL'auteur Michael Irigoyen

  2. 3

    vous ne pouvez mettre un formulaire à l'intérieur d'un td en gros, de sorte que vous pourriez mettre ces 2 lignes à l'intérieur d'une nouvelle table que vous créez à l'intérieur d'un td

    comme ...

    <table><tr><td><form><table><tr>...</tr><tr>...</tr></table></form></td></tr><tr>...</tr><tr>...</tr></table>
    Grâce Rodolfo. J'ai édité ma question afin de refléter ce que je veux; à l'aide d'une table imbriquée n'est pas possible en raison du fait j'ai besoin de préserver les largeurs de colonne.
    si les autres lignes n'ont pas de champs de saisie qui appartiennent à une autre forme ensuite il suffit de mettre la totalité de la table à l'intérieur de la forme
    Je pense que c'est le consensus général d'avoir <form> à l'extérieur <table>, qui est ce que je vais faire. C'était un peu évident, mais je voulais savoir si il y avait une plus sémantique choix d'emballage ce qui a été une forme de <form> balises.

    OriginalL'auteur Rodolfo

  3. 1

    La <form> balise ne peut être placé à l'intérieur d'un <td> élément ou à l'extérieur de la <table> dans ce cas.

    Si j'étais vous, je venais de mettre le <form> autour de la table, parce que vous avez dit il n'y aura pas d'autres formes.

    Ou, vous pouvez remplacer l' <table> complètement avec <div>s plutôt que d'utiliser display: table; ou display: table-cell;.

    Le seul problème que je peux voir avec le <div> structure est que table-cell n'est pas très bien pris en charge. Je pense que le consensus général est que la mise <form> en dehors de la table est la meilleure façon d'aller.
    un autre problème apparent avec <div style="table-cell"> est que si vous êtes dynamiquement le remplacement d'une ligne dans la table par le biais d'un appel ajax, les colonnes ne sont pas alignées correctement, ou, au moins, je ne pouvais pas le faire fonctionner; l'amour d'entendre quelqu'un qui a!

    OriginalL'auteur Steve