nicht angemeldet
Aufbau eines Formulars
Hi allerseits!
Ich erstelle ein Formular, welches per CSS formatiert werden soll (und mit php verarbeitet). Da ich das Formular so sinnvoll/einfach wie möglich und nach heutigen Massstäben aufbauen möchte, hab ich mich erstmal umgeschaut was die vorherrschende Meinung ist wie man Formulare aufbauen soll.
Erschreckenderweise bin ich dabei auf sehr viele Beispiele gestossen, die beim Aufbau des Formulars blinde Tabellen verwenden. Sogar Selfhtml himself: http://de.selfhtml.org/html/formulare/eingabe.htm#felder (zweites Beispiel) oder http://de.selfhtml.org/html/formulare/formatieren.htm. Ich dachte die Verwendung von Tabellen sei mittlerweile verschmäht (ausser es soll wirklich eine Tabelle dargestellt werden). Bin ich etwa doch falsch informiert?! Selfhtml hat übrigens in vielen Beispielen tabellen Designs.
Naja, andere packen jedes einzelne Eingabefeld und die dazugehörige Beschriftung in ein <div>. Ein Beispiel findet ihr unter: http://www.stichpunkt.de/css/formulare.html.
Und wiederum andere verwenden eine Liste und geben die Eingabefelder als ein Listenpunkt aus. Beispiel hierfür findet ihr im vierten blauen Feld auf folgender Seite: http://tut.php-quake.net/guestbook.html#u4.
So, ich weiss nicht ob es ein richtig oder falsch gibt (wobei mir, das Design mit Tabelle falsch vorkommt), aber was ist am sinnvollsten? Was am einfachsten? Was am besten für die Lesbarkeit (wenn man z.B. auch die Ausgabe für Blinde miteinbezieht)?
Ich bin mal gespannt auf eure Meinungen.
LG
tinu
-
Hi,
Ich dachte die Verwendung von Tabellen sei mittlerweile verschmäht (ausser es soll wirklich eine Tabelle dargestellt werden).
die Verwendung von Tabellen ist verschmäht, außer es handelt sich um tabellarische Daten.
Bin ich etwa doch falsch informiert?!
Darüber, ob man Formulare als tabellarische Daten ansehen kann? Offenbar, denn oft genug ist das durchaus möglich.
Selfhtml hat übrigens in vielen Beispielen tabellen Designs.
Ja, richtig. SelfHTML ist riesengroß, historisch gewachsen, und nur an wenigen Stellen wurde es hin und wieder komplett überarbeitet. Das ist auch keine Schande, zumal SelfHTML ein uneigennütziger Verein ist, kein Missionierungszentrum - sonst würden hier Missionarstellungen angeboten werden.
Naja, andere packen jedes einzelne Eingabefeld und die dazugehörige Beschriftung in ein <div>.
Auch nicht verkehrt, zumal zusammengehörende Elemente gruppiert werden.
Und wiederum andere verwenden eine Liste und geben die Eingabefelder als ein Listenpunkt aus.
Oder als <dd> und <dt>, je nach Listenart.
So, ich weiss nicht ob es ein richtig oder falsch gibt
Nein: HTML ist keine eineindeutige Wissenschaft. Es gibt für viele Probleme mehrere gültige Lösungen, ganz besonders wenn HTML für das Problem keine spezielle Semantik vorsieht.
(wobei mir, das Design mit Tabelle falsch vorkommt),
Wenn Du es verallgemeinerst, gibt es hierauf keine Antwort. Im Einzelfall kann es falsch aber auch richtig sein.
aber was ist am sinnvollsten? Was am einfachsten?
Das hängt vom Fall ab. Alle von Dir genannten Möglichkeiten habe ich bereits in der Praxis eingesetzt.
Was am besten für die Lesbarkeit (wenn man z.B. auch die Ausgabe für Blinde miteinbezieht)?
Denke unbedingt immer an <label>.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
... Das ist auch keine Schande, zumal SelfHTML ein uneigennütziger Verein ist, kein Missionierungszentrum - sonst würden hier Missionarstellungen angeboten werden.
Das würde dir zur Abwechslung mal die bequeme Rückenlage erlauben :))
mfg Beat
--
Woran ich arbeite:
X-Torah
/|
<°)))o>< / | /|
---- _|___/ | ><o(((°>
OvVVvO __ | ><o(((°>
<°)))o>< /v v\/ |
<°)))o>< ^ ^/_/_ ><o(((°>
^^^^/___/
><o(((°> ---- ><o(((°>
<°)))o>< ><o(((°>o
-
Hi,
... Das ist auch keine Schande, zumal SelfHTML ein uneigennütziger Verein ist, kein Missionierungszentrum - sonst würden hier Missionarstellungen angeboten werden.
Das würde dir zur Abwechslung mal die bequeme Rückenlage erlauben :))wozu? Ich bin gut drauf, nicht gut drunter.
Cheatah ;-)
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes
-
-
-
Hallo,
Ich dachte die Verwendung von Tabellen sei mittlerweile verschmäht (ausser es soll wirklich eine Tabelle dargestellt werden). Bin ich etwa doch falsch informiert?!
Na das denk ich aber auch mal... du bist da völlig richtig informiert.
So, ich weiss nicht ob es ein richtig oder falsch gibt (wobei mir, das Design mit Tabelle falsch vorkommt), aber was ist am sinnvollsten? Was am einfachsten? Was am besten für die Lesbarkeit (wenn man z.B. auch die Ausgabe
Es gibt nicht wirklich ein >Richtig< oder ein >Falsch<. Wenn, dann gibt es Wege, die zur lösung führen. Und ob diese Wege nun die praktischsten sind ist eine andere Sache.
MfG. Christoph
-
Es gibt nicht wirklich ein >Richtig< oder ein >Falsch<. Wenn, dann gibt es Wege, die zur lösung führen. Und ob diese Wege nun die praktischsten sind ist eine andere Sache.
es gibt sehrwohl richtig und falsch ;) aber unter "richtig" gibt es viele möglichkeiten, die zum ziel führen - falsch ist aber sicher eine tabelle zu verwenden
richtig ist zb eine der varianten hier, priorisiert in dieser reihenfolge:
<fieldset> <p><label /><input /></p> <p><label /><input /></p> </fieldset> <fieldset> <div><label /><input /></div> <div><label /><input /></div> </fieldset> <fieldset> <label /><input /><br /> <label /><input /><br /> </fieldset>es besteht zb auch noch die möglichkeit, label und input zu verschachteln
eine definitionsliste zu verwenden (aber das ist schon fast so kriminell wie eine tabelle ;))
-
Hallo,
es gibt sehrwohl richtig und falsch ;) aber unter "richtig" gibt es viele möglichkeiten, die zum ziel führen - falsch ist aber sicher eine tabelle zu verwenden
denkst du... auch eine tabelle ist ein weg zum ziel. nur das dieser weg sicher nicht der beste ist. es sind ALLE wege richtig, die zu der gewünschten darstellung führen. und das macht auch eine tabelle.
MfG. Christoph
-
denkst du... auch eine tabelle ist ein weg zum ziel. nur das dieser weg sicher nicht der beste ist. es sind ALLE wege richtig, die zu der gewünschten darstellung führen. und das macht auch eine tabelle.
eine tabelle stellt in matritzen strukturierte daten dar
<table> <tr> <td>Vorname</th> <td>Hasi</td> </tr> <tr> <td>Nachname</th> <td>Hinterseer</td> </tr> </table>alternativ lässt sich das auch als defintionsliste schreiben
<dl> <dt>Vorname</dt> <dd>Hasi</dd> <dt>Nachname</dt> <dd>Hinterseer</dd> </dl>ein formular sieht so aus (anm, code vereinfacht)
<table> <tr> <td><label>Vorname</label></th> <td><input value="Hasi" /></td> </tr> <tr> <td><label>Nachname</label></th> <td><input value="Hinterseer" /></td> </tr> </table>welchen sinn hätte es, redundante informationen bereitzustellen? label stellt einen eindeutigen bezug zu input dar (das for-attribut vorausgesetzt), warum sollte man also nochmal zusätzlich gruppierende elemente herumpacken?
ob das ganze nun falsch oder richtig ist, darüber lässt sich streiten - meiner meinung nach sollte aber jedweder art von redundanz vermieden werden - und eine bestehende, vernünftige datenstruktur durch eine schlechtere, weniger geeignete struktur ergänzen ist ziemlich undklug
jetzt stell dir vor, du hast ein label und 3 radio-buttons die untereinander stehen - das sieht dann mit tabelle so aus
<tr> <td><p>Zeitschrift</p></th> <td><label>Kronen Zeitung</label><input type="radio" /></td> </tr> <tr> <td></th> <td><label>Salzburger Nachrichten</label><input type="radio" /></td> </tr> <tr> <td></th> <td><label>Der Standard</label><input type="radio" /></td> </tr>hier geht die logische struktur durch die tabelle schon stark verloren
anders hingegen zb diese struktur
<div> <p>Zeitschrift</p> <label>Kronen Zeitung</label><input type="radio" /> <label>Salzburger Nachrichten</label><input type="radio" /> <label>Der Standard</label><input type="radio" /> </div>zudem ist bei der darstellung eines forumuars als tabelle keine vernünftige gruppierung mehr mittels fieldsets möglich - dadurch wird die datenstruktur dann noch schwammiger - anstatt etwas fieldset/legend zu verweden, sollte man dann wohl mehrere tabellen mit unterschiedlichen captions verwenden? meiner meinung nach äusserst unklug
-
Hello,
denkst du... auch eine tabelle ist ein weg zum ziel. nur das dieser weg sicher nicht der beste ist. es sind ALLE wege richtig, die zu der gewünschten darstellung führen. und das macht auch eine tabelle.
Das soll eben nicht so gehandhabt werden, dass die _Darstelung_ mit HTML vorgenommen wird, sondern mit HTML soll die Auszeichnung der Daten stattfinden.
Liebe Grüße aus Syburg bei Dortmund
Tom vom Berg
-
denkst du... auch eine tabelle ist ein weg zum ziel. nur das dieser weg sicher nicht der beste ist. es sind ALLE wege richtig, die zu der gewünschten darstellung führen. und das macht auch eine tabelle.
Ich würde nicht sagen, dass eine Tabelle der Weg zum Ziel ist. Es ist einfach so, dass CSS noch nicht hinreichend ausgebaut ist, um das Ziel elegant zu erreichen.
Tabellen sind mir definitiv zu viel Code für Formulare.
Vom semantischen Gesichtspunkt wäre ich auch gezwungen, ein<tr> <th>Feldbeschriftung</th> <th>Formularfeld</th> </tr>vorzusehen.
Aber damit schliesse ich den Gebrauch von <fieldset> und <legend> aus, um sinnvoll zu gruppieren.
Vorzuziehen ist deshalb die Struktur:<form> <fieldset><legen>Gruppe</legend> <dl> <dt><label for=f1>Label</label></dt> <dd><input id=f1></dd> <dd><p>Kommentar</p></dd> ... </dl> ... </fieldset> ... </form>Siehe, wie in dl auch die Vergabe zu Kommentaren in <dd> möglich ist,
also einerseits eine Assoziation besteht, anderseits aber Erweiterungen möglich sind.
Dies erlaubt dir eine Tabelle nicht.mfg Beat
-
-
hi,
es besteht zb auch noch die möglichkeit, label und input zu verschachteln
Das halte ich für die beste Lösung, oder wenn, dann in span verschachtelt, also;
<fieldset> <label><input /></label> <label><input /></label> </fieldset> oder <fieldset> <span><label /><input /></span> <span><label /><input /></span> </fieldset>Für p's oder gar div's sehe ich keinen erkennbaren Grund, da sowohl
<label> als auch <span>display:block;verstehen.Siehe hierzu auch: Ansatz für flexible, mehrspaltige Formulare.
mfg
-
<fieldset>
<span><label /><input /></span>
<span><label /><input /></span>
</fieldset>> Für p's oder gar div's sehe ich keinen erkennbaren Grund, da sowohl `<label> als auch <span>`{:.language-html} `display:block;`{:.language-css} verstehen. div hat gegenüber dem span element den vorteilt, dass ein absatz erzeugt wird (auch wenn ohne css) somit hat man in text-only-browsern wie zb lynx keine formularfeldwurst sondern zeilen ;)-
hi,
<fieldset>
<span><label /><input /></span>
<span><label /><input /></span>
</fieldset>> div hat gegenüber dem span element den vorteilt, dass ein absatz erzeugt wird (auch wenn ohne css) somit hat man in text-only-browsern wie zb lynx keine formularfeldwurst sondern zeilen ;) Das kann man ja dann auch wieder anders lösen, beispielsweise Sinnvoll mit fieldset gruppieren, siehe [diese ohne CSS](http://start-navi.de/beispiele/kontakt.php), wobei ich da auch noch einige verbesserungen vornehmen könnte, tue ich jetzt aber nicht :) mfg -- [I have a Dream...](http://www.myvideo.de/watch/2503116/I_have_a_dream_Will_I_AM_feat_Common)-
Das kann man ja dann auch wieder anders lösen, beispielsweise Sinnvoll mit fieldset gruppieren, siehe diese ohne CSS, wobei ich da auch noch einige verbesserungen vornehmen könnte, tue ich jetzt aber nicht :)
natürlich - aber worauf ich hinaus will: semantisch besteht zwischen span und div quasi kein unterschied - es sind beides generische container, das eine ein block-element, das andere ein inline-element
-
hi,
natürlich - aber worauf ich hinaus will: semantisch besteht zwischen span und div quasi kein unterschied - es sind beides generische container, das eine ein block-element, das andere ein inline-element
Stimmt, und recht hat wieder mal das Fliegende Spaghettimonster!
Zum Glück führen viele Wege zum Ruhm.
mfg
-
-
-
-
-
-
-
Ich erstelle ein Formular, welches per CSS formatiert werden soll (und mit php verarbeitet). Da ich das Formular so sinnvoll/einfach wie möglich und nach heutigen Massstäben aufbauen möchte, hab ich mich erstmal umgeschaut was die vorherrschende Meinung ist wie man Formulare aufbauen soll.
Erschreckenderweise bin ich dabei auf sehr viele Beispiele gestossen, die beim Aufbau des Formulars blinde Tabellen verwenden. Sogar Selfhtml himself: http://de.selfhtml.org/html/formulare/eingabe.htm#felder (zweites Beispiel) oder http://de.selfhtml.org/html/formulare/formatieren.htm. Ich dachte die Verwendung von Tabellen sei mittlerweile verschmäht (ausser es soll wirklich eine Tabelle dargestellt werden). Bin ich etwa doch falsch informiert?! Selfhtml hat übrigens in vielen Beispielen tabellen Designs.
Ja, das hat damit zu tun, dass Selfhtml HTML und CSS getrennt vermittelt.
Die zeit, wo diese Beispiele entstanden, spielt sicher auch eine Rolle.
Weiter würde ich sagen, Tabellen sind nicht so verpönt wie man glaubt. Ich denke immer nach dass Tabellen eine Möglichkeit für Formulare darstellen. Anderseits darf man sich eine Lösung mit Definitionslisten überlegen.Naja, andere packen jedes einzelne Eingabefeld und die dazugehörige Beschriftung in ein <div>. Ein Beispiel findet ihr unter: http://www.stichpunkt.de/css/formulare.html.
Das ist auch nicht besser, denn es führt zu einer Floatwüste, welche andere unangenehme Nebeneffekte haben kann.
Besonders negativ ist hier der Verzicht auf <label> Elemente.Und wiederum andere verwenden eine Liste und geben die Eingabefelder als ein Listenpunkt aus. Beispiel hierfür findet ihr im vierten blauen Feld auf folgender Seite: http://tut.php-quake.net/guestbook.html#u4.
So, ich weiss nicht ob es ein richtig oder falsch gibt (wobei mir, das Design mit Tabelle falsch vorkommt), aber was ist am sinnvollsten? Was am einfachsten? Was am besten für die Lesbarkeit (wenn man z.B. auch die Ausgabe für Blinde miteinbezieht)?
Wenn es um die Übersicht im Code geht, sind tabellen immer schwierig.
Ich würde Definitionslisten vorziehen, wobei man hier auch mit float arbeitet.Aber ich denke Formulare sind eh ein Fall, den man im Einzelfall entscheiden muss, Da sind ja noch die möglichen Gruppierungen: <fieldset> und <legend>
Vielleicht möchtest du uns mal ein konkretes Formular nach deinem Layout zeigen, worüber wir dann diskutieren können.
Ich habe jetzt mal nachgeschaut in meinen eigenen Code auf einer Seite, die ein etwas kompliziertes Formular in zwei Spalten enthält.
Die Zweispaltigkeit habe ich mit Divs und float erreicht.
Das Formular selbst hat 4 Gruppen, die ich durch fieldset/legend abgrenze.
Innerhalb dieser Gruppen habe ich <label> und ein Formularelement pro zeile getrennt durch ein schlichtes <br>Das kann also verbessert werden.
PS: einen hässlichen Umstand gibt es bezüglich der Formatierung von Formularfeldern, welche im Standards Modus nicht alle gleich breit formatiert werden, wenn man sie nicht besonders formatiert. Das bringt es mit sich, dass man Formularfelder in ein letzlich als Blockelement ausgezeichnetes Feld stellt.
Hier wäre wohl <dl> besser als <ul>mfg Beat