Linksammlung: Formulare durchgestalten

tempa wrote this 10:58:

Häufig behandle ich Formulare Stiefmütterlich und belasse diese in welchem Design auch immer der Browser die verschiedenen Elemente darstellt. Entsprechend schwach ausgeprägt ist mein Wissen über die Möglichkeiten. Ich gehe in Bezug auf die stiefmütterlich behandelten Formularen mit einem großen Prozentsatz meiner Kunden konform. Hier und da aber gönne ich mir auch in Bezug auf Formulare die Extrameile.

Es wurde Zeit mich einmal wieder zu informieren, was in Bezug auf Formulare im Netz schon vorhanden ist:

  1. Roger Johansson hat in seinem Blog 456 BereaSt im Beitrag Styling form controls with CSS, revisited das für mich umfassenste und aufschlußreichste beigetragen, um eigenständig sich an die Gestaltung des Formulars zu machen. Auch was die verschiedenen Optionen anbelangt, arbeitet man an Templates und nicht an einem konkreten Projekt, bei dem zunächst nur ausgearbeitet werden muss, was in den Projekt genutzt wird.
  2. Stu Nichols hat in seinem CSS-Playground einen Mini-Formular-Zengarden eingerichtet: A form with style
  3. Cameron Adams zeigt mit seinem Blue Man was Formulare können, wenn man Sie nicht in ein Tabellen-Korsett zwingt: Form layout templates
  4. Einen mehr als Berechtigten Rant bezüglich der Art und Weise wie Formulare in Browser integriert wurden, wie unflexible und inkongruent diese sich in den verschiedenen Browsern geben, schrieb Erich Meyer in einem lesenswerten Beitrag: Formal Weirdness.
  5. Und damit folgt Lucian Slatineanu vom badboy mit seinem Beitrag Nice Forms, da er mit seinem Javaskript die festen Browservorgaben umschifft, die die Gestaltung von Formularen so frustrierend macht.
  6. Um sich Arbeit zu sparen kann man entweder Stu Nichols Vorlage verwenden oder aber dieses Form-Template um anschließend seine eigenen CSS-Eigenschaften zur Gestaltung des Formulares zu vergeben. Prabhath Sirisena auf Nidahas zu Formularen liefert an folgender Stelle das Form Template. Es lebe die Bequemlichkeit.

Es gibt noch viel weitere Beiträge, die man als Anregung für die eigene Gestaltung heranziehen kann: ALA: Prettier Accessible Forms, Veerle: Styling forms in CSS, Picment: Fun with forms — customized input elements, Mezzoblu zu Labeling Formfield, Chris Ramakers, skyrocket concepts: semantisch korrekte horizontale Formulare step 1 – 2 – 3, Malarkey: optionale Formularbereiche ausblenden, Brand spanking New: AutoSuggest: An AJAX auto-complete text field, Live-validation und das Formular spricht mit dem User. Urputzig!, Nicholas Rougeux, C82, Scrollende Checklisten als alternative zu Selectfeldern, Formassembly mit einer ganzen Sammlung von gestylten Formular-Templates (Unter der Haube im Formgarden sieht’s trübe aus. Die Lektion zum Thema „Inline- und Blockelemente“ wurde noch nicht durchgenommen.), …

Datenblatt-Formular das aussieht wie ein Datenblatt für Webapplikationen, in denen zum Beispiel ein Tutor, Sachverstädniger oder Vorgsetzter seine Bewertungen zur Übergabe an die Datenbank einträgt.

… es gibt sicherlich noch mehr und wer eine Adresse kennt, die hier unbedingt noch fehlt, die Kommentare sind offen. 🙂

2 Responses to “Linksammlung: Formulare durchgestalten”

  1. creisi Says:

    Ein paar super Links, dankeschön 🙂 Da will ich hier auch noch 2 Links durchgeben. Naja, ob die unbedingt noch fehlen… Aber auf jeden Fall hast Du sie noch nicht aufgeführt. Unter die Haube habe ich allerdings nicht geschaut.

    Einmal bei Free CSS Templates den Contact Form Showcase: http://www.free-css-templates.com/webdesign/contact-forms-showcase/

    Und dann hat Dr. Web auch noch so einiges zum Gestalten von Formularen:
    http://www.drweb.de/formulare/index.shtml

  2. Silke Schümann Says:

    Danke für den Tipp. Da waren jetzt sogar zwei drei Ideen dabei, die zu meinem aktuellen Projekt passen. Ich war gerade auf Uni-form, der auch noch nicht in der Liste enthalten ist.

Leave a Reply