html >>> Formular in Tabelle?
Was ist hier falsch? . bzw. .. is das valide?
3 Antworten
Nein, das ist weder valid, noch eine gute Lösung.
1) Du öffnest in der Tabelle noch ein neues form-Element. Die Tabelle erwartet an dieser Stelle aber Elemente vom Typ tr oder thead, tfoot, tbody. Ein form-Element schachtelt man auch nicht in einem anderen form-Element.
2) Wenn der Button das Formular wirklich abschicken soll, nimm das type-Attribut raus.
3) Eine Tabelle dient der übersichtlichen, vergleichenden Darstellung von Inhalten, aber nicht dem Layouting. Du missbrauchst das Tabellenelement also derzeit für falsche Zwecke. Setze die Eingabefelder stattdessen in div-Boxen o.ä. und positioniere diese via CSS. Du kannst hier bspw. das CSS Grid verwenden.
Stimmt, vergleichend ist noch keine vollständig passende Beschreibung. Vielleicht trifft es relational besser. Wobei sich für eine Einkaufsliste auch eine Definitionsliste gut eignen würde.
Bei deinem Snippet sind dir wohl ein paar Fehler unterlaufen (schließendes thead, schließende td-Elemente im Körper). In deiner Antwort hast du es korrigiert.
So pauschal ausgedrückt ist das nicht richtig.
Ich verstehe unter dem Wort Layouting eine visuelle Darstellung von Daten. In HTML geht es aber, wie du ja auch weißt, eher darum, Daten mit Metainformationen auszustatten, um sie so zu beschreiben. Auf welcher medialen Ebene man das Markup später darstellt (ob man es malt oder vorliest), ist flexibel.
Beides wäre in diesem Beispiel falsch, weil dadurch die Zuordnung Attribut -> Engabeverloren geht.
Eine Zuordnung Attribut-Eingabe lässt sich durch eine Beziehung zwischen label und input herstellen. Das hätte ich in meiner obigen Antwort anfügen sollen bzw. ich habe außer Acht gelassen, dass diese Elemente hier fehlen. Der FS nutzt es einer neueren Frage zufolge aber bereits.
Wobei sich für eine Einkaufsliste auch eine Definitionsliste gut eignen würde.
Seh ich auch so, weil es sich dabei um Gruppierungen von Name-Wert-Paaren handelt.
Bei deinem Snippet sind dir wohl ein paar Fehler unterlaufen
Die üblichen copy & paste Fehler :-)
Eine Zuordnung Attribut-Eingabe lässt sich durch eine Beziehung zwischen label und input herstellen.
Das label-Element repräsentiert eine Überschrift, definiert aber keine Beziehung zwischen dem Text und dem Eingabeelement:
<p><label>Age: <input name=age type=number min=0></label></p>
Bei einer Tabelle respäsentiert die erste Spalte alle einzugebenden Felder, die zweite Spalte repräsentiert die dazu gehördenden Werte. Erweitern wir das oben genannte Formular um weitere Spalte, dann wird deutlicher, warum hier eine Tabelle tatsächlich das geeignete Element ist (die dritte Spalte repräsentiert das entsprechende Format, die vierte Spalte, ob es sich um ein Pflichtfeld handelt usw. usw):
<table>
<tr>
<th>Attribut</th>
<th>Eingabe</th>
<th>Format</th>
<th>Angabe</th>
</tr>
<tr>
<td>Vorname</td>
<td><input name="vorname"></td>
<td>alphanumerisch</td>
<td>optional</td>
</tr>
<tr>
<td>Nachname</td>
<td><input name="nachname"></td>
<td>alphanumerisch</td>
<td>Pflichtfeld</td>
</tr>
</table>
In dem Beispiel des Fragestellers wurde das table-Element tatsächlich korrekt verwendet (auch wenn ich zu 100% sicher bin, dass die korrekte Verwendung versehentlich passierte).
Das label-Element dient der Beschriftung eines Formularfeldes (das in der Spezifikation verwendete Wort caption wird hier mit Beschriftung übersetzt, so wie das figcaption-Element eine Beschriftung im Bezug zum figure-Element darstellt) . Die Beziehung zwischen beiden wird durch for- und id-Attribut hergestellt oder indem man es so wie in deinem Snippet schachtelt. Browser gehen sogar soweit, diese Beziehung durch ein visuelles Verhalten zu verdeutlichen (ein Klick auf das Label fokussiert das assoziierte Eingabefeld).
Das label-Element dient der Beschriftung eines Formularfeldes
Nicht nur der Beschriftung von Formularfeldern:
<label for="fieber">Körpertemperatur:</label>
<meter id="fieber" min="36" max="42" value="37">normal</meter>
Die Beziehung zwischen beiden wird durch for- und id-Attribut hergestellt
das ist aber im Gegensatz zur Tabelle keine logische bzw. inhaltliche Zuordnung sondern eben nicht mehr als eine Beschriftung. Folgendes Beispiel:
<form>
<table>
<tr>
<th>Attribut</th>
<th>Eingabe</th>
</tr>
<tr>
<td>Vorname</td>
<td><input name="vorname"></td>
</tr>
</table>
<input type="checkbox" id="checkbox">
<label for="checkbox">Newsletter anfordern</label>
<input type="submit">
</form>
hat eine andere logische Struktur als
<form>
<label for="vorname">Vorname</label>
<input name="vorname" id="vorname">
<label for="checkbox">Newsletter anfordern</label>
<input type="checkbox" id="checkbox">
<input type="submit">
</form>
Nicht nur der Beschriftung von Formularfeldern:
Von einem nur habe ich auch nicht geschrieben. 😜
(...) sondern eben nicht mehr als eine Beschriftung.
So wie du das schreibst, könnte man fast meinen, ein label wäre schlecht / minderwertig, dabei ist es gerade für diesen Anwendungsfall ausgerichtet.
So wie du das schreibst, könnte man fast meinen, ein label wäre schlecht / minderwertig,
Nein, ganz und gar nicht. Es hat aber nicht den Sinn, zwischen Elementen eine logische Beziehung herzustellen, so wie das durch Tabellenzellen geschieht.
Mir ging es darum, klarzumachen, dass Tabellen durchaus zur optischen Gestaltung verwendet werden und dass das verbreitete, reflexartige "Mit Tabellen layoutet man nicht" differenzierter gesehen werden muss.
Die beiden User @regex9 und @EinAlexander haben dir bereits etwas zur Umsetzung gesagt. Auch ich möchte das ein oder andere loswerden und dir mit auf den Weg geben. Selbst wenn du es am Ende nicht übernimmst, vielleicht wenigstens darüber nachdenkst. Bevor ich jetzt etwas zur technischen Umsetzung sage, erst einmal die Frage in den Raum werfe, ob überhaupt so viele personenbezogene Daten sein müssen? Wenn es ein einfaches Kontaktformular sein soll, mir persönlich zu viele Informationen verlangt werden.
Ich habe gewiss keine Paranoia was mein Daten angeht, für eine einfache Kontaktaufnahme jedoch zu viel. Mein Tipp: Das ganze Formular auf Name und E-Mail reduzieren oder die Anschrift wenigstens als optionale Angabe kennzeichnen. Je mehr Daten erhoben werden, desto größer auch die Verantwortung und Anforderungen, wie diese verarbeitet und genutzt werden (Stichwort: Sicherheit, DSGVO etc. pp.). Bei der Anmeldung in einem Webshop oder einem Bestellformular wird es jeder verstehen. Für die reine Kontaktaufnahme es doch etwas "too much" ist.
Jetzt zur Umsetzung:
Ob dein Markup und/oder CSS valide ist, ganz schnell selber herausfinden kannst. Das W3C bietet dafür extra einen kostenlosen "Markup Validation Service" an. Dort kannst dein HTML ganz einfach hochladen oder per "copy & paste" einfügen. Am Ende nur noch auf den Button "check" klickst und deine Quellcode auf dessen Validität überprüft wird. Unabhängig davon auch Seiten wie "Can I Use" nützliche Informationen liefern.
- W3C: HTML Markup validieren --> https://validator.w3.org
- W3C: CSS validieren --> https://jigsaw.w3.org/css-validator/
- Can I Use: Allg. nützliche Infos --> https://caniuse.com
Tabellen sind zur Darstellung von tabellarischen Daten gedacht und sollten auch nur dafür genutzt werden. Wenn man Tabellen für ein Formular verwenden möchte, sollten diese linearisierbar sein, sprich deren Gerüst muss mit den darin liegenden Elementen einen Sinn ergeben. Ich würde in einem Kontaktformular wie deinem keine Tabelle verwenden, sondern mit <fieldset>, <div> und/oder <label> arbeiten.
HTML:
<form action="contact-form-handler.php" method="post">
<fieldset>
<legend>Adressangaben</legend>
<!-- Vor und Nachname -->
<label for="firstname">Vor-</label>
<label for="lastname"> und Nachname:</label> <br>
<input id="firstname" type="text" name="firstname" placeholder="Vorname">
<input id="lastname" type="text" name="lastname" placeholder="Nachname"> <br>
<!-- Straße und Hausnummer -->
<label for="street">Straße</label>
<label for="number"> und Hausnummer:</label> <br>
<input id="street" type="text" name="street" placeholder="Straße">
<input id="number" type="text" name="number" placeholder="Nr."> <br>
<!-- PLZ und Ort -->
<label for="postcode">PLZ</label>
<label for="place"> und Ort:</label> <br>
<input id="postcode" type="text" name="postcode" maxlength="10" placeholder="PLZ">
<input id="place" type="text" name="place" placeholder="Ort">
</fieldset>
</form>
Textfeld für Nachricht und den Submit-Button jetzt mal weggelassen habe. Geht ja nur um den grundsätzlichen Aufbau. Noch ein letzter Tipp, verwende eine Editor mit Syntax-Highlighting. Dir abschließend ein paar alternative Editoren verlinke und jeder davon um ist längen besser als der rudimentäre Notepad.
- Atom --> https://atom.io
- VisualStudio Code --> https://code.visualstudio.com
- Brackets --> http://brackets.io
- SublimeText --> http://sublimetext.com
LG medmonk
Was ist hier falsch?
Vieles. Richtig(er) wäre
<!doctype html>
<title>Rahmenfarbe ändern</title>
<p>Unser Kontaktformular</p>
<form action="mailto:example@example.org" method="post" enctype="text/plain">
<table>
<thead>
<tr>
<th scope="col">Attribut</th>
<th scope="col">Eingabe</th>
</tr>
</thead>
<tbody>
<tr>
<td>Vorname</td>
<td><input name="vorname" maxlength="20"></td>
</tr>
<tr>
<td>Nachname</td>
<td><input name="nachname" maxlength="20"></td>
</tr>
...
</tbody>
</table>
<button id="Vertrag">Bestätigen</button>
</form>
Beachte allerdings, dass das Formular nicht abgeschickt werden kann, wenn kein korrekt konfiguriertes e-Mail-Programm installiert ist. Von mailto-Formularen wird deswegen i. A. abgeraten.
Alex
Nicht nur. Bei einer Stückliste oder einer Einkaufsliste wird nichts "vergleichend" dargestellt:
So pauschal ausgedrückt ist das nicht richtig. Eine Tabelle ist immer ein visuelles Layout-Element. Du selbst schreibst ja, dass eine Tabelle der Darstellung von Inhalten dient. Und ein Layout ist nichts anderes als eine Form der Darstellung. Im Beispiel des Fragestellers wird die Tabelle sogar korrekt angewendet: Spalte 1 zählt auf, welche Attribute es gibt, Spalte 2 ordnet diesen Attributen die zugehörigen Werte zu.
Beides wäre in diesem Beispiel falsch, weil dadurch die Zuordnung Attribut -> Engabe verloren geht.