tag:forum.selfhtml.org,2005:/self suche HTML Element mit 3 Zuständen (checkbox-ähnlich) – SELFHTML-Forum 2023-02-19T12:50:29Z https://forum.selfhtml.org/self/2023/feb/19/suche-html-element-mit-3-zustanden-checkbox-ahnlich/1806265#m1806265 Linuchs 2023-02-19T04:33:56Z 2023-02-19T04:33:56Z suche HTML Element mit 3 Zuständen (checkbox-ähnlich) <p>Moin,</p> <p>Gruppenmitglieder sollen angeben, ob sie an einem Termin (Auftritt) teilnehmen oder nicht.</p> <p>Das wäre eine checkbox. Der dritte Zustand ist aber, dass sie noch nicht gewählt haben. Wie kann man das visualisieren?</p> <p>Gruß, Linuchs</p> https://forum.selfhtml.org/self/2023/feb/19/suche-html-element-mit-3-zustanden-checkbox-ahnlich/1806266#m1806266 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2023-02-19T05:02:49Z 2023-02-19T05:23:23Z suche HTML Element mit 3 Zuständen (checkbox-ähnlich) <p>@@Linuchs</p> <blockquote> <p>Gruppenmitglieder sollen angeben, ob sie an einem Termin (Auftritt) teilnehmen oder nicht.</p> <p>Das wäre eine checkbox. Der dritte Zustand ist aber, dass sie noch nicht gewählt haben. Wie kann man das visualisieren?</p> </blockquote> <p>Mit einer Grupe aus 2 Radiobuttons, keiner vorausgewählt: <a href="https://codepen.io/gunnarbittersmann/pen/jOvbGRw?editors=0101" rel="noopener noreferrer">yepnope</a>.</p> <p>Oder so, dass man das Formular ohne Auswahl nicht absenden kann: <a href="https://codepen.io/gunnarbittersmann/pen/NWLGaVd?editors=1001" rel="noopener noreferrer">yepnope, required</a>.</p> <p>Eine einmal getroffene Entscheidung kann dann aber nicht so einfach zurückgenommen werden.</p> <p lang="uk"> Живіть довго і процвітайте</p> <div class="signature">-- <br> <em>„Im Vergleich mit Elon Musk bei Twitter ist ein Elefant im Porzellanladen eine Ballerina.“</em><br> — @Grantscheam auf Twitter </div> https://forum.selfhtml.org/self/2023/feb/19/suche-html-element-mit-3-zustanden-checkbox-ahnlich/1806275#m1806275 Raketenwilli 2023-02-19T09:43:38Z 2023-02-19T09:45:20Z suche HTML Element mit 3 Zuständen (checkbox-ähnlich) <p><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio" rel="nofollow noopener noreferrer">3 Radiobuttons mit gleichem Name aber unterschiedlicher ID und unterschiedlichen Werten</a>. „Nicht gewählt“ wird mit checked markiert, so lange nichts gewählt wurde, sonst natürlich die früher gespeicherte Entscheidung.</p> <p>Da kann der Benutzer seine Wahl auch „rückgängig machen“.</p> https://forum.selfhtml.org/self/2023/feb/19/suche-html-element-mit-3-zustanden-checkbox-ahnlich/1806282#m1806282 MudGuard http://www.andreas-waechter.de/ 2023-02-19T10:36:16Z 2023-02-19T10:36:16Z suche HTML Element mit 3 Zuständen (checkbox-ähnlich) <p>Hi,</p> <blockquote> <p>Gruppenmitglieder sollen angeben, ob sie an einem Termin (Auftritt) teilnehmen oder nicht.</p> <p>Das wäre eine checkbox. Der dritte Zustand ist aber, dass sie noch nicht gewählt haben. Wie kann man das visualisieren?</p> </blockquote> <p>evtl. auch per Select-Element mit 3 Option-Kindern.</p> <p>cu,<br> Andreas a/k/a MudGuard</p> https://forum.selfhtml.org/self/2023/feb/19/suche-html-element-mit-3-zustanden-checkbox-ahnlich/1806292#m1806292 Felix Riesterer https://felix-riesterer.de 2023-02-19T11:17:07Z 2023-02-19T11:17:07Z suche HTML Element mit 3 Zuständen (checkbox-ähnlich) <p>Lieber Linuchs,</p> <p>ich hatte mal eine ähnliche Frage: <a href="https://forum.selfhtml.org/self/2017/may/22/markup-fuer-dreistufigen-klick-schalter/1694723#m1694723" rel="noopener noreferrer">Markup für dreistufigen Klick-Schalter</a> - oder ist das nicht das, wonach Du suchst?</p> <p>Liebe Grüße</p> <p>Felix Riesterer</p> https://forum.selfhtml.org/self/2023/feb/19/suche-html-element-mit-3-zustanden-checkbox-ahnlich/1806293#m1806293 JürgenB https://www.j-berkemeier.de 2023-02-19T11:30:47Z 2023-02-19T11:30:47Z suche HTML Element mit 3 Zuständen (checkbox-ähnlich) <p>Hallo,</p> <p>nur der Vollständigkeit halber: checkboxen kennen als dritten Zustand <code>indeterminate</code>, der aber nur per Javascript gesetzt werden kann.</p> <p>Gruß<br> Jürgen</p> https://forum.selfhtml.org/self/2023/feb/19/suche-html-element-mit-3-zustanden-checkbox-ahnlich/1806287#m1806287 Linuchs 2023-02-19T10:53:43Z 2023-02-19T10:54:15Z danke, 2 radio buttons sind die Lösung <p>Hallo Gunnar,</p> <blockquote> <p>Mit einer Gruppe aus 2 Radiobuttons, keiner vorausgewählt</p> </blockquote> <p>Danke dir, so mache ich das.</p> <p>Wenn sich jemand entschieden hat für JA, kann er es noch ändern auf NEIN, aber nicht mehr angeben, dass er keine Wahl getroffen hätte.</p> <p><a href="/images/9b762540-b043-11ed-bceb-b42e9947ef30.png" rel="noopener noreferrer"><img src="/images/9b762540-b043-11ed-bceb-b42e9947ef30.png?size=medium" alt="" loading="lazy"></a></p> <p>Gruß, Linuchs</p> https://forum.selfhtml.org/self/2023/feb/19/suche-html-element-mit-3-zustanden-checkbox-ahnlich/1806284#m1806284 Der Martin 2023-02-19T10:42:49Z 2023-02-19T10:42:49Z suche HTML Element mit 3 Zuständen (checkbox-ähnlich) <p>Hallo,</p> <blockquote> <blockquote> <p>Das wäre eine checkbox. Der dritte Zustand ist aber, dass sie noch nicht gewählt haben. Wie kann man das visualisieren?</p> </blockquote> <p>evtl. auch per Select-Element mit 3 Option-Kindern.</p> </blockquote> <p>oder noch mehr. Ja, Nein, Vielleicht, Mir doch egal ...</p> <p>Einen schönen Tag noch<br>  Martin</p> <div class="signature">-- <br> Möchtegern-Dichter zum Verleger: "Sie meinen also, ich sollte etwas mehr Feuer in meine Verse legen?" - "Umgekehrt, mein Lieber, umgekehrt. Mehr Verse ins Feuer." </div> https://forum.selfhtml.org/self/2023/feb/19/suche-html-element-mit-3-zustanden-checkbox-ahnlich/1806285#m1806285 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2023-02-19T10:49:01Z 2023-02-19T10:49:01Z suche HTML Element mit 3 Zuständen (checkbox-ähnlich) <p>@@MudGuard</p> <blockquote> <p>evtl. auch per Select-Element mit 3 Option-Kindern.</p> </blockquote> <p>Meh, bitte nicht. Optionen sind initial nicht ohne Interaktion ersichtlich. Zur Auswahl braucht man einen Click mehr.</p> <p>Und der Platzbedarf für ja/nein(/vielleicht) ist auch nicht wesentlich größer.</p> <p>Aufklapp-Auswahlmenüs (<code>select</code>) mögen vielleicht(!) sinnvoll sein, wenn es viele Optionen sind, die als Radiobuttongruppe das Formular wuchtig und unübersichtlich erscheinen ließen.</p> <p>Ansonsten sollten Radiobuttons das Mittel der Wahl sein.</p> <p lang="uk"> Живіть довго і процвітайте</p> <div class="signature">-- <br> <em>„Im Vergleich mit Elon Musk bei Twitter ist ein Elefant im Porzellanladen eine Ballerina.“</em><br> — @Grantscheam auf Twitter </div> https://forum.selfhtml.org/self/2023/feb/19/suche-html-element-mit-3-zustanden-checkbox-ahnlich/1806291#m1806291 Der Martin 2023-02-19T11:07:01Z 2023-02-19T11:07:01Z danke, 2 radio buttons sind die Lösung <p>Hallo,</p> <blockquote> <blockquote> <p>Mit einer Gruppe aus 2 Radiobuttons, keiner vorausgewählt</p> </blockquote> <p>Wenn sich jemand entschieden hat für JA, kann er es noch ändern auf NEIN, aber nicht mehr angeben, dass er keine Wahl getroffen hätte.</p> <p><a href="/images/9b762540-b043-11ed-bceb-b42e9947ef30.png" rel="noopener noreferrer"><img src="/images/9b762540-b043-11ed-bceb-b42e9947ef30.png?size=medium" alt="" loading="lazy"></a></p> </blockquote> <p>genau richtig erkannt.<br> Wenn du mit dieser kleinen Einschränkung leben kannst, ist die Lösung okay.</p> <p>Einen schönen Tag noch<br>  Martin</p> <div class="signature">-- <br> Möchtegern-Dichter zum Verleger: "Sie meinen also, ich sollte etwas mehr Feuer in meine Verse legen?" - "Umgekehrt, mein Lieber, umgekehrt. Mehr Verse ins Feuer." </div> https://forum.selfhtml.org/self/2023/feb/19/suche-html-element-mit-3-zustanden-checkbox-ahnlich/1806298#m1806298 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2023-02-19T12:50:29Z 2023-02-19T12:56:04Z danke, 2 radio buttons sind die Lösung <p>@@Linuchs</p> <blockquote> <p><a href="/images/9b762540-b043-11ed-bceb-b42e9947ef30.png" rel="noopener noreferrer"><img src="/images/9b762540-b043-11ed-bceb-b42e9947ef30.png?size=medium" alt="" loading="lazy"></a></p> </blockquote> <p>„ja | nein“ einmalig über die Radiobuttons zu schreiben kann man machen, wenn es nicht so viele Veranstaltungen sind, dass die Beschriftung aus dem Blickfeld verschwindet, sonst sollte die Beschriftung <em lang="en">sticky</em> sein. Du solltest aber noch dafür sorgen, dass die „|“ bündig untereinander stehen.</p> <p>Jeder Radiobutton sollte aber eine zugängliche Beschriftung haben, in der „ja“ bzw. „nein“ und der Titel der jeweiligen Veranstaltung enthalten ist. (Das Wörtchen „Teilnahme“ schadet auch nicht, damit man weiß was mit „ja“/„nein“ gemeint ist.)</p> <p>Also den Elementen mit „ja“, „nein“ und den Titeln der Veranstaltungen IDs geben und diese per <code>aria-labelledby</code> referenzieren.</p> <p>☞ <a href="https://codepen.io/gunnarbittersmann/pen/QWVjrXW?editors=1000" rel="noopener noreferrer">Beispiel</a></p> <p lang="uk"> Живіть довго і процвітайте</p> <div class="signature">-- <br> <em>„Im Vergleich mit Elon Musk bei Twitter ist ein Elefant im Porzellanladen eine Ballerina.“</em><br> — @Grantscheam auf Twitter </div>