CSS-Formulare

[Efchen]

Hallo zusammen,

heute hab ich auch mal eine Frage.

Und zwar seht Ihr unter Test-Formular ein Formuar, das rein mit CSS designt ist (so, wie es auch bei eifnach-fuer-alle beschrieben wird, wenn da nicht ständig Wartungsarbeiten wären; kommt ohne ein einziges div aus ;-)).

Funktioniert im Firefox wunderbar. Aber zumindest im Internet Exploder 7.0.6000.16681 unter Vista scheint es Probleme mit dem float zu geben. Wie Ihr seht (sehen solltet!), werden die input-Felder alle nebeneinander angezeigt, obwohl sie eigentlich neben ihren Labels stehen sollten, weil die labels erst ein clear machen.

Ich mach Formulare eigentlich schon lange so und habe damit im IE6 nie Probleme gehabt. Gibts neue Probleme mit float im IE7 oder hab *ich* irgendwas übersehen?

Danke,
-Efchen

 

[prm]

Bitte leg jetzt nicht wieder alles auf die Goldwaage, was ich mir zusammengereimt habe. Wenn's hilft is' gut, ansonsten war's nix.
Ich konnte es allerdings nur im IE7 testen und hab' es damit hinbekommen:

form input, form textarea {
display: block;
margin-left: 14em;
border:2px solid red;
}

Erklären kann ich mir das so:

Die linken Labels sind gefloatet und entziehen sich damit dem Textfluss der übrigen Elemente.

input und textarea sind Inline-Elemente und ordnen sich deshalb nebeneinander an. Insofern war dein float: left; in diesem Bereich eigentlich ohnehin unnötig bzw. hat die Anordnung nebeneinander nochmal zementiert.

Wenn man nun das float entfernt und ein display: block zuweist, dann ordnen sich input/textarea untereinander an.
Da die Labels gefloatet sind, benötigen input/textarea noch einen Linksabstand, gemessen vom linken Fensterrand unter Berücksichtigung der label-Width und den Label-Rahmen.

Zu dieser Erkenntnis bin ich erst heute gekommen, nachdem ich gestern aufgrund eines ähnlichen Problems diese neue Anleitung geschrieben hatte: Firefox stellt Hintergrund nicht vollständig dar
Man lernt eben immer wieder dazu.

Jetzt hoffe ich, dass das auch in anderen Browsern so funktioniert.

Unabhängig davon, wäre für diese strukturierte Darstellung eine Tabelle vielleicht doch die einfachere Lösung gewesen.

 

[Efchen]

Wenn man nun das float entfernt und ein display: block zuweist, dann ordnen sich input/textarea untereinander an.

Hmmm...
Also Inline-Elemente und float...das ist klar. Soweit okay.

Aber den Rest versteh ich nicht.
1. Die labels kriegen doch ein clear. Damit muss der Textfluss eigentlich da fortsetzen, wo das Label dann hinkommt, unter dem letzten Label halt. Firefox macht es so, wie ich mir das vorstelle - deswegen kommen die inputs dann rechts neben dem dazugehörigen Label. Ignoriert der IE hier das clear? Hat er Probleme mit einem Element, das gleichzeitig clear und float bekommt?
2. Wenn ich Deinen Vorschlag anwende, funktioniert es im IE (wobei das margin nicht unbedingt nötig ist, da die inputs wie jeder Textinhalt nicht unter den Labels verschwinden).
Allerdings stimmt jetzt im Firefox gar nichts mehr! Denn dann stehen die inputs alle direkt untereinander ohne Abstand und orientieren sich mit ihrem oberen Rand nicht mehr am oberen Rand des dazugehörigen Labels!

Unabhängig davon, wäre für diese strukturierte Darstellung eine Tabelle vielleicht doch die einfachere Lösung gewesen.

Einfacher vielleicht, aber sicher nicht richtig. Hier gehts ja eindeutig um Layout.

Außerdem kann man nicht predigen, dass man Tabellen nicht zu Layoutzwecken missbraucht und dann bei der ersten Schwierigkeit wieder auf Tabellen zurückfallen :-)

Aber schonmal danke für Deine Hilfe, vielleicht fällt Dir ja noch was ein, denn im FF muss es logischerweise auch klappen.

Mich würd nur interessieren, welcher Browser hier den Fehler macht, denn einer von beiden hat einen Bug, so viel ist IMHO klar.

 

[prm]

Die labels kriegen doch ein clear. Damit muss der Textfluss eigentlich da fortsetzen, wo das Label dann hinkommt, unter dem letzten Label halt.

Das ist richtig. Das clear dient allerdings nur dazu, dass sich die labels untereinander anordnen. Du könntest ebensogut das float weglassen, dann brauchst du auch kein clear.

Im Firefox werde ich mir das über's Wochenende mal ansehen, falls ich dazu komme.

Zitat:
Unabhängig davon, wäre für diese strukturierte Darstellung eine Tabelle vielleicht doch die einfachere Lösung gewesen.
Einfacher vielleicht, aber sicher nicht richtig. Hier gehts ja eindeutig um Layout.

Das sehe ich in diesem Fall anders, aber darüber werde ich mit dir nun keine neue Diskussion anfangen.

vielleicht fällt Dir ja noch was ein

Habe da noch einen ganz anderen Ansatz, ebenfalls nur im IE 7 getestet. Ist allerdings eine Individuallösung, die von der jeweiligen Höhe der labels abhängt.
Wenn du dich auf eine generelle Einheit (entweder Pixel oder em) verständigen könntest, kann man das ziemlich exakt positionieren.

 form label {
border:2px solid gray;
width:10em;
display: block;
    }
form input, form textarea {
display: block;
margin-left: 13em;
position: relative; top: -2.8em;
border:2px solid red;
    }

 

[Efchen]

Das ist richtig. Das clear dient allerdings nur dazu, dass sich die labels untereinander anordnen. Du könntest ebensogut das float weglassen, dann brauchst du auch kein clear.

Naja, eigentlich wird doch mit clear der normale Textfluss wieder hergestellt, und zwar unter dem längsten gefloateten Element. Oder verstehe ich clear seit Jahren falsch?


Anstelle des Tabellenlayouts kann man einfach ein <br /> hinter die <input> setzen, und das clear weglassen, so hab ichs bisher immer gemacht und so funktioniert es in allen Browsern, aber streng genommen ist <br /> auch ein Layout-Tag und IMHO müsste das mit dem clear ja eigentlich funktionieren.

 

[neuroleptika]

Hmmm...
....
1. Die labels kriegen doch ein clear. Damit muss der Textfluss eigentlich da fortsetzen, wo das Label dann hinkommt, unter dem letzten Label halt. Firefox macht es so, wie ich mir das vorstelle - deswegen kommen die inputs dann rechts neben dem dazugehörigen Label. Ignoriert der IE hier das clear? Hat er Probleme mit einem Element, das gleichzeitig clear und float bekommt?
....

Soweit ich weiß ist deine Vermutung richtig:

    form label {
    [COLOR=DarkRed]clear:left;[/COLOR]
    float:left;
        border:2px solid gray;
    width:10em;
    }

Float und clear in einem Element versteht der IE<8 nicht.
Wenn du <label> und <input> bzw. <textarea> in einem Element umschließt
braucht der IE überhaupt kein clear. Die Internetexplorer clearen automatisch wenn das umschließende Element eine Höhe / bzw. Mindesthöhe hat:

/*IE5-6:*/
 * html form span {
display: block;
height: 1%;
    }
/*iE7:*/
 * +html form span {
display: block;
min-height: 1%;
    }

  <form action="#" id="Neu">
    <fieldset>
      <legend>Neuer Termin</legend>
<span>
<label for="termin">Termin<sup>*</sup></label>
      <input id="termin" name="termin" type="text" size="10" maxlength="10"
             value="" />

      <input id="zeit" name="zeit" type="text" size="5" maxlength="5"
             value="" />
</span>
<span>
      <label for="kunde">Kunde<sup>*</sup></label>
      <input id="kunde" name="kunde" type="text"
             value="" />
</span>
<span>
      <label for="ansprech">Ansprechpartner</label>
      <input id="ansprech" name="ansprech" type="text"
             value="" />
</span>
<span>
      <label for="telefon">Telefon</label>
      <input id="telefon" name="telefon" type="text"
             value="" />
</span>
<span>
      <label for="grund">Grund des Besuchs</label>
      <textarea name="grund" cols="15" rows="5" id="grund"></textarea>
</span>
      <input type="submit" value="Eintragen!" />
    </fieldset>
  </form>

Ich verwende in ähnlichen Formularen gerne <p> anstelle <span> oder <div>.
Viele nehmen auch <li>.
Kann man sehen wie man will. Ich finde <p> nicht verkehrt.

 

[prm]

Vielleicht noch etwas einfacher:

form span {clear: left;}

  <h1>Neuen Termin eintragen</h1>
  <form id="Neu">
    <fieldset>
      <legend>Neuer Termin</legend>
      <label for="termin">Termin<sup>*</sup></label>
      <input id="termin" name="termin" type="text" size="10" maxlength="10"
             value="" />
      <input id="zeit" name="zeit" type="text" size="5" maxlength="5"
             value="" />
<!--
      <label for="terminBIS" class="bis">bis (Datum)</label>
      <input id="terminBIS" name="terminBIS" type="text" size="10"
             maxlength="10" value="" />
-->
<span></span>
      <label for="kunde">Kunde<sup>*</sup></label>
      <input id="kunde" name="kunde" type="text"
             value="" />
<span></span>
      <label for="ansprech">Ansprechpartner</label>
      <input id="ansprech" name="ansprech" type="text"
             value="" />
<span></span>
      <label for="telefon">Telefon</label>
      <input id="telefon" name="telefon" type="text"
             value="" />
<span></span>
      <label for="grund">Grund des Besuchs</label>
      <textarea id="grund" name="grund"></textarea>
<span></span>
      <input type="submit" value="Eintragen!" />
    </fieldset>
  </form>

<div style="float: left; color: red;">alakflöaksdals äa</div>
<span></span>

Damit hat Efchen jetzt drei praktikable Lösungen (mit Tabelle wären es sogar vier) und muss jetzt lediglich noch entscheiden, ob irgendwo noch ein unzulässiger Layout-Tag im HTML-Code enthalten ist. Ich frag mich nur, was dann passieren sollte. Dann darf das Formular wohl nicht veröffentlicht werden - selbst wenn's sauber und valide dargestellt wird. :mrgreen:

Edit:
Da sehe ich noch folgendes vom Validator:

Zeile Spalte: 3

38 Fehler: Im Element 'form' ist das Attribut `action` vorgeschrieben, welches aber fehlt.
Fehlerstelle:
<form id="Neu">

Zeile Spalte: 7
65 Fehler: Im Element 'textarea' ist das Attribut `rows` vorgeschrieben, welches aber fehlt.
Fehlerstelle:

<textarea id="grund" name="grund"></textarea>

Und mein span-Tag hat keinen Inhalt, aber das bemängelt derVali nicht. Oh je oh je....

 

[Efchen]

Soweit ich weiß ist deine Vermutung richtig.
Float und clear in einem Element versteht der IE<8 nicht.

Aha! Und ich habe schon an mir gezweifelt! Danke.

Wenn du <label> und <input> bzw. <textarea> in einem Element umschließt
braucht der IE überhaupt kein clear. Ich verwende in ähnlichen Formularen gerne <p> anstelle <span> oder <div>. Viele nehmen auch <li>.
Kann man sehen wie man will.

Kann man sehen wie man will - ich habe bisher immer ein <br /> hinters <input> gesetzt. Auch das funktioniert dann.
Deine persönliche Meinung im Sinne von HTML: Besser von einem Element umschließen oder ein <br />?

Danke Dir!

Ich frag mich nur, was dann passieren sollte. Dann darf das Formular wohl nicht veröffentlicht werden - selbst wenn's sauber und valide dargestellt wird. :mrgreen:

Vorweg - ich sehe den Smiley, ja. :-)
Das ist wohl eine Sache der persönlichen Einstellung. In mancher Hinsicht bin ich Perfektionist. Wenn, dann richtig. Soweit eben möglich. Interessant wäre halt, was Clients, die den HTML-Code analysieren, daraus machen. Dabei denke ich primär an Google oder Screenreader.

Da sehe ich noch folgendes vom Validator:

Ja, der Code ist aus einer anderen Seite herauskopiert und so zurechtgestuzt, dass Euch keine sensiblen Daten in Eure Äuglein springen :-)

Also nochmal danke an alle.

Schönes Wochenende,
-Efchen

 

[neuroleptika]

...
Deine persönliche Meinung im Sinne von HTML: Besser von einem Element umschließen oder ein <br />?
..

Ich umschließe lieber weil ich dann mehr Selektoren zur Gestaltung habe.
<span> würde ich allerdings nicht nehmen. Ohne css würden alle Formularelemente nebeneinander dargestellt werden.
Also entweder mit Blockelement umschließen oder mit <br /> umbrechen.

Ein leeres <span> oder <div> finde ich auch auch nicht verkehrt. Aber auch da würde ich lieber <div> nehmen.

Screenreader ordnen Inputfelder in jedem Element dem richtigen <label> zu (hoffe ich).
Um Suchmaschinen würde ich mir bei Formularelementen keine Gedanken machen.
Was sollen sie schon wichtiges finden? Mit Begriffen wie Kontakt, Telefon und Kunde kann man bei Google nicht punkten.

 

[Efchen]

Ein leeres <span> oder <div> finde ich auch auch nicht verkehrt. Aber auch da würde ich lieber <div> nehmen.

Ja, ich glaube ich würde es in Zukunft wohl eher mit dem umschließenden <div> machen, auch wenn ich einige Mitleser schon kichern höre bei dem Gedanken an div-Suppe ;-) (was hier natürlich keine div-Suppe ist)

Screenreader ordnen Inputfelder in jedem Element dem richtigen <label> zu (hoffe ich).

Davon gehe ich aus, nachdem auf einfach-fuer-alle (die haben endlich ihre Wartungsarbeiten beendet ;-)) das so angepriesen wird als besonders barrierefrei. Voraussetzung ist natürlich das Attribut "for".

Danke auch Dir für Deine Meinung

und allen ein schönes Wochenende!
-Efchen

 

[prm]

Ja, ich glaube ich würde es in Zukunft wohl eher mit dem umschließenden <div> machen, auch wenn ich einige Mitleser schon kichern höre bei dem Gedanken an div-Suppe

Kichern? Ich musste grad mal eben ganz herzlich und laut lachen! ;Jump;Jump;Jump
Aber Lachen soll ja gesund sein!

In diesem Sinne:
Ebenfalls ein schönes Wochenende!

 

[Efchen]

Naja, aber es ist immerhin ein Gruppieren von mehreren Elementen zwecks gemeinsamer Formatierung! :-D