Formular ohne Tabellen auslegen

[Otto Wyss]

Unter "http://de.selfhtml.org/html/formulare/eingabe.htm#felder" steht zwar immer noch "Um Beschriftung und Eingabefelder ordentlich zu positionieren, empfiehlt sich übrigens der Einsatz einer blinden Tabelle".

Eigentlich wollte ich mich wieder mal hinter mein Kontakt-Formular setzen und die Anordnung der Beschriftungen und Eingabefelder ohne Tabellen zu machen, aber scheinbar bringe ich das nicht zustande. Weiss jemand mit was ich sonst die spaltenartige Unterteilung (Eingabefelder beginnen alle am gleichen Ort) erreichen kann?

[Gast]

Eigentlich wollte ich mich wieder mal hinter mein Kontakt-Formular setzen und die Anordnung der Beschriftungen und Eingabefelder ohne Tabellen zu machen, aber scheinbar bringe ich das nicht zustande. Weiss jemand mit was ich sonst die spaltenartige Unterteilung (Eingabefelder beginnen alle am gleichen Ort) erreichen kann?

<label for="name">Ihr Name:</label><input type="text" name="name" id="name" value=""><br>
<label for="telefon">Telefon:</label><input type="text" name="telefon" id="telefon" value=""><br>
...

label {
display: block;
float: left;
width: 100px;
}

[Otto Wyss]

label {
display: block;
float: left;
width: 100px;
}

Schon erstaunlich, was ein "float: left" ausmacht. Für was ist der "display: block", scheinbar geht es auch ohne?

Und wie löst man es, wenn man mehr als 2 Spalten hat?

[Der Martin]

Hi,

label {
display: block;
float: left;
width: 100px;
}

Schon erstaunlich, was ein "float: left" ausmacht. Für was ist der "display: block", scheinbar geht es auch ohne?

das ist redundant, denn Floating setzt implizit display:block. Aber man möchte vielleicht den input-Elementen noch ein clear:left geben - dann passt es auch noch, wenn Label und Formularelement mal nicht die gleiche Höhe haben. Außerdem kann man das br-Element so eliminieren.

Und wie löst man es, wenn man mehr als 2 Spalten hat?

Alle außer der letzten Spalte floaten. Allerdings wird ein Schönheitsfehler dieses Ansatzes dann noch deutlicher: Man muss die Breite aller Felder fest vorgeben. Eine komfortable automatische Breitenanpassung wie bei Tabellen gibt's dann nicht.

Ciao,
 Martin

[Encoder]

Eigentlich wollte ich mich wieder mal hinter mein Kontakt-Formular setzen und die Anordnung der Beschriftungen und Eingabefelder ohne Tabellen zu machen

Mal dumm gefragt. Warum?
Nur weil man Tabellen nicht für *alles* layouttechnische verwenden sollte, heißt das ja nicht dass man sie für gar nichts mehr verwenden soll.

Eine Anordnung mit zwei Spalten (Text und Eingabefeld) und mehreren gleichartigen Zeilen würde ich schon noch als tabellarisches Layout durchgehen lassen.
Wenn du dann anfängst um diese Tabelle eine weitere zu legen, mit der du links eine leere Spalte bildest um einen Rand zu erzeugen oder so, das wär ist dann schon wieder ein krasser Missbrauch von Tabellen.

[suit]

Eine Anordnung mit zwei Spalten (Text und Eingabefeld) und mehreren gleichartigen Zeilen würde ich schon noch als tabellarisches Layout durchgehen lassen.

Das ist richtig - aber viele Eingabeformulare weichen doch von diesem Schema ab - da wirds mit einer Tabelle schnell Unhandlich.

[Otto Wyss]

Das ist richtig - aber viele Eingabeformulare weichen doch von diesem Schema ab - da wirds mit einer Tabelle schnell Unhandlich.

Und mit was oder wie ist es handlicher?

[suit]

Das ist richtig - aber viele Eingabeformulare weichen doch von diesem Schema ab - da wirds mit einer Tabelle schnell Unhandlich.

Und mit was oder wie ist es handlicher?

Durch die Verwendung von entsprechend auszeichnetem Markup welches die Inhalte entsprechend gliedert.

Hier kann auch ein wechsel aus zwischen Tabellen und andersartig Strukturiertem Inhalt sinnvoll sein.

z.B. Personliche Daten:

PERSÖNLICHE DATEN
Vorname:    [         ]
Nachname:   [         ]
Straße:     [         ]
Hausnummer: [         ]
PLZ:        [         ]
Ort:        [         ]

Das lässt sich gut mit einer Tabelle abbilden, wenn das aber jetzt so aussehen soll, wird es schwierig:

PERSÖNLICHE DATEN   Vorname / Nachname:   [         ][         ]
                    Straße / Hausnummer:  [               ][   ]
                    PLZ / Ort:            [     ][             ]

Hier könntest du zwar auch eine Tabelle machen (und musst das Markup umbauen), die Semantik wird hier aber stark strapaziert.

Sinnvoller ist es, hier die Elemente entsprechend mit fieldsets und generischen Containern zu gruppieren - das könnte dann z.B. so aussehen:

<fieldset>  
  <legend>Persönliche Daten></legend>  
  <div class="row">  
    <span class="label">  
      <label for="vorname">Vorname</label>  
      <label for="nachname">Nachname</label>  
    </span>  
    <input type="text" id="vorname" name="vorname" />  
    <input type="text" id="nachname" name="nachname" />  
  </div>  
  <!-- usw -->  
</fieldset>

[Siri]

Hallo,

Und mit was oder wie ist es handlicher?

Durch die Verwendung von entsprechend auszeichnetem Markup welches die Inhalte entsprechend gliedert.

Hier kann auch ein wechsel aus zwischen Tabellen und andersartig Strukturiertem Inhalt sinnvoll sein.

Ich denke es kommt auch immer darauf an was man hat. Wenn es definierte Vorgaben gibt (Labels , Feldbreiten, etc.) , dann kann man das Formular auch semantisch korrekt aufbauen und mit CSS in eine hübsche Form bringen.

Wenn ich in Rahmen z.B. eines CMS einen Formulargenerator habe und nicht weiß, wie breit die Labels in welcher Sprache sein werden und in welcher Reihenfolge der Anwender welche Felder benötigt, dann komm ich um eine Tabelle nicht rum. Außerdem ist die Komplexität dann auch weniger ein Problem, weils ja rekursiv erzeugt wird. Oder sieht das jemand anders?

Und btw: Man sollte die Semantikkirche auch mal im Dorf lassen. Da wo ich herkomme werden Inhalte nicht in HTML gespeichert sondern in XML oder in DBs/Tabellen. Da ist HTML nur ein mögliches Ausgabemedium und damit Mittel zum Zweck (der Darstellung).

Viele Grüße
Siri

[suit]

Wenn ich in Rahmen z.B. eines CMS einen Formulargenerator habe und nicht weiß, wie breit die Labels in welcher Sprache sein werden und in welcher Reihenfolge der Anwender welche Felder benötigt, dann komm ich um eine Tabelle nicht rum. Außerdem ist die Komplexität dann auch weniger ein Problem, weils ja rekursiv erzeugt wird. Oder sieht das jemand anders?

Das TYPO3-Backend ist nicht deiner Meinung :) (Stichwort: TCA)

Und btw: Man sollte die Semantikkirche auch mal im Dorf lassen.

Und alles fest in tabellen betonieren, damit bei geringfügigen einer Layoutanpassung wieder herumdoktorn darf? :)

[Siri]

Hallo,

Das TYPO3-Backend ist nicht deiner Meinung :) (Stichwort: TCA)

Und btw: Man sollte die Semantikkirche auch mal im Dorf lassen.

Das Tool kenn ich nicht, da ich nicht mit Typo3 arbeite. Wie schaut da der Output aus? Und was verstehen wir eigentlich unter einem vernünftigen Formular? So sollte ein Formular aus Usabilitysicht aufgebaut sein:

Name:        Inputfeld
Interessen:  checkbox HTML
             checkbox Javascript
             checkbox Sonstiges: Inputfield

Und jetzt kann der Benutzer beliebige Formularfelder mit beliebigen Labeln aufbauen. Alles berechnen mit durchschnittlicher Buchstabenweite für die Breite der Labelfelder, damit alles schön ausgereichtet ist?

Da wurde mit HTML5 wieder eine große Chance verpasst, dem Thema Rechnung zu tragen.

Und alles fest in tabellen betonieren, damit bei geringfügigen einer Layoutanpassung wieder herumdoktorn darf? :)

Meinst du die ganze Seite oder die Tabelle? ;-) Betonieren finde ich auf jeden Fall den falschen Ausdruck, weil Tabellen ja dynamischen Ausgleich schaffen :)
Und was sind denn die geringfügigen Änderungen, die alles auf den Kopf stellen? Einmal sauber in XSL definiert und fertig :)

Viele Grüße
Siri

[suit]

Hallo,

Das TYPO3-Backend ist nicht deiner Meinung :) (Stichwort: TCA)

Und btw: Man sollte die Semantikkirche auch mal im Dorf lassen.

Das Tool kenn ich nicht, da ich nicht mit Typo3 arbeite. Wie schaut da der Output aus?

z.B. so:
http://www.netzwerkstudio.de/uploads/pics/typo3_screenshot_01.jpg

Und was verstehen wir eigentlich unter einem vernünftigen Formular? So sollte ein Formular aus Usabilitysicht aufgebaut sein:

Es muss übersichtlich geglieder sein - und je nach Anwendung können Eingabefelder neben- oder untereinander sein (bzw. auch gemischt, je Formular).

Wenn man z.B. die Zutatenliste eines Rezepts nimmt, könnte das Formular so aussehen:

Menge    Einheit   Name
Zutat 1:  [     ]  [ kg   ]v   [                ]
Zutat 2:  [     ]  [ Stk. ]v   [                ]
                                                   weiter hinzufügen [+]

Dieses einzelne Segment könnte man sogar als Tabelle abbilden.

Da wurde mit HTML5 wieder eine große Chance verpasst, dem Thema Rechnung zu tragen.

HTML5 hat mit der Darstellung nichts (in der praxis leider doch) zu tun.

Und alles fest in tabellen betonieren, damit bei geringfügigen einer Layoutanpassung wieder herumdoktorn darf? :)
Meinst du die ganze Seite oder die Tabelle? ;-) Betonieren finde ich auf jeden Fall den falschen Ausdruck, weil Tabellen ja dynamischen Ausgleich schaffen :)

Ich meine Das Formular :) die ganze Seite mit Tabellen zu layouten wäre noch schlimmer :D

Und was sind denn die geringfügigen Änderungen, die alles auf den Kopf stellen? Einmal sauber in XSL definiert und fertig :)

Um z.B. Beispiel TCA (typo3) zurückzukommen.

Vereinfacht sagt man hier nur, wie die zu den Datenfeldern der DB als Eingabefelder im Backend beschaffen sein sollen.

Welcher Datentyp, wenn es ein Drop-Down ist, woher die Werte kommen, ob es eine Palette ist (ein-/ausklappbarer Teil) oder ein Einzelfeld, wie es Validiert wird usw.

Das allgemeine Layout/Skin des Backend bestimmt dann, wie das ganze auszusehen hat. In Summe ist das nicht völlig frei gestaltbar, sorgt aber für ein einheitliches und übersichtliches Bild.

Und wenn es in einer künftigen TYPO3-Version anders aussieht (oder nur der Redakteur sein Konfiguration entsprechend geändert hat), sieht es völlig anders aus, ohne dass jemand die Beschreibung/Definition der Formulare angreifen muss.

[Siri]

Das Tool kenn ich nicht, da ich nicht mit Typo3 arbeite. Wie schaut da der Output aus?

z.B. so:
http://www.netzwerkstudio.de/uploads/pics/typo3_screenshot_01.jpg

Ich hab jetzt eher gemeint wie der HTML-Code ausschaut, den das Tool generiert ;-)

Da wurde mit HTML5 wieder eine große Chance verpasst, dem Thema Rechnung zu tragen.

HTML5 hat mit der Darstellung nichts (in der praxis leider doch) zu tun.

Semantik und Darstellung müssen sich ja nicht ausschließen. Nehmen wir z.B. Radiobuttons. Da gehört zu jedem einzelnen Radiobutton ein Label und zu der gesamten Gruppe wiederum ein Gruppenlabel.
Ein entsprechendes Element hätte HTML 5 bereitstellen können, das wäre erstens semantisch korrekt und zum zweiten könnte es auch eine tabellarische Verhaltensweise mitbringen.

Und alles fest in tabellen betonieren, damit bei geringfügigen einer Layoutanpassung wieder herumdoktorn darf? :)
Meinst du die ganze Seite oder die Tabelle? ;-) Betonieren finde ich auf jeden Fall den falschen Ausdruck, weil Tabellen ja dynamischen Ausgleich schaffen :)

Ich meine Das Formular :) die ganze Seite mit Tabellen zu layouten wäre noch schlimmer :D

Ja, das sind wir uns natürlich absolut einig! :-)

[Siri]

Ein entsprechendes Element hätte HTML 5 bereitstellen können, das wäre erstens semantisch korrekt und zum zweiten könnte es auch eine tabellarische Verhaltensweise mitbringen.

Also ein Element, das die Gruppierung kapselt und die Zuordnung der Labels klärt!

[suit]

Ich hab jetzt eher gemeint wie der HTML-Code ausschaut, den das Tool generiert ;-)

Das ist eine Mischung aus Tabellen, Fieldsets und anderem Zeug - je nach Bedarf und Art der Felder.

Ein entsprechendes Element hätte HTML 5 bereitstellen können, das wäre erstens semantisch korrekt und zum zweiten könnte es auch eine tabellarische Verhaltensweise mitbringen.

Warum, dass sich Dinge vom Aussehen her Verhalten wie eine Tabelle ist aufgabe von CSS. Das geht schon ewig, nur sind noch ein paar alte Browser "dagegen".

[Otto Wyss]

Mal dumm gefragt. Warum?

Weil ich sowieso Änderungen machen muss und weil ich wissen möchte, ob sich der Stand der Technik geändert hat. Tabellen erscheinen mir doch ein aufwendiges Mittel, es sollte doch inzwischen mit CSS einfacher möglich sein. Wenn z.B. das "label" width richtig unterstützen würde, wäre es wesentlich einfacher möglich, spaltenweise Formate zu machen.

Eine Anordnung mit zwei Spalten (Text und Eingabefeld) und mehreren gleichartigen Zeilen würde ich schon noch als tabellarisches Layout durchgehen lassen.

Sobald man jedoch mehr als zwei Spalten will, wird es kompliziert. Doch das erscheint mir gar kein so abwegiger Fall zu sein.

[suit]

Wenn z.B. das "label" width richtig unterstützen würde, wäre es wesentlich einfacher möglich, spaltenweise Formate zu machen.

Die display-Eigenschaft muss dir irgendwie entgangen sein :)

Sobald man jedoch mehr als zwei Spalten will, wird es kompliziert. Doch das erscheint mir gar kein so abwegiger Fall zu sein.

Richtig, das ist bei übersichtlichen Formularen sogar üblich, dass man nicht alles in einer Wurst 2-spaltig anordnet.