Form innerhalb eines Tisches

238

Ich füge einige Formulare in eine HTML-Tabelle ein, um neue Zeilen hinzuzufügen und aktuelle Zeilen zu aktualisieren. Das Problem, das ich bekomme, ist, dass ich beim Überprüfen der Formulare in meinen Entwicklertools sehe, dass die Formularelemente unmittelbar nach dem Öffnen geschlossen werden (Eingaben usw. sind nicht im Formular enthalten).

Das Senden eines Formulars enthält daher keine Felder.

Die Tabellenzeile und die Eingaben lauten wie folgt:

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

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

Jede Hilfe wäre großartig, danke.

— Alex
quelle

<form>kann nicht hineingelegt werden <tr>.

— Derek 22 會功夫

Und du hast vergessen, das zu schließen <tr>.

— Derek 22 會功夫

Verwenden Sie display: table-row für Ihr Formular und lassen Sie das Tabellen-Tag ganz fallen. Siehe meine Antwort hier: stackoverflow.com/a/15600151/1038812

— Matthew

Es kann nicht, aber es funktioniert ...

— Sandburg

Antworten:

369

Eine Form ist nicht erlaubt ein untergeordnetes Element eines sein table, tbodyoder tr. Der Versuch, ein Formular dort abzulegen, führt dazu, dass der Browser das Formular so verschiebt, dass es nach der Tabelle angezeigt wird (während der Inhalt - Tabellenzeilen, Tabellenzellen, Eingaben usw. - zurückbleibt).

Sie können eine ganze Tabelle in einem Formular haben. Sie können ein Formular in einer Tabellenzelle haben. Sie können keinen Teil einer Tabelle in einem Formular haben.

Verwenden Sie ein Formular um die gesamte Tabelle. Verwenden Sie dann entweder die angeklickte Schaltfläche "Senden", um zu bestimmen, welche Zeile verarbeitet werden soll (um schnell zu sein), oder verarbeiten Sie jede Zeile (um Massenaktualisierungen zu ermöglichen).

HTML 5 führt das form Attribut ein . Auf diese Weise können Sie ein Formular pro Zeile außerhalb der Tabelle bereitstellen und dann das gesamte Formularsteuerelement in einer bestimmten Zeile mithilfe des Formulars einem dieser Formulare zuordnen id.

— QUentin
quelle

Verwenden Sie ein Formular für die gesamte Tabelle. Alle Felder werden an den Server gesendet, auch wenn sie leer sind. Es könnte eine riesige Datenmenge sein !!! Bitte verwenden Sie für den Massen- / öffentlichen Gebrauch lieber einen Dialog (Formular nicht in Tabelle), der über eine Schaltfläche in dieser Zeile geöffnet wird.

— Loenix

@Loenix: Es ist sehr unwahrscheinlich, dass Sie genügend Daten in die Tabelle aufnehmen, um die Bandbreite der Benutzer erheblich zu belasten (zumindest im Vergleich zur Größe einer typischen Webseite). Das Erfordernis, dass Benutzer eine andere Seite zwischen dem Bearbeiten einer Zeile und dem Vornehmen ihrer Änderungen (OTOH) laden müssen, wäre eine ärgerliche zusätzliche Interaktion, die sie durchführen müssten.

— Quentin

Sie benötigen keine Schaltfläche zum Bearbeiten für die in der ursprünglichen Frage vorgeschlagene Lösung.

— Quentin

Warum hat das verboten <form>innerhalb der <table>in den Normen?

— 1234ru

@ Qentin fair genug. Schade, dass dies auch nach zwei Jahrzehnten ohne ersichtlichen Grund noch so ist.

— 1234ru

187

Verwenden Sie das Attribut "Formular" , wenn Sie Ihr Markup speichern möchten:

<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>

(* Formularfelder außerhalb des <form> -Tags)

Siehe auch die ersten 2 Kommentare

— Vladimir
quelle

Beachten Sie, dass diese Lösung nur mit HTML5 gültig ist.

— Threenplusone

Darüber hinaus wird es im Internet Explorer nicht funktionieren. Weitere Informationen hier

— Souhaieb Besbes

Der Status der Form Attribut ist ‚unter Berücksichtigung‘ , das bedeutet , dass Sie sehr geduldig sein developer.microsoft.com/en-us/microsoft-edge/platform/status/... mittlerweile können Sie diese polyfill versuchen und sehen , ob es für Sie arbeitet stackoverflow.com/a/26696165/648484

— Souhaieb Besbes

Scheint "in Entwicklung" jetzt und in

— Ordnung

@ user1156544 Es wird jetzt in Edge unterstützt, aber nicht im IE. Wenn Sie IE überhaupt unterstützen müssen, haben Sie mit dieser Lösung kein Glück. Mein Plan ist es, zwei Tabellen für zwei Formularelemente zu verwenden (ich kann nicht glauben, dass ich das tun muss). Vielen Dank an Microsoft!

— Pluto

Wenn Sie einen „editierbaren Raster“ , dh eine Tabelle , wie Struktur , die Sie , dass imitiert den TABLE - Tag Layout eine der Zeilen eine Form, die Verwendung CSS machen kann: display:table, display:table-row, und display:table-cell.

Es ist nicht erforderlich, die gesamte Tabelle in ein Formular zu verpacken und für jede scheinbare Zeile Ihrer Tabelle ein separates Formular und eine separate Tabelle zu erstellen.

Versuchen Sie stattdessen Folgendes:

<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>

Das Problem beim Umschließen der gesamten TABELLE in ein FORMULAR besteht darin, dass alle Formularelemente beim Senden gesendet werden (möglicherweise ist dies erwünscht, aber wahrscheinlich nicht). Mit dieser Methode können Sie für jede "Zeile" ein Formular definieren und beim Senden nur diese Datenzeile senden.

Das Problem beim Umschließen eines TR-Tags mit einem FORM-Tag (oder eines FORM-Tags mit TR) besteht darin, dass es sich um ungültiges HTML handelt. Das FORMULAR erlaubt weiterhin das Senden wie gewohnt, aber zu diesem Zeitpunkt ist das DOM defekt. Hinweis: Versuchen Sie, die untergeordneten Elemente Ihres FORMULARS oder TR mit JavaScript abzurufen. Dies kann zu unerwarteten Ergebnissen führen.

Beachten Sie, dass IE7 diese CSS-Tabellenstile nicht unterstützt und IE8 eine Doctype-Deklaration benötigt, um in den "Standard" -Modus zu gelangen: (versuchen Sie dies oder etwas Äquivalentes)

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

Jeder andere Browser, der display: table, display: table-row und display: table-cell unterstützt, sollte Ihre CSS-Datentabelle genauso anzeigen wie bei Verwendung der Tags TABLE, TR und TD. Die meisten von ihnen tun es.

Beachten Sie, dass Sie auch mimische THEAD, TBODY, TFOOT durch Ihre Zeilengruppen in einem anderen DIV mit Einwickeln display: table-header-group, table-row-groupund table-footer-groupjeweils.

HINWEIS: Das einzige, was Sie mit dieser Methode nicht tun können, ist Colspan.

Schauen Sie sich diese Abbildung an: http://jsfiddle.net/ZRQPP/

— Matthew
quelle

+1 für die Erwähnung dieses aktiviert Colspan nicht ... was ich beim ersten Durchlesen verpasst haben muss ;-)

— Johannes Rudolph

Das sollte die grün markierte Antwort sein (auch wenn nicht wirklich Tabellen-Tag verwendet wird)

— Alessio