@@Tim > mit bottons Du willst uns ein O für ein U vormachen? *Button*{:@en}, wie *butt*{:@en}. > In dem botton steht dann der entsprechende text. beim klick des bottons verändert sich der text In dem Zusammenhang ist der Artikel [Toggle Buttons](https://inclusive-components.design/toggle-button/){:@en} auf *Inclusive Components*{:@en} unbedingt lesenswert. Diese Anwendung ist nicht nur für dich, sondern soll von mehreren Personen genutzt werden, nehme ich an? Dann ist es wohl am einfachsten, alle Statūs zentral zu verwalten. (Ginge sicher auch dezentral, aber lassen wir das mal.) Statusänderungen sollten also zum Server geschickt werden. Dafür musst du den `type` deiner Buttons (die bei dir `input`-Elemente sind; kann man machen, muss man aber nicht – es gibt den Elementtypen `button`) auf `submit` ändern und ihm einen `name`n geben: ~~~HTML <form> <p><label>Andreas <input type="submit" name="Andreas" value="Nicht da"></p> <p><label>Birgit <input type="submit" name="Birgit" value="Nicht da"></p> </form> ~~~ Clickst du bei Birgit auf „Nicht da“, wird `Birgit=Nicht+da` per GET zum Server geschickt. Da sollte nun ein Script (PHP o.a.) hinterstecken, das die Eingabe entgegennimmt, den Status abspeichert (Datenbank) und die Seite mit dem geänderten Wert „Bin da“ erneut rausschickt. Wenn dieselbe Seite erneut aufgerufen wird, lässt du das `action`-Attribut beim `form`-Element einfach weg; `action=""`{:.bad} ist falsch. Ich hab auch gleich mal den Eingabeelementen eine (für alle Nutzer zugängliche!) Beschriftung `label` verpasst. Ein Dilemma ist hier deutlich zu sehen: Die Buttonbeschriftung zeigt den geggenwärtigen Status an. Das ist das Entgegengesetze von den, was der Button bewirkt – man muss auf „Nicht da“ clicken, um sich ***an***zumelden und auf „Bin da“ um sich ***ab***zumelden‽ Darüber solltest du dir nochmal Gedanken machen. Der eingangs verlinkte Artikel erwähnt ja bspw. auch Schiebeschalter als Eingabeelemente. Als *progressive enhancement*{:@en} könnte man hier mit JavaScript noch ein *optimistisches UI* bauen und die Statusänderung sofort sichtbar machen, während die Übertragung zum Server noch im Hintergrund läuft. (Wenn da was schieflaufen sollte, muss man das natürlich dann dem Nutzer melden.) LLAP 🖖 -- “When UX doesn’t consider *all* users, shouldn’t it be known as ‘*Some* User Experience’ or... SUX? #a11y” —[Billy Gregory](https://twitter.com/thebillygregory/status/552466012713783297)

@@Tim > mit bottons Du willst uns ein O für ein U vormachen? *Button*{:@en}, wie *butt*{:@en}. > In dem botton steht dann der entsprechende text. beim klick des bottons verändert sich der text In dem Zusammenhang ist der Artikel [Toggle Buttons](https://inclusive-components.design/toggle-button/){:@en} auf *Inclusive Components*{:@en} unbedingt lesenswert. Diese Anwendung ist nicht nur für dich, sondern soll von mehreren Personen genutzt werden, nehme ich an? Dann ist es wohl am einfachsten, alle Statūs zentral zu verwalten. (Ginge sicher auch dezentral, aber lassen wir das mal.) Statusänderungen sollten also zum Server geschickt werden. Dafür musst du den `type` deiner Buttons (die bei dir `input`-Elemente sind; kann ma machen, muss man aber nicht – es gibt den Elementtypen `button`) auf `submit` ändern und ihm einen `name`n geben: ~~~HTML <form> <p><label>Andreas <input type="submit" name="Andreas" value="Nicht da"></p> <p><label>Birgit <input type="submit" name="Birgit" value="Nicht da"></p> </form> ~~~ Clickst du bei Birgit auf „Nicht da“, wird `Birgit=Nicht+da` per GET zum Server geschickt. Da sollte nun ein Script (PHP o.a.) hinterstecken, das die Eingabe entgegennimmt, den Status abspeichert (Datenbank) und die Seite mit dem geänderten Wert „Bin da“ erneut rausschickt. Wenn dieselbe Seite erneut aufgerufen wird, lässt du das `action`-Attribut beim `form`-Element einfach weg; `action=""`{:.bad} ist falsch. Ich hab auch gleich mal den Eingabeelementen eine (für alle Nutzer zugängliche!) Beschriftung `label` verpasst. Ein Dilemma ist hier deutlich zu sehen: Die Buttonbeschriftung zeigt den geggenwärtigen Status an. Das ist das Entgegengesetze von den, was der Button bewirkt – man muss auf „Nicht da“ clicken, um sich ***an***zumelden und auf „Bin da“ um sich ***ab***zumelden‽ Darüber solltest du dir nochmal Gedanken machen. Der eingangs verlinkte Artikel erwähnt ja bspw. auch Schiebeschalter als Eingabeelemente. Als *progressive enhancement*{:@en} könnte man hier mit JavaScript noch ein *optimistisches UI* bauen und die Statusänderung sofort sichtbar machen, während die Übertragung zum Server noch im Hintergrund läuft. (Wenn da was schieflaufen sollte, muss man das natürlich dann dem Nutzer melden.) LLAP 🖖 -- “When UX doesn’t consider *all* users, shouldn’t it be known as ‘*Some* User Experience’ or... SUX? #a11y” —[Billy Gregory](https://twitter.com/thebillygregory/status/552466012713783297)