tag:forum.selfhtml.org,2005:/selfsuche HTML Element mit 3 Zuständen (checkbox-ähnlich) – SELFHTML-Forum2023-02-19T12:50:29Zhttps://forum.selfhtml.org/self/2023/feb/19/suche-html-element-mit-3-zustanden-checkbox-ahnlich/1806265#m1806265Linuchs2023-02-19T04:33:56Z2023-02-19T04:33:56Zsuche 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#m1806266Gunnar Bittersmannselfhtml@bittersmann.dehttps://bittersmann.de2023-02-19T05:02:49Z2023-02-19T05:23:23Zsuche 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#m1806275Raketenwilli2023-02-19T09:43:38Z2023-02-19T09:45:20Zsuche 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#m1806282MudGuardhttp://www.andreas-waechter.de/2023-02-19T10:36:16Z2023-02-19T10:36:16Zsuche 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#m1806292Felix Riestererhttps://felix-riesterer.de2023-02-19T11:17:07Z2023-02-19T11:17:07Zsuche 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#m1806293JürgenBhttps://www.j-berkemeier.de2023-02-19T11:30:47Z2023-02-19T11:30:47Zsuche 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#m1806287Linuchs2023-02-19T10:53:43Z2023-02-19T10:54:15Zdanke, 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#m1806284Der Martin2023-02-19T10:42:49Z2023-02-19T10:42:49Zsuche 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#m1806285Gunnar Bittersmannselfhtml@bittersmann.dehttps://bittersmann.de2023-02-19T10:49:01Z2023-02-19T10:49:01Zsuche 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#m1806291Der Martin2023-02-19T11:07:01Z2023-02-19T11:07:01Zdanke, 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#m1806298Gunnar Bittersmannselfhtml@bittersmann.dehttps://bittersmann.de2023-02-19T12:50:29Z2023-02-19T12:56:04Zdanke, 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>