Text und Input-felder ausrichten

[TZP]

Moinz.
Ich hab folgendes Szenario:

Name: |Eingabefeld|
Vorname: |Eingabefeld|
Adresse: |Eingabefeld|
Telefon: |Eingabefeld|

Links ist normaler Text, rechts normale Input type´s. Die Begrenzung für alles hat eine maximale Breite von 300px. Das Problem: Es soll kein Table verwendet werden. Welche Möglichkeiten, dies zu realisieren, habe ich, wenn ich keine Table verwenden darf? Vielleicht hat jemand n guten Link/Rat für mich.

-bedank-
TZP

 

[sysop]

css

den text z.b. zwischen <span class"blabla">dein text</span> und dann per css anpassen.
auch inputs (textfelder) lassen sich mit css ausrichten und farblich gestalten.

 

[Efchen]

Na klar, hier:
Reine Formsache - Barrierefreie Formulare mit HTML, CSS & JavaScript : Einfach für Alle

Es handelt sich ja auch nicht um tabellarische Daten, eine Tabelle wäre hier also tatsächlich falsch.

 

[Sansire]

Statt das grosse tamtaram durchzulesen hier ein Beispiel:

So sieht zb. eine "Reihe" deines Formulars im Code aus

<label for="name" class="kontaktform_abstand">Name:</label>
    <input type="text" name="Name" id="name" />

Das war jetzt Zum beispiel sowas hier: Name: |Textfeld|

Das label-Element selbst hat keine sichtbare Wirkung am Bildschirm, es dient lediglich dem Zweck, den logischen Bezug zum Formularelement herzustellen

Die Klasse 'kontaktform_abstand' formatierst du dann so

 float:left;
 width:130px;

Das heisst dass der label Tag mit der Ausgabe 'Name:' links zugewiesen ist und das nächste element erst ab 130px nach rechts auftaucht.

Dann gehts weiter mit

<label for="adresse" class="kontaktform_abstand">Adresse:</label>
    <input type="text" name="Adresse" id="adresse" />

etc

sieht dann so aus DJ Sansire - official website - Kontaktformular

 

[Efchen]

Das label-Element selbst hat keine sichtbare Wirkung am Bildschirm, es dient lediglich dem Zweck, den logischen Bezug zum Formularelement herzustellen

Sagt wer?
Vielleicht hättest Du Dir das "große tamtaram" doch mal durchlesen sollen.
Das <label> hat eine ganz wichtige, sichtbare Wirkung, die die Nutzbarkeit deutlich erhöht!

Die Klasse 'kontaktform_abstand' formatierst du dann so

Aber nicht mit der Einheit "px", dann platzt das doch bei Schriftvergrößerung wieder auseinander. Im "großen tamtaram" wird darauf auch eingegangen.

sieht dann so aus

Eben :-)
Aber Textabsätze sind das nicht (die Kombination aus label und input), sondern eine Gruppe, und die zeichnet man mit <div> aus :-)

(Jetzt werd ich gleich geschlagen! :-))

 

[Sansire]

Sagt wer?
Vielleicht hättest Du Dir das "große tamtaram" doch mal durchlesen sollen.
Das <label> hat eine ganz wichtige, sichtbare Wirkung, die die Nutzbarkeit deutlich erhöht!

Ich muss gestehen, die Erklärung zu label habe ich von SELFHTML: Navigationshilfen / Suche Rausgelesen.

 

[Efchen]

Nicht umsonst wird SelfHTML heute nicht mehr empfohlen.

Und, hast Du inzwischen rausgefunden, was <label> in bezug auf Usability macht und warum das ausgerechnet von einfach-fuer-alle empfohlen wird?

 

[TZP]

Das mit dem Label war/ist Gold wert. Passt perfekt und sieht nice aus. Allerdings darauf ne Folgefrage: Die Breite des Eingabefelds kann ich mit Size variieren lassen...so weit, so gut. Gutgläubig wie ich bin, dachte ich auch dass jeder Browser da gleich zieht aber Annahme ist die Mutter des Irrtums.

Warum macht jeder Browser aus dem Size ne eigene Kiste und wie kann ich die Eingabefelder alle wirklich gleich groß machen und an den rechten Rand packen?

Ich hab mir gedacht: Mach ich doch die Width beim Label größer, um die Eingabefelder rechts an den Rand zu kriegen...war ja klar, dass das nur im FF gut aussieht. ^^

Nachtrag:
So, scheint doch zu klappen. Ich hab einfach ne CLASS für die Inputfelder geschrieben. Float:right, width angepasst und margin/padding auf 0, weil es sonst unnötige Abstände in manchen Browsern ergeben hat. Soweit, so gut. :)

Meinen Dank an euch!

 

[TZP]

Oh..wo ich das gerade von Efchen lese...ist Label dann doch falsch?

 

[Sansire]

Freut mich dass es geklappt hat!

Oh..wo ich das gerade von Efchen lese...ist Label dann doch falsch?

Nein es ist nicht falsch, lass die drinn.:-o

 

[TZP]

Ich hab noch ne Frage aus Neugierde: Warum ist SelfHTML keine gute Quelle mehr? Gibt es da was besseres oder hab ich was verpasst? Ich finde die Seite eigentlich gar nich so schlecht. :)

 

[Efchen]

Warum macht jeder Browser aus dem Size ne eigene Kiste und wie kann ich die Eingabefelder alle wirklich gleich groß machen und an den rechten Rand packen?

Das wird vermutlich an der verwendeten Schrift liegen. Manche Browser nehmen per Default einen monospace-Font für Eingabefelder, andere einen proportionalen.

Ich hab mir gedacht: Mach ich doch die Width beim Label größer, um die Eingabefelder rechts an den Rand zu kriegen...war ja klar, dass das nur im FF gut aussieht.

Du formatierst das Label, um einen Effekt beim Input zu erzeugen? Das macht ja auch keinen Sinn! Wenn Du das Eingabefeld nach rechts haben willst, dann nimmst Du float:right. width beim label nimmst Du, wenn Du das Label größer haben willst.

Nachtrag:
So, scheint doch zu klappen.

Eben :-)

Oh..wo ich das gerade von Efchen lese...ist Label dann doch falsch?

Nein, wie kommst Du darauf? Ich hab doch deutlich darauf hingewiesen, dass <label> enorm wichtig ist und in dem Artikel von einfach-fuer-alle steht das auch drin.

Ich habe nur darauf hingewiesen, dass SelfHTML eine in bezug auf Usability sehr wichtige Bedeutung unterschlagen hat.

 

[TZP]

Ah, gutgut...dann revidiere ich meine Frage. :)

 

[Efchen]

Ich hab noch ne Frage aus Neugierde: Warum ist SelfHTML keine gute Quelle mehr? Gibt es da was besseres oder hab ich was verpasst? Ich finde die Seite eigentlich gar nich so schlecht. :)

Weil SelfHTML Arbeitsweisen erklärt, die aus den 1990er Jahren stammt. SehfHTML geht nicht genug auf Trennung von Inhalt und Layout ein, SelfHTML geht nicht genug auf Semantik ein. SelfHTML ist für Anfänger nur schwer verständlich, bzw. verführt sie dazu, sich falsche Arbeitsweisen anzugewöhnen, aufgrund derer die armen Kerle dann später zerrissen werden :-)

Und, kann mir jetzt jemand sagen, was das Tag <label> in bezug auf Usability so besonders macht?

 

[TZP]

IchIchIch! -schnips schnips-

Meiner Meinung nach würde sich ein Label ganz gut machen, wenn ein Mausereignis stattfinden soll...Checkboxen wäre ein Beispiel.

 

[Efchen]

*grins*

Der Zusammenhang mit der Maus ist schon richtig. Aber es passt zu jedem Formularelement.

Klickt doch mal spaßeshalber auf ein als <label> ausgezeichnetes Label! Dann seht Ihr, was es macht! Und dann stellt Ihr Euch mikroskopisch kleine Check-/Radiobuttons oder auch Eingabefelder vor und das vielleicht noch, wenn Eure Maus-Hand zittert...Ihr werdet begeistert sein! :-)