Formular gestaltung : label neben input

[staccato]

Hab noch ein anderes Problem...

Sitze grad an einem Formular und möchte gern links das label und rechts davon den input haben.

Mein Problem ist, dass ich mehrere Zeilen haben und die label-Texte natürlich unterschiedlich lang sind. Ich hätte es jetzt gerne so, dass die input´s im Prinzip rechtsbündig sind und jenachdem wie lang das Label ist ihre Länge auch anpassen - sodass z.b. immer 20px Abstand zwischen label und input sind.

Geht das irgendwie?

Hab mal ein Bild angehängt, dass die Situation verdeutlicht.

[sonar]

Inputs und Labels sind ja standardmäßig inline-Elemente und ordnen sich nebeneinander an.
Für nen Umbruch zwischen den Zeilen kannst entweder ein <br /> angeben oder zu packst die Zeilen in fieldsets.
Nur das mit der "automatischen Rechtsbündigkeit" der Inputs wird nix werden, da müsstest jedem Feld ne eigene width zuweisen und das irgendwie hinbasteln…

[staccato]

Danke für deine Antwort!

Das is ja ärgerlich - das heißt ja man die Inputbreite immer anpassen muss wenn man den labeltext verändert...

Naja wenns nich anders geht.

Viele Grüße

[Ahrsib]

Sieht doch gut aus, bis auf die Reihenfolge „Name”, „Vorname”,
die gehören getauscht, denn der Vorname steht vor dem Nachnamen!

Diese Gleichschieberei macht es unleserlicher
und erscheint auch nicht sinnvoll,
da man ja nichts zusammenrechnen muss!

Ahrsib
... Formularkönig.

[sonar]

In Sachen Usablity hat es sich eh als das beste erwiesen, Labels über die Formularfelder zu schreiben und dafür den Zeilenabstand zu erhöhen…

Wenn ich mir das genauer ansehe, was du da vorhast, ist das eh ziemlicher Käse, z.B. die Email-Felder unterschiedlich breit. Also man kann auch "optisch tot-optimieren".
Probier's doch mal aus, die Labels - vielleicht etwas kleiner - über die Felder zu setzen und weise letzteren ne fixe Breite zu. Dann hast auch dein Block-artiges Erscheinungsbild.

Hej Ahrsib

[staccato]

Das Bild ist bis dato ja nur eine Grafik und noch kein Code...

Ich bin "leider" nur für die Umsetzung zuständig ;-)

VG

[CaselPasel]

Hey,
das mit rechtsbündig kann man am einfachsten mit JavaScript machen.
Die OffsetWidth vom Element ermitteln und dann eben eine css Width den jeweiligen Element geben.

Mit freundlichen Grüßen

Cas

[Nicmare]

du könntest es faken.
mit so einer struktur:
<label></label>
<div><input/></div>
das input machst du zB ohne rahmen und mit weißem hintergrund und breite lässte unverändert. den div gestaltest du nun wie du möchtest. bspw mit border und was weiß nicht noch. sodass am ende keiner was merkt außer wenn er in den quelltext guckt. die sache fliegt natürlich auf wenn man besonders lange values eingibt.
aber du könntest probieren die divs mit overflow:hidden zu versehen und den input eine sehr weite breite zu geben sodass sie im prinzip hinausragen!
grüße

[Ahrsib]

Zitat von Nicmare

du könntest es faken.
mit so einer struktur:
<label></label>
<div><input/></div>
das input machst du zB ohne rahmen und mit weißem hintergrund und breite lässte unverändert. den div gestaltest du nun wie du möchtest. bspw mit border und was weiß nicht noch. sodass am ende keiner was merkt außer wenn er in den quelltext guckt. die sache fliegt natürlich auf wenn man besonders lange values eingibt.
aber du könntest probieren die divs mit overflow:hidden zu versehen und den input eine sehr weite breite zu geben sodass sie im prinzip hinausragen!
grüße

Dass das schön dargestellt, müsste ich sehen, um es zu glauben!
Sonars Ansatz ist viel einfacher.

Ahrsib
... greetz Sonar!-)

[Nicmare]

hab des mal probiert und ich würde sagen es funktioniert sehr gut (im FF) ;-)
formular

[sonar]

Naja OK, aber es ist halt dermaßen unschön anzusehen und zu bedienen…

[Nicmare]

erstmal schon. da hast du recht. ist auch nicht so mein ding! aber mit nem richtigen styling kann das durchaus was hermachen. eher was für designfreaks. nix für "casualuser" ;-). außerdemist ist es sehr flexibel. die breite passt sich automatisch an. wird in dem fall nur vom form element gesteuert.