Ist es akzeptabel, Tabellen für Formulare zu verwenden? Oder ist es immer noch korrekter, Divs zu verwenden?

Question

Ich frage mich, ob es akzeptabel ist, wenn man table s für Formulare.

Streng genommen handelt es sich bei Name/Wert-Paaren um tabellarische Daten, nicht wahr? Und ein Formular ist nur ein vom Benutzer anpassbarer Satz von Name/Wert-Paaren. Ist es also richtig, Folgendes zu verwenden table s in diesem Fall? Oder sollte ich verwenden div mit CSS gestylt ist?

Answer 1

Es ist wichtig, Beschriftungen mit dem Attribut "for" für Bildschirmleser zu verwenden (für die Benutzerfreundlichkeit).

Deshalb verwende ich Feldsätze

Answer 2

Ich habe nie verstanden, warum man eine geordnete oder ungeordnete Liste für Formulare verwenden sollte, wenn eine Definitionsliste semantisch besser geeignet erscheint:

<fieldset>
  <dl>
    <dt><label for="definition">Definition:</label></dt>
    <dd><input type="text" name="definition" /></dd>
  </dl>
</fieldset>

Sie können vom Format her etwas schwieriger zu handhaben sein, aber für die allermeisten Formulare waren sie für mich immer sinnvoller als Listen oder Tabellen.

Davon abgesehen scheinen mir Tabellen für bearbeitbare tabellarische Daten nicht ungeeignet zu sein.

Answer 3

Formulare können tabellarisch sein oder sich so anfühlen, aber Tabellen implizieren neben der Semantik auch eine "Präsentation". Wenn Sie ein Formular in einer Tabelle auszeichnen, wird das Design tendenziell auf ein Layout mit zwei Feldern und zwei Eingaben festgelegt (vorausgesetzt, Sie wollen keine Zeit damit verbringen, das CSS der Tabelle zu überschreiben). Darüber hinaus können Sie müssen überschreiben Sie die Stile, wenn Sie versuchen, kleine Bildschirme wie Mobiltelefone zu berücksichtigen.

Außerdem wird ein Bildschirmlesegerät dieses Formular mit einer Überschrift ankündigen, "Zeile 1, Spalte 1, Beschriftung, 'Name', Spalte 2, Eingabe, 'Name'..." statt einfach, "Eingabe, 'Name'..."

Ich empfehle die Verwendung von DIVs, FIELDSETs oder ULs/LIs. Damit bleibt die Darstellung in den Händen von CSS, genau dort, wo sie hingehört.