Browsed by
Schlagwort: tutorial

PHP Regular Expression Schnipsel

PHP Regular Expression Schnipsel

Some people, when confronted with a problem, think „I know, I’ll use regular expressions.“ Now they have two problems., sagt man. Frank Bueltge hat trotzdem ein paar gute PHP-Beispiele zusammengestellt. 😉

Text Rotation with CSS

Text Rotation with CSS

[M]any of the popular browsers of today support the ability to rotate HTML elements. Even better? We can make it work in Internet Explorer (back to version 5.5 even).

Feine Formulare II: Button

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]

Feine Formulare

Feine Formulare

Man hat schon viel versucht, aber im Grunde sehen Formulare immer gleich aus, nĂ€mlich wie der Meldebogen beim Einwohnermeldeamt. Gewiß, das hat etwas gutes, denn duch die KonformitĂ€t entsteht eine ZugĂ€nglichkeit auf Basis der Gewohnheit.

Trotzdem gibt es Gelegenheiten, da könnte ein Formular mal ein wenig anders gestalt sein, als Label – Umbruch – Formularfeld. Vielleicht mit einem Icon fĂŒr das Wort Name und einem fĂŒr das Wort Email? Bei Formularen, die wir tĂ€glich hundertfach ausfĂŒllen, bspw. ein Login o.Ă€. kann man das mal ausprobieren. Und vielleicht gewint man sogar etwas dazu, bspw. eine deutlichere Zuordung zwischen Label und Formularfeld. So soll es am Ende aussehen.

Beginnen wir mit einem einfachen Formular, das ohne CSS und vor allem ohne Javascript direkt funktioniert:

[syntax,formular1_1.html.txt,html]

Das ist gewollt unspektakulĂ€r. Dies ist im Grunde das codemĂ€ĂŸige Basislayout, das ich fĂŒr alle meine Formulare verwende. Das ganze validiert natĂŒrlich, hier als XHTML.

Vielleicht fĂ€llt noch die Positionierung des <label>-Tags auf, nĂ€mlich umschließend um den Label-Text (“Name” bspw.) und dem <input>-Feld. Das ist ein praktische Angelegenheit, die auch nicht jeder kennt: so erspart man sich zum einen, das <label> mit dem Attribut for ausstatten zu mĂŒssen und passend dazu braucht das <input> auch keine ID. Das praktische am <label>, neben der semantischen Zuordnung und der ZugĂ€nglichkeit, ist vor allem im User-Interface, dass der Benutzer auf das Label klicken kann und dann der Focus auf das zugehörige Formularfeld gesetzt wird.

Auch nicht ganz unwichtig und dem Starter vielleicht noch nicht bekannt: das Attribute tabindex gibt die Reihenfolge an, mit der der Benutzer mit der Tastatur durch das Formular tabben kann. Das ist hier zwar noch ziemlich klar, wird aber, auch um Wechselwirkungen mit anderen Formularen auszuschliessen ausdrĂŒcklich angegeben.

Zum spĂ€teren stylen allerdings benötige ich ein paar Hilfselemente. ZunĂ€chst mal mĂŒssen wir die Label-Texte zum spĂ€teren stylen mit <span>s ausstatten und außerdem brauchen wir Klassennamen auf die wir mit CSS zugreifen können.

[syntax,formular1_2.html.txt,html]

Es ist gute Sitte und natĂŒrlich eine Frage der ZugĂ€nglichkeit, das <label> mit einem paasenden title-Attribut auszustatten. Dies wird beim ĂŒberfahren mit der Maus angezeigt. SpĂ€ter kann man das vielleicht noch per Javascript fĂŒr einige Spielereien nutzen. Muss man aber nicht.

Das Styling geht dann wieder relativ unspektakulĂ€r ĂŒber die BĂŒhne. In diesem Fall gehe ich davon aus, das wir Breiten und Höhen der Formularfelder kennen, und außerdem gebe ich es hier in Pixel an. em-Fetichisten (nicht bös gemeint) mögen sich das entsprechend umformen, ich hab das aufgegeben. Sollte aber möglich sein.

Der Absatz fungiert als Container, in dem das Label und das Input platziert werden (absolut positioniert). Das Label seinerseits wird ersetzt durch das eigene Hintergrundbild.

[syntax,formular1.css.txt,html]

Zwei Anmerkungen noch: mit input:focus wird die Focusmarkierung entfernt, die Safari seinen Usern aufdrÀngt, stattdessen wird mit einem leichten Grau das fokussierte Element markiert (auch in FF etc.). Das ist Geschmackssache, der Purist mag es weglassen. Zweite Anmerkung, die

Auf dieser Basis lĂ€sst sich natĂŒrlich nich mehr machen, bspw. Erweiterungen per Javascript. Ich markiere beim Fokussieren eines Formfeldes gerne den Inhalt, vor allem, wenn ich Werte vorgebe, wie hier. Sinnvollerweise macht man das mit einem externen Javascript, hier – nur zu Demonstrationszwecken – steht es am Element. Und hier die komplette Demo als Code.

[syntax,formular1.html.txt,html]

Hier ist der zweite Teil: Button.