Valides Formular ohne Tabellen-Layout

[Michi]

Einen schönen guten Tag! =)

Ich hatte vor kurzem mit einem Freund eine Diskussion darüber, daß man ohne einer Tabelle im Hintergrund kein ordentliches Layout für ein Formular erstellen kann.

Da ich ihm vom Gegenteil überzeugen wollte, habe ich mich gestern hingesetzt und ein Formular nur mit Hilfe von CSS formatiert. Besonders Wert gelegt habe ich dabei auf:

* Valides xhtml 1.0
* Kein Mißbrauch von html-Tags
* _Völlig frei_ skalierbare Seite
* Farbverändenderung der Inputfelder während der Eingebe ( nicht im IE )
* Verwendung der Tabulator-Index-Möglichkeit

Hier ist das dabei herausgekommene Ergebnis :

http://enf.pyrokar.lima-city.de/formular.html

Meine 4 Fragen an Euch :

1. Mir ist bei genauerem Hinsehen aufgefallen, daß bei der Ausgabe im IE Input- und Label-Felder nicht völlig auf gleicher Linie liegen. Woran könnte das liegen? Kann man auch den IE dazu bringen, beide Bereiche auf gleicher Höhe darzustellen?

2. Was ich _überhaupt nicht_ verstehe ist, wieso der Cursor, wenn man mittels Tabulator oder Mausklick in den Textarea-Bereich kommt, nicht an erster Stelle der Area, sondern in der ersten Zeile ca. im Bereich des 4. oder 5. Buchstabens steht. Das ist lästig. Ich möchte, daß der Cursor wirklich ganz oben ganz links blinkt. Wie bewerkstellige ich das?

3. Wie gefällt Euch denn das Layout? Ich habe es so gemacht, daß es im FIREFOX genau so aussieht, wie ich es wollte. Die Ausgabe im IE ist so naja, aber auch noch passabel. Habe leider keine Möglichkeit, auszutesten, wie die Seite mit OPERA aussieht.

4. Findet Ihr, daß es mir gelungen ist, ein gutes Beispiel zu geben, wie man mit wirklich sehr kurzem Quelltext und ohne Mißbrauch von html-Tags sowie ohne Verwendung einer Tabelle ein schönes Formular erstellen kann?

Falls mir wer die eine oder andere Frage beantwortet, möchte ich mich jetzt schon dafür bedanken! Liebe Grüße und schönen Mittwoch noch....

MICHI =)

[wahsaga]

hi,

2. Was ich _überhaupt nicht_ verstehe ist, wieso der Cursor, wenn man mittels Tabulator oder Mausklick in den Textarea-Bereich kommt, nicht an erster Stelle der Area, sondern in der ersten Zeile ca. im Bereich des 4. oder 5. Buchstabens steht. Das ist lästig. Ich möchte, daß der Cursor wirklich ganz oben ganz links blinkt. Wie bewerkstellige ich das?

Der Cursor wird hinter den aktuellen Inhalt der Textarea gesetzt.

Diesen hast du selber vorgegeben:

<textarea name="nachricht" id="nachricht" cols="50" rows="10">
     </textarea>

gruß,
wahsaga

[Marco Erb]

Wahnsinn. Ich sollte mich näher an diese Materie hineinwagen, wenn man echt mit so wenig Quelltext so ein Formuar hinbekommt.

Zu deinem 2.) Problem. Alles, was zwischen <textarea> und </textarea> steht, steht hinterher im Textfeld drin. Also solltest du aus

<textarea name="nachricht" id="nachricht" cols="50" rows="10">
      </textarea>

ein

<textarea name="nachricht" id="nachricht" cols="50" rows="10"></textarea>
machen

zu 4.) Ja

Gruß

[Jonny 5]

1. Mir ist bei genauerem Hinsehen aufgefallen, daß bei der Ausgabe im IE Input- und Label-Felder nicht völlig auf gleicher Linie liegen. Woran könnte das liegen? Kann man auch den IE dazu bringen, beide Bereiche auf gleicher Höhe darzustellen?

Tabellen verwenden :P

[Mel]

Hi,

es ist imho nicht so sehr schwer schöne Formular via css und mit dem Verzicht auf (Design)Tabellen zu gestalten. Im Netz findet dazu inwzischen auch schon einige gelungene Beispiele.

die Problematik bei komlexen Formularfeldern sehe ich zB. in foldendem Szenario:

Ort/Plz:      -----------------  ------
Strasse/Nr.   -------------------  ----

Eine bündige und damit auch pixelgenaue Ausrichtung ist meiner Meinung nach mit einer Tabelle recht schnell zu erreichen- ohne wohl auch, aber nicht ohne mühseliges Gefriemel.

vg Melanie

[Ashura]

Hallo Mel.

Eine bündige und damit auch pixelgenaue Ausrichtung […]

Diese Schlussfolgerung verstehe ich nicht. Nur weil die Ausrichtung von Label und Formularelement bündig ist, muss dies doch noch lange nicht pixelgenau geschehen.

Einen schönen Mittwoch noch.

Gruß, Ashura

[Mel]

Hi Ashura ;)

also ich sollte halt mal genauso ein Formular umsetzen welches die Anordnung so hatte wie ich oben gepostet habe.

das habe ich ohne Tabelle gemacht und das wiederum hat mich fast zur Verzweiflung gebracht ;)

Wie würdest Du das denn lösen.
Du hast die Bezeichnung und daneben 1 inputfeld -- ok das ist einfach.
darunter hast Du du 2 Bezeichnungen und daneben 2 inputfelder, eines ist mittellang das andere kurz. beide sollen aber mit dem oberen langen am rechten und linken Rand bündig abschliessen, ohne pixel-Abweichung.

Ob das im Sinne von Barrierefreiheit wünschenswert ist- das ist eine andere Frage.

vg Mel

[Ashura]

Hallo Mel.

also ich sollte halt mal genauso ein Formular umsetzen welches die Anordnung so hatte wie ich oben gepostet habe.

Du? Ich dachte, Michi?

Wie würdest Du das denn lösen.

So zum Bleistift.

(Im IE síeht es natürlich nicht so aus, wie in Browsern.)

Einen schönen Mittwoch noch.

Gruß, Ashura

[Mel]

Hi Ashura ;)

Du? Ich dachte, Michi?

Such Dir eine(n) aus ;)

Wie würdest Du das denn lösen.

So zum Bleistift.

Neenee Du. Nachsitzen. Ich sprach von 2 Formularfeldern nebeneinander. Sooo wie Du es gemacht hast könnte ich das auch ohne Probleme..

(Im IE síeht es natürlich nicht so aus, wie in Browsern.)

Haha. Mach es Dir mal nicht zu einfach ;)

vg mel

[Ashura]

Hallo Mel.

So zum Bleistift.

Neenee Du. Nachsitzen. Ich sprach von 2 Formularfeldern nebeneinander. Sooo wie Du es gemacht hast könnte ich das auch ohne Probleme..

Ich habe nun ein Formularfeld für die Hausnummer hinzugefügt.
Und bevor du meckerst: dafür, dass Firefox Dimensionen anders berechnet als Opera und Konqueror, kann ich nichts.

Einen schönen Mittwoch noch.

Gruß, Ashura

[Mel]

Hi Ashura,

Ich habe nun ein Formularfeld für die Hausnummer hinzugefügt.
Und bevor du meckerst: dafür, dass Firefox Dimensionen anders berechnet als Opera und Konqueror, kann ich nichts.

Ich weiss. Und ich denke nun dass man das mit einer designtabelle recht unkompliziert lösen könnte...für alle Browser. Das wollte ich damit auch nur sagne...wenn man eine gewisse Darstellung in Formularen erreichen will ist eien Tabelle manchmal womöglich die bessere Alternative.
Ich persönlich aber löse es auch anders und gestalte Formulare deshalb so schlicht und eifnach wie möglich.

schönen Abend Dir,
Mel

[Der Martin]

Hallo Ashura,

Eine bündige und damit auch pixelgenaue Ausrichtung […]
Diese Schlussfolgerung verstehe ich nicht. Nur weil die Ausrichtung von Label und Formularelement bündig ist, muss dies doch noch lange nicht pixelgenau geschehen.

doch, in gewissem Sinn schon: Wenn zwei Elemente bündig miteinander abschließen sollen, müssen sie an derselben Pixelposition anfangen oder aufhören. Das heißt natürlich nicht, dass man die Position auch in px definieren muss, aber "pixelgenaue", d.h. aufs Pixel übereinstimmende Maße sollten am Ende doch herauskommen. :-)

So long,
 Martin

[Ashura]

Hallo Martin.

Nur weil die Ausrichtung von Label und Formularelement bündig ist, muss dies doch noch lange nicht pixelgenau geschehen.

doch, in gewissem Sinn schon: Wenn zwei Elemente bündig miteinander abschließen sollen, müssen sie an derselben Pixelposition anfangen oder aufhören.

Hehe, die Pixelschubser freuen sich.

Einen schönen Mittwoch noch.

Gruß, Ashura

[at]

Hallo.

Wenn zwei Elemente bündig miteinander abschließen sollen, müssen sie an derselben Pixelposition anfangen oder aufhören. Das heißt natürlich nicht, dass man die Position auch in px definieren muss, aber "pixelgenaue", d.h. aufs Pixel übereinstimmende Maße sollten am Ende doch herauskommen. :-)

Ja, "sollten". Das scheitert aber häufig an den unterschiedlichen Verfahren, mittels derer die Browser etwa "em" in Pixel umsetzen.
MfG, at

[Ashura]

Hallo Michi.

3. Wie gefällt Euch denn das Layout? Ich habe es so gemacht, daß es im FIREFOX genau so aussieht, wie ich es wollte.

Du liebst Pastellfarben, oder? Ich zumindest finde den Kontrast viel zu niedrig und die so genannte „Hervorhebung“ des aktuellen Formularelementes ist auch nur ein Farbwechsel um eine mikroskopische Nuance.
Also: mehr Kontrast und ein größeres Farbschema.

Die Ausgabe im IE ist so naja, aber auch noch passabel.

Öhm? Von den dreien, Firefox, IE und Opera ist dein Formular einzig und allein im IE optisch brauchbar. Auch im Konqueror sieht es übrigens nicht besser aus.

Habe leider keine Möglichkeit, auszutesten, wie die Seite mit OPERA aussieht.

Keine Möglichkeit, ihn einfach herunterzuladen und zu installieren?

4. Findet Ihr, daß es mir gelungen ist, ein gutes Beispiel zu geben, wie man mit wirklich sehr kurzem Quelltext und ohne Mißbrauch von html-Tags sowie ohne Verwendung einer Tabelle ein schönes Formular erstellen kann?

In Bezug aufs HTML, ja, aber die wackelige Ausrichtung macht alles zunichte.
Du solltest float, margin-left und clear in geeignetem Maße einsetzen.

Einen schönen Mittwoch noch.

Gruß, Ashura

[at]

Hallo.

Findet Ihr, daß es mir gelungen ist, ein gutes Beispiel zu geben, wie man mit wirklich sehr kurzem Quelltext und ohne Mißbrauch von html-Tags sowie ohne Verwendung einer Tabelle ein schönes Formular erstellen kann?

Mir ist der Quelltext bereits zu kurz. Während ich eine Tabelle hier ebenfalls nicht verwenden wollte, halte ich eine Definitionsliste für angebracht. -- Mit anderen Formaularfeldern würde ich allerdings eine Tabelle bevorzugen.
MfG, at