web-dev-qa-db-fra.com

Forme dans une table

J'inclus des formulaires dans un tableau HTML pour ajouter de nouvelles lignes et mettre à jour les lignes actuelles. Le problème que je reçois est que lorsque j'inspecte les formulaires dans mes outils de développement, je constate que les éléments de formulaire sont fermés immédiatement après leur ouverture (les entrées, etc. ne sont pas incluses dans le formulaire).

En tant que tel, l'envoi d'un formulaire n'inclut pas les champs.

La ligne de tableau et les entrées sont les suivantes:

<tr>
    <form method="post" action="">
        <td>
            <input type="text" name="job_num">
        </td>

        <td>
            <input type="text" name="desc">
        </td>
    </form>
</tr>

Toute aide serait formidable, merci.

htmlfirebughtml-tableforms
220
Alex

Un formulaire est non autorisé être un élément enfant d'un table, tbody ou tr. Si vous tentez d'en insérer un, le navigateur déplacera le formulaire. Il apparaît après le tableau (tout en laissant son contenu - rangées de tableau, cellules de tableau , entrées, etc - derrière).

Vous pouvez avoir une table entière dans un formulaire. Vous pouvez avoir un formulaire dans une cellule de tableau. Vous ne pouvez pas avoir une partie de table dans un formulaire.

Utilisez un formulaire autour de la table entière. Utilisez ensuite le bouton de soumission sur lequel vous avez cliqué pour déterminer la ligne à traiter (soit rapide) ou toutes les lignes (en autorisant les mises à jour groupées).

337
Quentin

Utilisez le attribut "formulaire", si vous souhaitez enregistrer votre balisage:

<form method="GET" id="my_form"></form>

<table>
    <tr>
        <td>
            <input type="text" name="company" form="my_form" />
            <button type="button" form="my_form">ok</button>
        </td>
    </tr>
</table>
175
Vladimir

Si vous voulez une "grille éditable", c'est-à-dire une table semblable à une structure qui vous permet de transformer n'importe quelle ligne en un formulaire, utilisez CSS qui imite la disposition de la balise TABLE: display:table, display:table-row et display:table-cell.

Il n'est pas nécessaire de placer l'ensemble de la table dans un formulaire ni de créer un formulaire et un tableau distincts pour chaque ligne apparente de votre tableau.

Essayez ceci à la place:

<style>
DIV.table 
{
    display:table;
}
FORM.tr, DIV.tr
{
    display:table-row;
}
SPAN.td
{
    display:table-cell;
}
</style>
...
<div class="table">
    <form class="tr" method="post" action="blah.html">
        <span class="td"><input type="text"/></span>
        <span class="td"><input type="text"/></span>
    </form>
    <div class="tr">
        <span class="td">(cell data)</span>
        <span class="td">(cell data)</span>
    </div>
    ...
</div>

Le problème avec l'encapsulation de la totalité de la table dans un formulaire est que tous les éléments du formulaire seront envoyés lors de la soumission (c'est peut-être souhaité mais probablement pas). Cette méthode vous permet de définir un formulaire pour chaque "ligne" et d'envoyer uniquement cette ligne de données lors de l'envoi.

Enrouler une balise FORM autour d'une balise TR (ou de TR autour d'une FORM) a pour inconvénient que ce n'est pas du code HTML. Le formulaire permettra toujours de soumettre comme d'habitude, mais à ce stade, le DOM est cassé. Remarque: essayez d’obtenir les éléments enfants de votre FORM ou TR avec JavaScript, cela peut entraîner des résultats inattendus.

Notez que IE7 ne supporte pas ces styles de table CSS et que IE8 aura besoin d'une déclaration de doctype pour le faire passer en mode "standard": (essayez celui-ci ou quelque chose d'équivalent)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Tout autre navigateur prenant en charge les options display: table, display: table-row et display: table-cell devrait afficher votre tableau de données CSS de la même manière que si vous utilisiez les balises TABLE, TR et TD. La plupart le font.

Notez que vous pouvez également imiter THEAD, TBODY, TFOOT en encapsulant vos groupes de lignes dans un autre DIV avec display: table-header-group, table-row-group et table-footer-group respectivement.

REMARQUE: La seule chose que vous ne pouvez pas faire avec cette méthode est colspan.

Regardez cette illustration: http://jsfiddle.net/ZRQPP/

33
Matthew