Buttons als Auswahl

[Thomas]

Hi,
ich hab mal eine Frage. Wie bekommt man es hin, dass man Buttons als Auswahl hat?
Ich will mehrere Buttons nebeneinander mit unterschiedlichem Inhalt haben. Wenn man auf eine klickt, sieht das dann so aus als sei der ausgewählt und wenn das Formular dann übergeben wir wird der Inhalt von dem Button auch übergeben. Ich hab das schon mal auf Seiten gesehen, finde aber keine Infos dazu im Internet.
Kann man dass irgendwie programmieren?

Schönen Sonntag noch Thomas

[Gunnar Bittersmann]

@@Thomas

Ich will mehrere Buttons nebeneinander mit unterschiedlichem Inhalt haben. Wenn man auf eine klickt, sieht das dann so aus als sei der ausgewählt und wenn das Formular dann übergeben wir wird der Inhalt von dem Button auch übergeben. Ich hab das schon mal auf Seiten gesehen, finde aber keine Infos dazu im Internet.
Kann man dass irgendwie programmieren?

Können mehrere „Buttons“ gleichzeitig gedrückt sein? Dann Checkboxen.

Kann nur einer gedrückt sein? (Wird ein anderer gedrückt, springt der vorher gedrückte raus – wie bei einem alten Radio?) Dann Radio-Buttons.

Die zugehörigen Label kann man mit so stylen, dass sie wie Buttons aussehen und sogar die Checkboxen bzw. Radio-Buttons visuell verstecken. Allerdings wäre das eher unsinnig, dem Nutzer die Information wegzunehmen, was das denn für Bedienelemente sind.

LLAP 🖖

[Thomas]

Erstmal danke für die Antwort.
Also es soll nur einer gedrückt werden. Dann soll ich da Radiobuttons einfügen und das Label dazu so stylen das es aussieht wie ein Button und den Radio-Button ggf. verstecken?
Nur mir dem <input type="button"> ist das was ich haben will also nicht möglich?

Schönen Sonntag
Thomas

[beatovich]

hallo

Nur mir dem <input type="button"> ist das was ich haben will also nicht möglich?

Es ist nicht empfehlenswert, weil ein Button eine unmittelbare Aktion suggeriert.

[Thomas]

Hi,
ok. Ich hab meine Code jetzt auf Radio-Buttons umgeschrieben und die Label dazu gestylt. Wie bekomme ich das jetzt hin, das die Label eine dunklere Hintergrundfarbe bekommen wenn der "Button" ausgewählt ist? Mit active, hover, visited, und focus funktioniert das nicht…

Gruß
Thomas

[beatovich]

hallo

Hi,
ok. Ich hab meine Code jetzt auf Radio-Buttons umgeschrieben und die Label dazu gestylt. Wie bekomme ich das jetzt hin, das die Label eine dunklere Hintergrundfarbe bekommen wenn der "Button" ausgewählt ist? Mit active, hover, visited, und focus funktioniert das nicht…

<input type="radio" id="r1">
<label for="r1">Label-Text</label>
~~~

~~~~css
[type="radio"]:checked + label { /* dein style */ }
~~~

[Gunnar Bittersmann]

@@Thomas

Dann soll ich da Radiobuttons einfügen und das Label dazu so stylen das es aussieht wie ein Button und den Radio-Button ggf. verstecken?

Ich sage nicht, dass du das sollst. Möglich wär’s aber. Siehe Beispiel.

Zur Erklärung:

• Eine Gruppe von Radiobuttons gehört in ein fieldset (mit einer Beschriftung legend).
• Mit :checked + label kann man das Label des gedrückten Radiobuttons anders stylen (wenn im DOM das label-Element dem input-Element folgt).
• Nicht vergessen, für die Tastaturbedienung einen Stil für :focus + label zu setzen!
• Damit sich die Stile nicht überall auswirken, sind sie nur für das Formular #band gültig.

Du erkennt das Problem? Wie beatovich eben schon sagte, suggerieren die als Buttons gestylten Labels keine Auswahl, sondern eine Aktion (was Buttons ja üblicherweise auslösen). Die Nutzer kommen womöglich gar nicht auf die Idee, dass sie noch den Submit-Button „switch“ drücken müssen.

Nur mir dem <input type="button"> ist das was ich haben will also nicht möglich?

Nein.

Was willst du eigentlich haben? Am Ende gar mehrere Submit-Buttons?

LLAP 🖖

[Thomas]

Hi,
Jetzt funktioniert es.

Was willst du eigentlich haben? Am Ende gar mehrere Submit-Buttons?

Ne. Mehrere Submit-Buttons weiß ich wie ich das machen müsst. Was ich haben will sind die "Buttons" als Auswahl. Ich finde immer nur Radio-Buttons oder Checkboxen in so Formularen sieht blöd aus, deswegen wollte ich das mit den Buttons machen. Im Prinzip sind das ja jetzt auch Radio-Buttons bloß das man die nicht sieht...

Danke nochmal für eure Hilfe!!
Thomas

[marctrix]

Hej Thomas,

Jetzt funktioniert es.

Wirklich? Sicher? „Es funktioniert“ gilt immer aus Nutzersicht!

Was willst du eigentlich haben? Am Ende gar mehrere Submit-Buttons?
Ne. Mehrere Submit-Buttons weiß ich wie ich das machen müsst. Was ich haben will sind die "Buttons" als Auswahl. Ich finde immer nur Radio-Buttons oder Checkboxen in so Formularen sieht blöd aus,

Blöd ganz sicher nicht. Blöd ist, wenn man ein Bedienelement sieht und nicht weiß, wofür das gut ist. Sonst ist es vielleicht „nicht schön“. Wobei das Geschmackssache ist…

deswegen wollte ich das mit den Buttons machen. Im Prinzip sind das ja jetzt auch Radio-Buttons bloß das man die nicht sieht...

Dann solltest du dafür sorgen, dass man es sieht - muss ja nicht die Standarddarstellung sein. Es gibt ja viele Möglichkeiten, die so zu gestalte, dass das Verhalten der „Buttons“ vorhersehbar und verständlich ist.

Marc

[Camping_RIDER]

Aloha ;)

Ich sage nicht, dass du das sollst. Möglich wär’s aber. Siehe Beispiel.

Zur Erklärung:

• Eine Gruppe von Radiobuttons gehört in ein fieldset (mit einer Beschriftung legend).
• Mit :checked + label kann man das Label des gedrückten Radiobuttons anders stylen (wenn im DOM das label-Element dem input-Element folgt).
• Nicht vergessen, für die Tastaturbedienung einen Stil für :focus + label zu setzen!
• Damit sich die Stile nicht überall auswirken, sind sie nur für das Formular #band gültig.

Humm-Homm. Du hast Recht, was den Stil für :focus angeht - der sollte gesetzt werden.

Allerdings meiner Meinung nach auf keinen Fall so, wie du das im Beispiel gemacht hast! Du setzt die :focus-Markierung hier so ein wie bei richtigen Buttons und erzeugst damit beim Benutzer die Erwartung, er könne jetzt mit Tab durch die Buttons gehen und mit Enter einen „auswählen“. Versuch das mal - es wird nicht funktionieren. Und zwar, weil es ja eigentlich Radiobuttons sind und Radiobuttons werden (zumindest in meinem Chrome) anders mit der Tastatur bedient: mit den Pfeiltasten, und Tab nur um den aktuell angewählten Radiobutton von außen anzuspringen. Es ist also eine andere Form der :focus-Markierung angebracht, die den User darauf stößt, Pfeiltasten zu verwenden. Zum Beispiel durch Pfeile via :focus:checked + label::after und :focus:checked + label::before. So wird dem Nutzer eher klar, welche Form von Tastatureingabe hier von ihm erwartet wird. Wobei das :checked hier streng genommen überflüssig ist, weil ein Radio-Button mit :focus immer gleichzeitig :checked ist!

Außerdem sollte nicht nur :focus, sondern auch :hover mit einem Hervorhebungsstil versehen werden, um beim darüberfahren mit einer Maus die Interaktivität hervorzuheben. Aus demselben Grund sollte auch cursor:pointer eingesetzt werden.

Du erkennt das Problem? Wie beatovich eben schon sagte, suggerieren die als Buttons gestylten Labels keine Auswahl, sondern eine Aktion (was Buttons ja üblicherweise auslösen). Die Nutzer kommen womöglich gar nicht auf die Idee, dass sie noch den Submit-Button „switch“ drücken müssen.

Was willst du eigentlich haben? Am Ende gar mehrere Submit-Buttons?

Ich glaube der TO sucht eigentlich was anderes als er denkt. Ich glaube er sucht ein Auswahl-Instrument, das funktioniert wie Radio-Buttons, aber einen peppigeren/interaktiveren Stil hat. Meine Glaskugel denkt, dass es beim Wunsch nach „Buttons“ nicht wirklich um Buttons ging, sondern mehr um sowas wie „Schalter“.

Ich hab mir mal den Spaß erlaubt, dein Pen zu forken und was zu basteln, was eher dem entspricht, wovon ich glaube, dass der TO es sucht. Wenn man sich mehrere davon in einem Formular vorstellt wird es auch sehr plausibel, nach dem eigentlichen Submit-Button als „speichern“ zu suchen. Insbesondere besteht keine Verwechslungsgefahr mit richtigen Buttons, der Auswahl-Charakter tritt in den Vordergrund.

Man beachte dabei die Art, in der ich :focus markiere - die Pfeile sind genau dann sichtbar, wenn die Elemente mit Pfeiltasten bedienbar sind (sie beziehen sich dann auch deutlich sichtbar auf das gesamte intraktive Element, so dass beim User keine Versuchung aufkommt, mit der Tabtaste durchschalten zu wollen), und insbesondere sind die Hervorhebungen für :focus und :hover deutlich voneinander verschieden.

Grüße,

RIDER