HTML : Est-il possible d'avoir une balise FORM dans chaque ligne du tableau d'une manière valide pour le XHTML ?

Question

Je peux le décrire comme suit :

Je veux ceci (la table entière dans editmode et bouton de sauvegarde dans chaque ligne).

<table>
    <tr>
        <td>Id</td>
        <td>Name</td>
        <td>Description</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td><input type="hidden" name="id" value="1" /></td>
        <td><input type="text" name="name" value="Name" /></td>
        <td><input type="text" name="description" value="Description" /></td>
        <td><input type="submit" value="Save" /></td>
    </tr>
    <tr>
        <td><input type="hidden" name="id" value="2" /></td>
        <td><input type="text" name="name" value="Name2" /></td>
        <td><input type="text" name="description" value="Description2" /></td>
        <td><input type="submit" value="Save" /></td>
    </tr>
    <!-- and more rows here ... -->
</table>

Où dois-je mettre le <form> tags ?

Answer 1

Il convient de noter que cela est possible en HTML5, grâce à l'attribut "form" des éléments de saisie :

<table>
    <tr>
        <td>Id</td>
        <td>Name</td>
        <td>Description</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td><form id="form1"><input type="hidden" name="id" value="1" /></form></td>
        <td><input form="form1" type="text" name="name" value="Name" /></td>
        <td><input form="form1" type="text" name="description" value="Description" /></td>
        <td><input form="form1" type="submit" value="Save" /></td>
    </tr>
    <tr>
        <td><form id="form2"><input type="hidden" name="id" value="1" /></form></td>
        <td><input form="form2" type="text" name="name" value="Name" /></td>
        <td><input form="form2" type="text" name="description" value="Description" /></td>
        <td><input form="form2" type="submit" value="Save" /></td>
    </tr>
</table>

Bien qu'il soit propre par son absence de JS et l'utilisation d'éléments originaux, il ne fonctionne malheureusement pas dans IE10.

Answer 2

J'ai eu une question similaire et cette réponse en question HTML : table des formes ? l'a résolu pour moi. (Je ne suis pas sûr que ce soit du XHTML, mais cela fonctionne dans un navigateur HTML5).

Vous pouvez utiliser les css pour donner une présentation de tableau à d'autres éléments.

.table { display: table; } 
.table>* { display: table-row; }
.table>*>* { display: table-cell; }

Ensuite, vous utilisez le html valide suivant.

<div class="table"> 
    <form>
        <div>snake<input type="hidden" name="cartitem" value="55"></div>
        <div><input name="count" value="4" /></div>
    </form>
</div>

Answer 3

Vous ne pouvez pas. Votre seule option est de le diviser en plusieurs tableaux et de placer la balise de formulaire en dehors de ceux-ci. Vous pourriez finir par imbriquer vos tableaux, mais ce n'est pas recommandé :

<table>
  <tr><td><form>
    <table><tr><td>id</td><td>name</td>...</tr></table>
  </form></td></tr>
</table>

Je supprimerais entièrement les tableaux et les remplacerais par des éléments html stylisés comme les divs et les spans.

Answer 4

J'ai écrit ce texte il y a plus de dix ans, à une époque où le monde était différent. Aujourd'hui, je connais de nombreuses façons de résoudre ce problème particulier, mais une solution rapide et simple est la suivante qui validera consiste à faire à peu près la même chose, mais en utilisant des tableaux CSS pour la mise en page, pas un tableau HTML ordinaire.

Je dirais que vous pouvez le faire, bien que cela ne soit pas validé et que Firefox réorganise le code (ce que vous voyez dans "View generated source" lorsque vous utilisez Web Developer peut donc être surprenant). Je ne suis pas un expert, mais en mettant

<form action="someexecpage.php" method="post">

juste devant le

<tr>

et ensuite en utilisant

</tr></form>

à la fin de la ligne donne certainement la fonctionnalité (testé dans Firefox, Chrome et IE7-9). Cela a fonctionné pour moi, même si le nombre d'erreurs de validation produites a été un nouveau record personnel ! Aucun problème n'a été constaté en conséquence, et j'ai un tableau assez fortement stylisé. Je suppose que vous avez peut-être une table produite dynamiquement, comme moi, ce qui explique pourquoi l'analyse des lignes de la table n'est pas évidente pour nous, les mortels. Donc, en gros, ouvrez le formulaire au début de la ligne et fermez-le juste après la fin de la ligne.

Answer 5

Vous devez juste mettre le <form ... > avant la balise <table> et la balise </form> à la fin.

J'espère que cela vous aidera.