Formular über mehrere Tabellenspalten - gültiges HTML

[Hartmut]

Hallo Alle,

in einem Shop kommen die Einträge aus einer Datenbank und werden in einer Tabelle dargestellt.
Hinter der Ausgabe des Preises steht jeweils ein (Submit-)Button mit dem der Artikel in den Warenkorb gelegt werden kann.
So weit - so gut, das kann ich noch mit einem Form in einem einzelnen Tabellenfeld (<td>) erreichen.

Abhängig von der zur Verfügung stehenden Anzahl, soll jetzt aber in der Anzahl-Spalte evtl. ein Eingabefeld für die gewünschte Menge zum selben Formular wie der Absende-Button gehören.

Beispielsweie auf dieser Seite:
http://musik-und-filme.de/xxl/product_info.php?products_id=28042

Und genau da komme ich nicht weiter. Wie kann ich in einer Tabelle Zeilenweise jeweils ein Formular nutzen, wenn mehrere Spalten zum form gehören, ich aber weiterhin valides HTML haben möchte?

Zzt. habe ich den <form > innerhalb des <tr>, außerhalb der <td>s stehen.
<tr><form><td></td><td></td></form></tr>

Der w3c-Validator validiert das Dokument aber ebenso nicht, wenn die <form >-Tags außerhalb der Tabellenzeile (<tr>) steht:
<form><tr><td></td><td></td></tr></form>

Nur einen Form um die gesamte Tabelle zu legen fällt flach, weil jeder Artikel (je Button) ein oder mehrere IDs (hidden) mit gesendet werden sollen und dann der komplette Auswertungsmechanismus umgestellt werden müßte.

Und eine Verschachtelung in welcher der Form in einem Tabellenfeld geöffnet und in einem anderen Tabellenfeld geschlossen wird fällt eh flach:
<tr><td><form></td><td></form></td></tr>

Wie also soll ich die <form >-Tags platzieren um valides HTML zu erhalten?

Ich habe auch schon gedacht die Tabellen gegen andere Elemente auszutauschen, oder je Datensatz eine Tabelle zu nutzen. Da aber die Elementinhalte sehr unterschiedliche Längen haben können, ständen dann die Spalten nicht mehr unter der jeweiligen Spaltenüberschrift. Oder das Tabellenverhalten (Automatische Größenanpassung an die Inhalte und entsprechendes Umbrechen bei zu schmaler Gesamtbreite) fällt dann weg.

Erschwerend kommt hinzu, dass die Tabelle bei manchen Produkten zwei Zeilen benötigt (siehe mouseover; dann sieht man die Tabellenfelder deutlich):
http://musik-und-filme.de/xxl/product_info.php?products_id=36887

Ich hoffe jemand kann mir eine Lösung anbieten.

Besten Dank schon mal

Hartmut

[ChrisB]

Hi,

Wie also soll ich die <form >-Tags platzieren um valides HTML zu erhalten?

Form um ganze Tabelle, oder Form in eine Tabellenzelle - alles andere geht nicht.

MfG ChrisB

[Hartmut]

Hi,

danke für die schnelle Antwort.

Dann werde ich wohl doch eine nested table für Anzahl und Preis einfügen müssen und dort, und in der Spaltenüberschrift die Breite für Preis fixieren. Wie auch immer dann die Spalten/Spaltentrennung bei Mouseover aussieht?

Hartmut

Form um ganze Tabelle, oder Form in eine Tabellenzelle - alles andere geht nicht.

[Felix Riesterer]

Lieber Hartmut,

Dann werde ich wohl doch eine nested table für Anzahl und Preis einfügen müssen und dort, und in der Spaltenüberschrift die Breite für Preis fixieren.

nö. Kennst Du die Power von CSS? Du darfst Dir gerne in meinem winzigen Webshop-Script anschauen, dass es auch völlig ohne Tabelle geht.

Liebe Grüße,

Felix Riesterer.

[Hartmut]

Hallo Felix,

zunächst Glückwunsch zu dem wirklich aufgeräumten Code, gefällt mir.
Die Regulären Ausdrücke muss ich mir nochmal näher anschauen, sieht interessant aus.
Allerdings kommt bei Deiner Darstellung eines Produkts (als großer Block) mein Problem nicht zur Anwendung.

Es hat in dem von mir gepflegten Shop schon seinen Grund, weshalb ich die Tabelle als passende Form genutzt habe:
Übersichtlichkeit für den Käufer, wenn der Artikel in zig unterschiedlichen Zuständen zur Verfügung steht (zig Zeilen) und der Inhalt für unterschiedliche Monitorbreiten übersichtlich dargestellt werden soll.

Das gesamte Shopsystem ist Altlast und der Betreiber wollte ausdrücklich keinen neuen Shop. Insgesamt besteht das Backend aus tausenden von Dateien, die Teilweise includet werden. Eine (Struktur-)Anleitung gibts wie bei den meisten Altsystemen natürlich nicht. Somit kann man nie sicher sein, welche Nebenwirkungen ich grad nicht beachte, wenn ich in einer includeten Datei Änderungen vornehme, weil diese in anderen Seiten ebenfalls inkludiert wird.

Mehrfache Hinweise, dass ich den Shop barrierefrei machen möchte scheitern bisher. Wenn die technischen Voraussetzungen für Suchmaschinenindizierung vorliegen - und Validität ist zumindest zzt. das einzige Kriterium in Richtung Barrierefreiheit dass Suchmaschinen beachten -- reicht dem Betreiber das aus.

Aber zurück zum eigentlichen Problem.

Ja, ich kenne mich mit CSS aus.
Sicher ist Dir auch nicht entgangen, dass ich bereits CSS nutze. Die komplette Umstellung von inline-Styles in die globale .css-Datei kommt aber erst, wenn ich mit der Seite zufrieden bin.

Vielleicht sollte ich mal ein bisschen mit display:table rumspielen und schauen, ob sich damit Verhalten und Design wie gewünscht umsetzen lassen?

Vielleicht lässt sich damit ja das Tabelle/Form-Problem lösen. In Richtung Barrierefreiheit finde ich bringt es nicht viel eine klar als Tabellenstruktur gedachte Information in eine virtuelle Tabelle zu packen.

Hast Du schon Erfahrungen mit diesem Style? Kennst Du Seiten auf denen dieser Style nicht nur rudimentär Angewendet wird? Wie Du siehst gibt es bei den Tabellen von mir sowohl colspans als auch rowspans. Kann ich die mit CSS dann auch simulieren? Wenn ich beispielsweise die Tabelle aus div-Containern zusammensetze, brechen die dann nicht um, wenn die Seite zu schmal (Inhalte aller Zellen lassen sich nicht mehr zusammenschieben) wird?
Wie gesagt, ich muss erst mal damit rumspielen.
Für col- und rowspan per CSS benötige ich auf jeden Fall noch Hilfe, hierzu habe ich bisher noch nichts gefunden.

Die Fragen gehen natürlich auch an alle anderen Forum-Nutzer.

Mit bestem Dank schon mal

Hartmut

Dann werde ich wohl doch eine nested table für Anzahl und Preis einfügen müssen und dort, und in der Spaltenüberschrift die Breite für Preis fixieren.
nö. Kennst Du die Power von CSS? Du darfst Dir gerne in meinem winzigen Webshop-Script anschauen, dass es auch völlig ohne Tabelle geht.

[Hartmut]

Hallo,

so, meine Tests sind beendet. Die Umsetzung klappt zwar, auch kann man mit colspan/rowspan-Parameter in den Ersatztags zur Tabelle dieses Verhalten nachbilden, aber die Verwendung dieser CSS-Befehle ist stark Browserabhängig.

Im IE lassen sich die Ersatztags nicht per dispaly:table zur Tabelle umbiegen. Von alten Browsern will ich gar nicht erst anfangen.

Original-Tabellen sind halt die einzigen Tabellen die man sinnvoll einsetzen kann.
Damit liegt mein Problem weiterhin vor.

Sonst irgendwelche Vorschläge, wie ich die beiden nebeneinander liegenden Tabellenzellen zusammenziehen (colspan) kann, damit der <form> in einer einzigen Spalte bleibt, und das Design weiterhin wie zwei Tabellenzellen aussieht?
Bei mouseover soll die Spaltentrennung weiterhin sichtbar sein und auch beim Zusammenschieben soll das Umbruch-Verhalten wie in einer Tabelle funktionieren. Das Ganze soll per CSS und Browser-/Plattformübergreifend sein und natürlich gültiges HTML enthalten.
Ansonsten fällt mir an der Stelle doch nur die Nested Table -- wie bereits beschrieben -- ein.

Mit bestem Dank

Hartmut

Es hat in dem von mir gepflegten Shop schon seinen Grund, weshalb ich die Tabelle als passende Form genutzt habe:
Übersichtlichkeit für den Käufer, wenn der Artikel in zig unterschiedlichen Zuständen zur Verfügung steht (zig Zeilen) und der Inhalt für unterschiedliche Monitorbreiten übersichtlich dargestellt werden soll.
...
Vielleicht sollte ich mal ein bisschen mit display:table rumspielen und schauen, ob sich damit Verhalten und Design wie gewünscht umsetzen lassen?

Vielleicht lässt sich damit ja das Tabelle/Form-Problem lösen. In Richtung Barrierefreiheit finde ich bringt es nicht viel eine klar als Tabellenstruktur gedachte Information in eine virtuelle Tabelle zu packen.

[Felix Riesterer]

Lieber Hartmut,

ich habe da einen Vorschlag.

Benutze ein einziges <form>. Benenne jeden Button (serverseitig) eindeutig, damit der Bezug zum ausgewählten Produkt zweifelsfrei klar ist. Dann kannst Du serverseitig feststellen, welcher Button angeklickt wurde und kannst dann ebenso feststellen, welche Mengenangabe überhaupt für diesen Buttonklick relevant war/ist.

Beispiel:

<form action="..." method="post">  
<table>  
    <tr>  
        <th>Zustand</th><th>Anzahl</th><th>Preis...</th>  
    </tr>  
    <tr>  
        <td>...</td>  
        <td><input name="anzahl_artikel1234" type="text" /></td>  
        <td><input name="nimm_artikel1234" value="in den Warenkorb" type="submit" /></td>  
    </tr>  
    <tr>  
        <td>...</td>  
        <td><input name="anzahl_artikel1235" type="text" /></td>  
        <td><input name="nimm_artikel1235" value="in den Warenkorb" type="submit" /></td>  
    </tr>  
</table>  
</form>

Vielleicht hilft Dir das ja weiter?

Liebe Grüße,

Felix Riesterer.

[Hartmut]

Hallo Felix,

nett, dass Du mir noch einen Tipp gibst.

Das Problem dabei -- hatte ich oben schon mal erwähnt -- ist, dass abhängig von bestimmten Parametern im Backend bestimmte weitere Werte (hidden) je Einzelstustand des Tonträgers übergeben werden.
Innerhalb der Submit-Buttons wird schon die ID des einzelnen Tonträgers übergeben.
Außerdem muss dann der gesamte schon vorhandene Auswertungsmechanismus im Shop entsprechend geändert werden, was zusätzliche Zeit kostet.
Wenn ich dann für einen Artikel beispielsweise achtzig Zustände habe, wird die übertragene und auszuwertende Menge der Daten ebenfalls sehr groß.

Ich müsste dann natürlich jedem Hiddenfeld ebenfalls eine ID mitgeben oder den Value des Submitbuttons mit Trennzeichen getrennt die Information(en) aus den aktuellen Hidden-Feldern anhängen, das hätte auch den Vorteil, dann nur die Daten des submitteten Zustands übertragen werden und natürlich die gewählten Anzahlen (bei 1 wird ja fix die 1 hidden übertragen) für alle vorhandenen Zustände.

Wie erkläre ich meinem Kunden denn sinnvoll, dass obwohl alle Browser mit der aktuellen Syntax zurechtkommen der Code nicht valide ist, und deshalb solch einen Aufwand im Backend eingepflegt werden soll?
Ich meine, das W3C hätte Zeilenabhängige Formulare auch zulassen können.

Muss mal schauen wie ich das mache, im Moment bin ich in einer Prüfungsvorbereitung.

Danach werde ich mich das Problem intensiv angehen.

Besten Dank

Hartmut

Benutze ein einziges <form>. Benenne jeden Button (serverseitig) eindeutig, damit der Bezug zum ausgewählten Produkt zweifelsfrei klar ist. Dann kannst Du serverseitig feststellen, welcher Button angeklickt wurde und kannst dann ebenso feststellen, welche Mengenangabe überhaupt für diesen Buttonklick relevant war/ist.
Vielleicht hilft Dir das ja weiter?