thomas1234: Formular Design - wer hat eine Idee?

Hallo Zusammen,

ich habe ein kleines Protal erstellt. Benutzer können sich dort anmelden und ua auch ihr Profil bearbeiten.

Im Profil kann man mehrere Styles auswahlen. Je nach Style wird ein anderes CSS verwendet. Eine Combobox mit dem Style find ich zu langweilig. Ich will den Benutzer mit Hilfe von Screenshots (Thumbnails) ein Style auswählen lassen.
Dabei will ich auf JavaScript, Popups verzichten. Dennoch soll das Ganze am Ende was "hermachen".

Hat jemand ne gute Idee, ein Schönes Beispiel wie man soetwas umsetzen kann? Ein Link zu einer schönen Möglichkeit würde mir schon sehr weiterhelfen.

  1. hi,

    Im Profil kann man mehrere Styles auswahlen. Je nach Style wird ein anderes CSS verwendet. Eine Combobox mit dem Style find ich zu langweilig. Ich will den Benutzer mit Hilfe von Screenshots (Thumbnails) ein Style auswählen lassen.

    Da (vermutlich) immer nur genau ein Style ausgewählt sein kann, empfehlen sich hier natürlich eindeutig Radio Buttons für die Auswahl.

    Diesen verpasst du jeweils ein Label, in dem sich das Bild befindet - dann kann man auf das Bild klicken, und der zugehörige Radio Button wird ausgewählt.

    Dabei will ich auf JavaScript, Popups verzichten. Dennoch soll das Ganze am Ende was "hermachen".

    Ich würde Javascript optional nutzen.
    Ohne Javascript sieht der Nutzer an Hand des angekreutzten Radio Buttons, welchen Style er ausgewählt hat.

    Ist jedoch Javascript aktiv, dann werden die Radio Buttons dynamisch ausgeblendet (wohlgemerkt nur ausgeblendet, nicht aus dem Formular entfernt - denn zur Übertagung der Auswahl brauchen wir sie ja noch), und per onClick wird dem jeweils gewählten Bild dann z.b. ein farbiger Rahmen oder eine ähnliche auffällige Formatierung verpasst, so dass man es als das ausgewählte erkennen kann (erfordert natürlich bei Änderung der Auswahl das Entfernen dieser Formatierung vom vorher ausgewählten Bild).

    Macht das optisch genug her?

    gruß,
    wahsaga

    --
    /voodoo.css:
    #GeorgeWBush { position:absolute; bottom:-6ft; }