Gestaltung eines Formulars

[Georg K.]

Hallo Leute!

Wollte mal nachfragen wie Ihr so eure Formulare gestaltet.
Habs mal mit fieldset probiert...sieht aber im IE anders aus als im FF, mit Hilfe von ein paar tricks (CSS reset, workaround, etc.) kann man das angleichen. Aber um ehrlich zu sein nervt es mich und macht meinen Code unnötig länger.
Jetzt denke ich darüber nach alles mit einer Tabelle zu machen.
Ist nicht grad sehr innovativ, hat aber den Vorteil dass es überall gleich aussieht.

Was gibt es sonst noch für Möglichkeiten? Wie macht Ihr es so?

Gruß
Georg

[Tom]

Hello,

Was gibt es sonst noch für Möglichkeiten? Wie macht Ihr es so?

Ja, das leidige Pixel- oder Punktgenagelte :-)

Da klappt dann mur leider nichts mehr mit Liquid Design, oder wie das auch immer genannt wird.
Also alle Elemente in der Größe festlegen, eine ID geben und dann per Position:absolute auf dem Screen annageln. Das sieht inzwischen fast überall gleich aus, wis auf die leidigen Unterschiede bei den Borders eben (Boxmodel).

Liebe Grüße aus dem Cyberspace

Tom vom Berg

[hotti]

hi,

Was gibt es sonst noch für Möglichkeiten? Wie macht Ihr es so?

Früher: Tabelle
Heute: Fieldset und CSS

Hotte

[Beat]

Hallo Leute!

Wollte mal nachfragen wie Ihr so eure Formulare gestaltet.

Ist das eine HTML- oder eine CSS-Frage
Benutzbar, valide, übersichtlich, sparsam

Habs mal mit fieldset probiert...sieht aber im IE anders aus als im FF, mit Hilfe von ein paar tricks (CSS reset, workaround, etc.) kann man das angleichen. Aber um ehrlich zu sein nervt es mich und macht meinen Code unnötig länger.

Das ist bekannt.

Jetzt denke ich darüber nach alles mit einer Tabelle zu machen.
Ist nicht grad sehr innovativ, hat aber den Vorteil dass es überall gleich aussieht.
Was gibt es sonst noch für Möglichkeiten? Wie macht Ihr es so?

Versuche es mit einer Definitionsliste.
Im CMS-Backend verwende ich es durchgängig.

Und auch ganz sparsam ist erlaubt:
<p>
<label>Ein Label <input></label><br>
...
</p>

oder damit das Label besser formatierbar ist...

<p>
<label for=f001>Ein Label</label><input id="f001"><br>
...
</p>

Das ist hinreichend Markup zur Darstellung. Das br Element dient dabei als No-CSS-Fallback.
Und es ist zur Usability alles vorhanden.
Gruppierung mit fieldset und legend ist dann eine weitere Option.

mfg Beat

[Auge]

Hallo

Wollte mal nachfragen wie Ihr so eure Formulare gestaltet.
Habs mal mit fieldset probiert...sieht aber im IE anders aus als im FF, ...

Nicht nur das, es sieht auch je nach dem beim Benutzer verwendeten Betriebssystem anders aus.

Was gibt es sonst noch für Möglichkeiten? Wie macht Ihr es so?

Ich mache mir darüber keinen Kopf und lasse das (inklusive fieldset, legend, label) so ausgeben, wie das Betriebssystem das vorsieht[1]. Das kennt der Benutzer von seinen lokalen Anwendungen und auch von den meisten Websites, da dort in den meisten Fällen auch kein Kopfstand zur Extraformatierung von Formularelementen gemacht wird.

[1] <label> wird so nur bedingt wie im Betriebssystem funktionieren, da bei den einen Betriebssystemen nur der eingeschlossene Text das Formularelement aktiviert, bei anderen Betriebssystemen der klickbare Bereich bis über das anzusprechende Formularelement reicht. Das kann man mit CSS nur entweder so *oder* so nachbauen.

Tschö, Auge

[Klawischnigg]

Hi there,

Was gibt es sonst noch für Möglichkeiten? Wie macht Ihr es so?

Hängt davon ab. Nachdem ich sehr viel Applikationen mache, die eher im Intranet und somit in einer eher kontrollierten Umgebung laufen, positioniere ich das meiste absolut.

Auf Websites schmeiss ich das Formular meist gnadenlos in eine Tabelle - ein gutes Formular ist ein strukturiertes und ausgerichtetes Formular, und genau dazu sind Tabellen da - zum Strukturieren und Ausrichten...

[suit]

und genau dazu sind Tabellen da - zum Strukturieren und Ausrichten...

Nein, Tabellen sind zum Strukturieren da - nicht zum Ausrichten. Zum Ausrichten ist CSS da.

Eine eingabemaske/Formular kann man gut und gerne als Tabelle sehen - allerdings sind imho die strukturierenden Elemente <label /> und <input /> schon mehr als genug, man muss nicht um jedes <label /> ein <th /> packen und um jedes <input /> ein <td />.

Ich bevorzuge die von Beat vorgeschlagene Variante ohne unnötigen Bloat-Code.

[Klawischnigg]

Hi there,

»» und genau dazu sind Tabellen da - zum Strukturieren und Ausrichten...

Nein, Tabellen sind zum Strukturieren da - nicht zum Ausrichten. Zum Ausrichten ist CSS da.

ok.

Ich bevorzuge die von Beat vorgeschlagene Variante ohne unnötigen Bloat-Code.

Ja, das ist in Ordnung, vor allem semantisch korrekt. Die für mich in der Beziehung relevante Frage ist aber vor allem der Zeitaufwand für die Erstellung des Formulars. In neunzig Prozent der Fälle hab' ich auf einer Webseite folgende Formularstruktur:

Label1 : Eingabefeld1
Label2 : Eingabefeld2
Label3 : Eingabefeld3
Label4 : Eingabefeld4
Label5 : Eingabefeld5

submit reset verschwind

Vielleicht ist Beat mit seiner Konstruktion ja so gelenk, daß er damit schneller ist als ich mit meiner Tabelle, ich bezweifle das, vor allem, was hätt' ich davon, er macht's mir ja nicht;) - und mir bezahlt keiner die Herumfuzzlerei.
Obige Konstruktion als Tabelle erstellt ist in kürzester Zeit realisiert absolut beschwerdefrei - sogar Screenreader können damit sehr gut umgehen (Falls Du einen solchen Einwand geplant gehabt hättest;)

Für größere Projekte oder Intranetlösungen, die praktisch nur aus Eingabemasken bestehen zieh ich andere Konstruktionen vor, aber das hab ich ja schon im vorigen Posting geschrieben...

[Beat]

Ich bevorzuge die von Beat vorgeschlagene Variante ohne unnötigen Bloat-Code.

Ja, das ist in Ordnung, vor allem semantisch korrekt. Die für mich in der Beziehung relevante Frage ist aber vor allem der Zeitaufwand für die Erstellung des Formulars. In neunzig Prozent der Fälle hab' ich auf einer Webseite folgende Formularstruktur:

Label1 : Eingabefeld1
Label2 : Eingabefeld2
Label3 : Eingabefeld3
Label4 : Eingabefeld4
Label5 : Eingabefeld5

submit reset verschwind

Das sind die Formulare, die ich hasse.
Sie brauchen dann für alles Erklärenwerte sSonderfunktionalität und Userinteraktion.

Vielleicht ist Beat mit seiner Konstruktion ja so gelenk, daß er damit schneller ist als ich mit meiner Tabelle, ich bezweifle das, vor allem, was hätt' ich davon, er macht's mir ja nicht;) - und mir bezahlt keiner die Herumfuzzlerei.

In ehome-Factory habe ich zweierlei Ansätze:

Frontend:
Jedes Formular braucht eine eigene spezifische pflege und damit auch Individuelle Überlegungen zum Code.
Dort bevorzuge ich Fieldset-Gruppierungen.
Ich will das Lael über dem Inputfeld, weil der Labeltext öfters länger ist.

Im Backend.
Ich habe eine <dl> mit Klasse, die später vom Javascript bearbeitet wird, um Abschnitte des Formulars, das meist repetitive Listen sind, abzuarbeiten.
Dort brauche ich eine grosse Homogenität, habe dann aber im <dd> Part immer noch alle Freiheiten.

Eine tabellarische Struktur kommt bei mir also schon mal sehr selten vor.

Das Gefrickel findet genau 1 mal statt. Nämlich bei der CSS-Definiton der Klassen.

mfg Beat

[Klawischnigg]

Hi there,

»» Label5 : Eingabefeld5
»»
»» submit reset verschwind

Das sind die Formulare, die ich hasse.

Was soll's - form follows function...

Sie brauchen dann für alles Erklärenwerte sSonderfunktionalität und Userinteraktion.

ich versteh' den Zusammnehang jetzt nicht. Was über die links stehende Erklärung (nenn es Caption, Label oder wie auch immer) von zB Name: und rechts davon stehendem Eingabefeld bedarf einer gesonderten Erläuterung? Wenn eine solche notwendig sein sollte, reden wir ja entweder ohnehin schon von einem anderen Formular oder ich kann sie, uU in kleinerer Schrift, unter dem Label anbringen, wenn sie nicht zu ausführlich ist.

In ehome-Factory habe ich zweierlei Ansätze:

......^^^^^^^^^^^^^ ???

Ich will das Lael über dem Inputfeld, weil der Labeltext öfters länger ist.

Das kann (sollte) man mit Tabellen allerdings wirklich nicht realisieren, weil das den von mir im Vorposting monierten Screenreader wirklich ins Schleudern bringt. Für den "Zuhörer" geht dann jeder Zusammenhang zwischen Label und Eingabefeld verloren. Inwieweit diese Reader Deine Form der Gruppierung verstehen entzieht sich meiner Kenntnis

Das Gefrickel findet genau 1 mal statt. Nämlich bei der CSS-Definiton der Klassen.

Ja, zahlt sich aus, wenn Du mehrere Formulare auf einer Site hast, das ist aber oft nicht der Fall...

[Felix Riesterer]

Lieber Georg,

für meine Formulare benutze ich semantisches XHTML und CSS. Du darfst Dir gerne Beispiele ansehen:

* Login-Formular
* Login-Formular mit Fieldset
* GB-Formular

Liebe Grüße,

Felix Riesterer.

[Klawischnigg]

Hi there,

Leicht off-Topic aber wenn ich in Deinem

* GB-Formular

etwas würde eingeben wollen, dann hab ich auf meinem 24" Monitor nach ein paar Zeilen die gleichen Schmerzen im Genick wie nach dem Besuch eines Tennismatches. Ich mein, flexibles Design ist ja gut und schön, aber ein Inputfeld, das fast 2000px breit ist???

[Felix Riesterer]

Lieber Klawischnigg,

Ich mein, flexibles Design ist ja gut und schön, aber ein Inputfeld, das fast 2000px breit ist???

hast Du denn so einen langen ... Namen, Mailadresse oder Website-URL, dass Dir das Genickschmerzen verursacht?

Liebe Grüße,

Felix Riesterer.

[Klawischnigg]

Hi there,

hast Du denn so einen langen ... Namen, Mailadresse oder Website-URL, dass Dir das Genickschmerzen verursacht?

Das sag ich nicht;) - ich meinte das textarea-Feld...

[Felix Riesterer]

Lieber Klawischnigg,

| hast Du denn so einen langen ... Namen, Mailadresse oder Website-URL, dass Dir das Genickschmerzen verursacht?

Das sag ich nicht;) - ich meinte das textarea-Feld...

was glaubst Du, wieviel manche Bots zu sagen haben... und die will ich da nicht einschränken. Ähm... ?

Liebe Grüße,

Felix Riesterer.

[Patrick Andrieu]

Hallo Felix!

Wie Klawischnigg etwas OT, aber wenn man hier:

* GB-Formular

die Sprache wechseln will, verhält sich das glaube ich nicht so, wie es soll...

Hier funzt™ es dagegen für fr, de, en ohne Probleme - tr wirft leider auch Fehlermeldungen: http://www.felix-riesterer.de/main/gaestebuch/index.html.

Seit meiner Übersetzung irgendetwas geändert? Ich meinte, unmittelbar danach war alles OK...

Viele Grüße aus Frankfurt/Main,
Patrick

[Tom]

Hello,

* GB-Formular

die Sprache wechseln will, verhält sich das glaube ich nicht so, wie es soll...

Notice: Undefined index: settings in /home2/www/b80/felix-riesterer/main/scripts/gaestebuch/gb.script.inc on line 325

Notice: Undefined index: settings in /home2/www/b80/felix-riesterer/main/scripts/gaestebuch/gb.script.inc on line 326

Notice: Undefined index: settings in /home2/www/b80/felix-riesterer/main/scripts/gaestebuch/gb.script.inc on line 329

Notice: Undefined index: l18n in /home2/www/b80/felix-riesterer/main/scripts/gaestebuch/gb.script.inc on line 358

Notice: Undefined index: l18n in /home2/www/b80/felix-riesterer/main/scripts/gaestebuch/gb.script.inc on line 371

Notice: Undefined index: l18n in /home2/www/b80/felix-riesterer/main/scripts/gaestebuch/gb.script.inc on line 388

Notice: Undefined index: l18n in /home2/www/b80/felix-riesterer/main/scripts/gaestebuch/gb.script.inc on line 387

Notice: Undefined index: messengers in /home2/www/b80/felix-riesterer/main/scripts/gaestebuch/gb.script.inc on line 406

Warning: Invalid argument supplied for foreach() in /home2/www/b80/felix-riesterer/main/scripts/gaestebuch/gb.script.inc on line 406

Notice: Undefined index: settings in /home2/www/b80/felix-riesterer/main/scripts/gaestebuch/gb.script.inc on line 428

Notice: Undefined index: l18n in /home2/www/b80/felix-riesterer/main/scripts/gaestebuch/gb.script.inc on line 436

Notice: Undefined index: l18n in /home2/www/b80/felix-riesterer/main/scripts/gaestebuch/gb.script.inc on line 458

Notice: Undefined index: l18n in /home2/www/b80/felix-riesterer/main/scripts/gaestebuch/gb.script.inc on line 461

Notice: Undefined index: settings in /home2/www/b80/felix-riesterer/main/scripts/gaestebuch/gb.script.inc on line 468

Notice: Undefined index: smilies in /home2/www/b80/felix-riesterer/main/scripts/gaestebuch/gb.script.inc on line 487

Warning: Invalid argument supplied for foreach() in /home2/www/b80/felix-riesterer/main/scripts/gaestebuch/gb.script.inc on line 487

Notice: Undefined index: l18n in /home2/www/b80/felix-riesterer/main/scripts/gaestebuch/gb.script.inc on line 494

Notice: Undefined index: settings in /home2/www/b80/felix-riesterer/main/scripts/gaestebuch/gb.script.inc on line 496

Notice: Undefined index: l18n in /home2/www/b80/felix-riesterer/main/scripts/gaestebuch/gb.script.inc on line 507

Notice: Undefined index: settings in /home2/www/b80/felix-riesterer/main/scripts/gaestebuch/gb.script.inc on line 509

Notice: Undefined index: l18n in /home2/www/b80/felix-riesterer/main/scripts/gaestebuch/gb.script.inc on line 519

Notice: Undefined index: settings in /home2/www/b80/felix-riesterer/main/scripts/gaestebuch/gb.script.inc on line 532

Notice: Undefined index: l18n in /home2/www/b80/felix-riesterer/main/scripts/gaestebuch/gb.script.inc on line 1604

Notice: Undefined index: settings in /home2/www/b80/felix-riesterer/main/scripts/gaestebuch/gb.script.inc on line 1620

und so weiter...

Liebe Grüße aus dem Cyberspace

Tom vom Berg

[Felix Riesterer]

Lieber Tom,

Notice: Undefined index: settings in /home2/www/b80/felix-riesterer/main/scripts/gaestebuch/gb.script.inc on line 325

Notice: Undefined index: settings in /home2/www/b80/felix-riesterer/main/scripts/gaestebuch/gb.script.inc on line 326

und so weiter...

da möchte ich jetzt aber energisch widersprechen! ;-)

Liebe Grüße,

Felix Riesterer.

[Tom]

Hello lieber Felix,

Notice: Undefined index: settings in /home2/www/b80/felix-riesterer/main/scripts/gaestebuch/gb.script.inc on line 325

Notice: Undefined index: settings in /home2/www/b80/felix-riesterer/main/scripts/gaestebuch/gb.script.inc on line 326

und so weiter...

da möchte ich jetzt aber energisch widersprechen! ;-)

Jau, jetzt ist es ganz kaputt :-(

Liebe Grüße aus dem Cyberspace

Tom vom Berg

[Felix Riesterer]

Lieber Tom,

| da möchte ich jetzt aber energisch widersprechen! ;-)

Jau, jetzt ist es ganz kaputt :-(

*stöhn*

Heute nachmittag habe ich frühestens Zeit dafür.

Liebe Grüße,

Felix Riesterer.

[Tom]

Hello leiber Felix,

*stöhn*

Heute nachmittag habe ich frühestens Zeit dafür.

Das wollte ich Dir schreiben, aber es funktioniert dann wohl doch noch nicht wirklich wieder.

#----------------------------------------
Hallo lieber Felix,

da scheinst Du ja den Schaden an Deinem Gästebuch schneller gerichtet zu haben, als Du selber dachtest.

Den Hinweis zum Wegklicken finde ich gut. Hast Du irgendwo diskret beschrieben, wie Du das gamacht hast?

Allerdings solltest Du auch die Forwarded-for-Adresse speichern, wenn sie geliefert wird. Sonst kannst Du wenig mit der IP und der Zeit anfangen.
Bei PHP mit

isset( $_SERVER['HTTP_X_FORWARDED_SERVER'])?$_SERVER['HTTP_X_FORWARDED_SERVER']:'';

erschlagen. Allerdings gibt es eventuell noch weitere übliche Index-Bezeichner, je nach Einrichtung der PHP-Umgebung.

Grüße, heute noch aus Syburg

Tom vom Berg
#----------------------------------------

Eintrag ist nicht möglich, es gibt keine Fehlermeldung. Der User (ich) steht im Wald :-(

Liebe Grüße aus dem Cyberspace

Tom vom Berg

[Felix Riesterer]

Lieber Tom,

ich kämpfe gerade, dass mein Script sich trotz dieser Einstellung betreiben lässt - bisher stolpere ich über so manchen Mist, den mir dieser Wahnsinn beschert.

In $GLOBALS['gb-script'] speichere ich viele Dinge. Für den Session-Mechanismus speichere ich andere Dinge in $_SESSION['gb-script']. Ohne register_globals ist das auch kein Problem. Mit register_globals auf "on" dagegen sehr. Alles, was in $GLOBALS['gb-script'] steht, erscheint automagisch ebenso in $_SESSION['gb-script'] und umgekehrt. Es wird offensichtlich der Index in beiden superglobalen Variablen "gespiegelt".

Eine letzte Option wäre ein php_flag in der .htaccess, aber bis ich zu dieser Lösung greife, probiere ich dann doch lieber, ob ich mein Script nicht dahin bekomme, ordentlich wieder mit den Session-Inhalten, die ich neben dem $GLOBALS['gb-script'] benötige, umzugehen.

UPDATE: Während des Schreibens kam mir - wie schon des öfteren - die zündende Idee. Diese Übereinstimmung im Index ('gb-script') beider Superglobalen lässt sich ja verhinden... also wird aus $_SESSION['gb-script'] jetzt $_SESSION['for-gb-script'] und schon klappt wieder alles wie am Schnürchen.

Den Hinweis zum Wegklicken finde ich gut. Hast Du irgendwo diskret beschrieben, wie Du das gamacht hast?

Mit JavaScript. Die dafür notwendigen Funktionen findest Du im HTML-Dokument der Seite selbst.

Allerdings solltest Du auch die Forwarded-for-Adresse speichern, wenn sie geliefert wird. Sonst kannst Du wenig mit der IP und der Zeit anfangen.

? Mir hatte ein Polizist an unserer Schule (vor fünf Jahren) geraten, Zeitpunkt und IP-Adresse zu speichern. Von Forwarded-fo-Adresse hatte der nichts gesagt. Was hat es damit für eine Bewandtnis, dass ich diese Adresse auch noch speichern sollte? Und wieso ist ohne diese Information eine gespeicherte IP wertlos?

Eintrag ist nicht möglich, es gibt keine Fehlermeldung. Der User (ich) steht im Wald :-(

Jetzt kann ich wieder selbstherrlich widersprechen. 8-D

Liebe Grüße,

Felix Riesterer.

[Tom]

Hello,

Allerdings solltest Du auch die Forwarded-for-Adresse speichern, wenn sie geliefert wird. Sonst kannst Du wenig mit der IP und der Zeit anfangen.

? Mir hatte ein Polizist an unserer Schule (vor fünf Jahren) geraten, Zeitpunkt und IP-Adresse zu speichern. Von Forwarded-fo-Adresse hatte der nichts gesagt. Was hat es damit für eine Bewandtnis, dass ich diese Adresse auch noch speichern sollte? Und wieso ist ohne diese Information eine gespeicherte IP wertlos?

Wenn die Verbindung über einen Proxy aufgenommen wird, kann dieser (und die öffentlichen tun dies auch) die IP-Adresse des ihn requestenden Nutzers als "forwarded" weitergeben. Eine Recherche wird dadurch später oft vereinfacht, wenn man auch diese speichert.

Liebe Grüße aus dem Cyberspace

Tom vom Berg

[Felix Riesterer]

Lieber Patrick,

verhält sich das glaube ich nicht so, wie es soll...

Seit meiner Übersetzung irgendetwas geändert? Ich meinte, unmittelbar danach war alles OK...

Serverumzug... und nun sind register_globals auf "on"... und das überschreibt mir jedesmal meine in $GLOBALS abgespeicherten Daten. Habe das nun aber Dank Deines Hinweises repariert.

Liebe Grüße,

Felix Riesterer.