Codecandies

Das Weblog von Nico Brünjes.

Feine Formulare II: Button

In Feine Formulare I hatte ich meine Methode von <input />s vorgestellt, damit aus einem Formular aber ein feines Formular wird, brauchen wir noch mind. ein weiteres Element: den (Absende-)Button. Darum kümmern wir uns also heute.

Vorne weg: am Anfang sollte die Frage stehen, ob man überhaupt einen gestylten Button braucht. Das Problem ist so alt wie Adam und Eva und an diesem Thema werden wohl immer Designer und Entwickler aneinander geraten. Fakt ist: verschiedene Browser unter verschiedenen Betriebssystemen stellen (Submit-)Buttons unterschiedlich dar. Allerdings: sie tun dies jeweils konsistent. Nimmt man also an den Buttons kein wie auch imme geartetes Styling vor, sehen die Buttons in einem Browser immer gleich aus. Nur eben halt nicht über mehrere Browser. Und bevorzugt der Entwickler das, was der Browser anbietet, will der Designer meist den immer gleichen Button auf der gesamten Site.

Was nun more usable ist, will ich gar nicht diskutieren. Man muss sich halt für eine Sache entscheiden. Sicherlich kann man Buttons gestalten und doch »Don’t make me think« im Hinterkopf behalten. Von Verunstaltungen ist allerdings abzuraten.

Blick zurück im Zorn

Bisher gab es namentlich zwei Methoden, gestylte Buttons zu realisieren. Der Button wird als type=image gleich als Bild genutzt, oder man verzichtet auf den Button und nimmt stattdessen einen zum Knopf umgestylten Link. Beide Methoden haben dramatische Nachteile: bei der ersten gibt es ohne Javascript keinen hover– und active-state, bei der zweiten Methode lassen sich Formulare gar nur noch mit Javascript versenden, Grundvorraussetzung sollte jedoch sein, dass Formulare immer auch ohne Javascript funktionieren müssen.

Zweikomponentenkleberbutton

Der erste Schritt zum gut aussehenden Crossbrowser-Button ist der Austausch von <input type="submit" value="Absenden" /> durch das Element <button />

[syntax,formular2_1.html,html]

So könnte das zunächst mal aussehen. Über die Nützlichkeit des <button />-Elements ist hier einiges zu finden, um es kurz zu machen: will man einen Submitbutton o.ä. gestalten, ist <button /> erste Wahl. Einzig alte Safari-Versionen konnten damit nichts anfangen, und der Internet Explorer 6 hat einen Bug beim Übertragen des value, d.h. programmiertechnisch muss ggf. darauf Rücksicht genommen werden: IE 6 sendet nicht den Inhalt des Attrribut „value“, sondern den Inhalt zwischen <button> und </button>.

Um den Button nun gestalten zu können, brauchen wir einige Hilfsmittel. Zum einen müssen wir den Code noch ein wenig erweitern. Auch dazu gibt es einige sehr ergiebige Quellen im Netz, z.B. Styling the button element with sliding doors und Creating and Styling Resizable Buttons. Ich hab mal versucht beide Techniken zu kombinieren. Der Button benötigt dazu folgenden Code:

[syntax,formular2_2.html,html]

Ein wenig Background

Was wir noch brauchen, sind Hintergrundbilder, die als Sprites ausgeführt sind, d.h. die verschiedenen Buttonzustände sind in einem Bild vereinigt. Kennt man ja aus A List Apart—das ist wirklich eine meiner Lieblingstechniken. Man kann das mit einem Bild hinbekommen, das doppelt übereinandergelegt wird, will man allerdings mit transparenten Hintergrundgrafiken arbeiten, funktioniert das nicht, dann braucht man zwei Bilder:

Ein schmales für den Rand und ein breites für den Rest:

  

Und dann brauchen wir ein wenig CSS um das Ganze zum Laufen zu kriegen. Zunächst kümmern wir uns mal um den Button selbst:

[syntax,formular2_1.css,css]

Interessant: der overflow– und der width-Wert sind mal wieder für unseren Freund, den Internet-Explorer um das Breitenproblem von IE-Buttons zu lösen. Da es die anderen Browser nicht stört nehm‘ ich das gleich immer mit dazu. Das <span> und das <em>-Element bekommen nun ihre Styles.

[syntax,formular2_2.css,css]

Die beiden bekommen jeweils ein Hintergrundbild, auf Nullhöhe. Und jetzt werden noch das Hovern und Klicken hinzugefügt. Das jeweilige Hintergrundbild wird dazu einfach verschoben.

[syntax,formular2_3.css,css]

Und da geht der Ärger los: im IE6 wird so ohne weiteres :hover nicht unterstützt. Mist, das kann man jetzt eigentlich wieder nur per Javascript lösen, bspw. mit jQuery. Hier im Blog macht das allerdings Dean Edwards‘ IE7-Script. Wer aufgepasst hat wird jetzt sagen: ha! doch Javascript! Ja, aber:… funktionieren tuts auch ohne Javascript. 🙂

Ich hab mal eine mögliche jQuery-Lösung mit in den Code gepackt. Würde ich aber selbst eher in einer externen Datei ablegen.

Ich bin jetzt ein wenig aus der Puste, deswegen hier wieder das komplette Formular-Beispiel.

[syntax,formular2.html.txt,css]

0 Kommentare zu “Feine Formulare II: Button”

    1. Der allseits verhasste Browser aus Redmond hat nicht nur das von Dir geschilderte Problem mit dem button-Tag: Wenn in einem Formular mehrere Buttons sind, werden beim Absenden ALLE Button-Werte abgeschickt – und das Skript, das die Eingabe auswerten soll und schaut, welcher Button nun gedrückt wurde, ist verwirrt. In diesem Fall: Finger weg vom Button-Tag.

    2. Yep, dies wird hinter dem etwas versteckten Link zum IE-Bug auch festgestellt.

      Dafür gibt’s natürlich wieder fixes. Gnnpf. Dean Edwards IE7-Script hat das bspw. eingebaut.

      Tatsächlich würde ich allerdings auch eher vorziehen, bei mehreren Buttons auf das button-Tag zu verzichten, draussen bei der großen Site jedenfalls.

    3. Folgendes funktioniert auch mit dem Submitbutton:

      1. css-klasse definieren: .meineklasse und Hintergrundbild anlegen
      2. hover-status definieren: .meineklass:hover und anderes hintergrundbild anlegen. Eleganter ist allerdings, das hintergrundbild so zu gestalten, dass beide stati im bild drin sind. der hover-status wird verdeckt und in meineklasse:hover werden dann die passenden koordinaten für den 2. teil des bildes angeben.
      3. damit das ganze auch im elenden ie funktioniert bedarf es noch der csshover.htc von Peter Nederlof
      (http://www.xs4all.nl/~peterned/).
      diese muss dann in der css in die bodydeklaration geschrieben werden: body { behavior: url(_scripts/csshover.htc); }
      4. ausprobieren

    4. habe vollgendes porblem:
      beim button click wird der css befehl
      button:active
      nicht ausgeführt (IE8) gibt es dafür eine lösung oder kann man das nur mit javascript lösen