Ein schickes Webformular

Um mich vom PHP coden etwas zu entspannen habe ich mir spontan ein modernes Webformular gebaut.

Ich hasse es eigentlich Webformulare in HTML zu bauen .. positionieren macht keinen Spass, dann immer nach dem Schema INPUT > LABEL oder doch umgekehrt. Durch unterschiedliche Textlängen und Feldgrößen sehen die meisten Webformulare immer irgendwie wie ein Unfall aus (im schlimmsten Fall) oder halbfertig (in den meisten Fällen) .. da sich dann irgendwann doch Texte reinmogeln mit denen vorher kein Entwickler gerechnet hat brechen manche Formulare auch noch an den unmöglichsten stellen um.

Soweit zur Vorgeschichte .. ich hab nun also versucht was schöneres / funktionaleres / ansprechenderes zu bauen und dabei hab ich mich erst mal auf INPUT und TEXTAREAs beschränkt.

Der Benutzer soll es einfach haben, Informationen die nicht mehr gebraucht werden fliegen raus, das aktuelle Feld (das im Fokus steht) wird herausgehoben .. die Labels schreib ich direkt in die INPUT und TEXTAREAs rein ..

Rausgekommen ist (IMHO) ein recht schickes Formular. Getestet habe ich das bisher allerdings nur in aktuellen Chrome und Firefox Versionen .. allerdings ist es grundsätzlich so gebaut das es auch im IE4 funktionieren sollte .. dann natürlich ohne Schick und Pomp.

Hier ist das Formular.

Features:

  • CSS3 Transitions
  • selten benutzte CSS Selektoren
  • jede Menge Pseudo Klassen
  • und ein bisschen jQuery

CSS und JS findet ihr direkt in Files .. habs glaub ich recht übersichtlich hinbekommen.