"Eine von allen" Checkboxen verpflichtend machen?

[Passwort]

Hallo zusammen

Ich habe aktuell ein Problem bei meiner Anmeldeseite, dass man auch eine Anmeldung abschicken kann, ohne Angaben zum Tag (Abschnitt "Zimmerauswahl") zu machen. Seite ist verlinkt.

Soll: Bei der Auswahl der Nächte mindestens eine, maximal alle Nächte auswählen (Checkbox) und bei der Auswahl der Zimmerauswahl eine der vier Auswahlen tätigen (radio) ODER eine bis alle Checkboxen unter dem Strich.

Bei den Radiobuttons unden Name/eMail Feldern wird aus geprüft, ob da die Mindestauswahl getätigt wurde. Bei der Auswahl der Übernachtungen jedoch nicht. Wenn ich in den Input Tag ein required hinzunehme, muss man alle Nächte wählen, was ich auch nicht will. Hintergrund ist dass, das Formular flexibel auch für längere Veranstaltungen konzipiert ist. relevanter Quellcode:

<div data-form-area="uebernachtungen">
  <?php
   // Day selection
   for ($i = 1; $i < $days; $i++) {
    // Day from
    $dayFrom = date('d.m.Y', $date['start_date'] + (($i - 1) * 60 * 60 * 24));
    // Get the date of this day
    $dayTo = date('d.m.Y', $date['start_date'] + ($i * 60 * 60 * 24));
  ?>
  <div class="form-switch my-3"> <!-- Tage auswählen -->
   <input type="checkbox" class="form-check-input" id="stay_day_<?= $i ?>" name="Nacht[]" <?= isset($form_data['Nacht']) && in_array($i, $form_data['Nacht']) ? 'checked' : '' ?> value="<?= $i ?>">
   <label class="form-check-label" for="stay_day_<?= $i ?>">
    Ich m&ouml;chte ein Zimmer für die <strong><?= $i ?>. Nacht:&nbsp;</strong>
   </label>
   <span class="form-text">Vom <?= $dayFrom ?> bis <?= $dayTo ?></span>
  </div>

Besten Dank.

[Matthias Scharwies]

Hallo zusammen,

Ich habe aktuell ein Problem bei meiner Anmeldeseite, dass man auch eine Anmeldung abschicken kann, ohne Angaben zum Tag (Abschnitt "Zimmerauswahl") zu machen. Seite ist verlinkt.

https://toesstal-spielt.ch/anmelden

Soll:

1. Bei der Auswahl der Nächte mindestens eine, maximal alle Nächte auswählen (Checkbox) und
2. bei der Auswahl der Zimmerauswahl eine der vier Auswahlen tätigen (radio)
3. ODER eine bis alle Checkboxen unter dem Strich.

Bei den Radiobuttons unden Name/eMail Feldern wird aus geprüft, ob da die Mindestauswahl getätigt wurde. Bei der Auswahl der Übernachtungen jedoch nicht. Wenn ich in den Input Tag ein required hinzunehme, muss man alle Nächte wählen, was ich auch nicht will.

Genau. Bei requiredmuss eine Eingabe erfolgen. - Bei Dir kann man aber entweder etwas in die erste Gruppe der Checkboxen für die Übernachtung oder in die dritte der Checkboxen für die Teilnahme ohne Übernachtung eintragen. Das musst du selbst programmieren - required hilft da nicht.

Herzliche Grüße

Matthias Scharwies

[Passwort]

Genau. Bei requiredmuss eine Eingabe erfolgen. - Bei Dir kann man aber entweder etwas in die erste Gruppe der Checkboxen für die Übernachtung oder in die dritte der Checkboxen für die Teilnahme ohne Übernachtung eintragen. Das musst du selbst programmieren - required hilft da nicht.

Ich hätte hier nicht gepostet, wenn ich eine Idee hätte, wie das am besten geht. Dass required hier nicht hilft, das habe ich wie geschrieben, schon herausgefunden

[Matthias Scharwies]

guten Morgen Passwort,

Ich hätte hier nicht gepostet, wenn ich eine Idee hätte, wie das am besten geht.

Ich versuche mal nur meine 2cents loszuwerden:

In einem Formular sollte man den Nutzer Schritt für Schritt entscheiden lassen, was er möchte:

Beispiel: Anmeldung Spielewochenende

Diese Schritte sind bei mir in fieldset-Elemente gepackt. Die Überschriften sind legend-Elemente.

Schritt 1: Teilnahme

Wenn sich jemand anmeldet (das sind deine Checkboxen - ich habe sie mit CSS anders formatiert.), wird der nächste Schritt freigeschaltet:

Schritt 2: Übernachtung

Hier gibt es zwei Checkboxen für die Übernachtung und zwei Radio-Buttons für die Abfrage, ob übernachtet wird oder nur ein Tagesbesuch geplant ist. Eigentlich müsste man den ersten Radio verstecken - er ist für den Nutzer doppelte Arbeit.

@Gunnar Bittersmann Habe ich da richtig gedacht?

Schritt 3: Zimmertyp

Ein Klick auf eine Übernachtung öffnet den Zimmertyp - ein Klick auf "Tagesbesucher" die Kontaktdaten und den Absendebutton.

Ein Klick auf Tagesbesucher nach einer Übernachtungsauswahl sollte die Zimmertyp-Auswahl wieder schließen!

Ich habe deine Ids dringelassen, kann dein PHP-Script damit umgehen?

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo Matthias,

Die Freischaltlogik für die Übernachtungen ist fritte.

Entweder müssen die Ü-Felder angehen und anbleiben, solange Telnahmetage aktiv sind. Oder sie gehen nur an, wenn 2 aufeinander folgende Tage ausgewählt sind.

Du schaltest die Ü-Felder ein, wenn ein Tag angewählt wird, und aus wenn ein Tag abgewählt wird. Das ist zu simpel.

Rolf

[Matthias Scharwies]

Servus!

Hallo Matthias,

Die Freischaltlogik für die Übernachtungen ist fritte.

Entweder müssen die Ü-Felder angehen und anbleiben, solange Telnahmetage aktiv sind. Oder sie gehen nur an, wenn 2 aufeinander folgende Tage ausgewählt sind.

Und was ist, wenn du abends feiern willst, übernachtest und morgens verschwindest? Ich weiß eig. unlogisch und unwahrscheinlich.

Du schaltest die Ü-Felder ein, wenn ein Tag angewählt wird, und aus wenn ein Tag abgewählt wird. Das ist zu simpel.

Was ich vergessen habe, ist die fieldsets mit aria-current="step" zu versehen. Da müssen wir uns am Wochenende ein gutes Beispiel überlegen.

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo Matthias,

man muss mit den möglichen Usecases anfangen, und klassifizieren, welche man anbieten will und welche nicht. Business Analysis heißt das. Programmierer tun sich schwer damit, wir neigen zum einfach mal losgaloppieren, deshalb hat man in der IT zumeist eigene Leute dafür. Und dann die Requirement Engineers, die das BA Ergebnis für Leute wie dich und mich verständlich machen.

Wir haben von Mr. Password keine BA bekommen und deshalb schwimmen wir jetzt.

Für ein Wiki-Beispiel sollten die Business-Anforderungen minimal sein. Für eine flexible Anmeldeseite, wie Password sie sich vorstellt, sieht das ganz anders aus. Das können wir für ihn nicht lösen. Wir könnten uns einen Ordner voller Anforderungen zusammenbrainstormen. Aber entsteht dabei etwas, was Password brauchen kann?

Rolf

[Matthias Scharwies]

Servus!

Hallo Matthias,

man muss mit den möglichen Usecases anfangen, und klassifizieren, welche man anbieten will und welche nicht. Business Analysis heißt das. Programmierer tun sich schwer damit, wir neigen zum einfach mal losgaloppieren, deshalb hat man in der IT zumeist eigene Leute dafür. Und dann die Requirement Engineers, die das BA Ergebnis für Leute wie dich und mich verständlich machen.

Wir haben von Mr. Password keine BA bekommen und deshalb schwimmen wir jetzt.

Ja.

Nein. Mein (kostenloses) Beispiel soll jetzt auch keine umfassende Komplettlösung für ein von Dritten gegen Geld programmiertes Backend sein.

---

Für ein Wiki-Beispiel sollten die Business-Anforderungen minimal sein.

Ich bin vor ein paar Wochen auf

• Formulare/Benutzereingaben zugänglich gestalten

gestoßen. Das ehemalige EinzelTutorial "Beschriftungen" habe ich um mehrere placeholder-Beispiele bereinigt und dort integriert.

Der Abschnitt "Mehrteilige Formulare" besteht aus einem Beispiel für fieldset, einem zu progress und zwei multistep-Tutorials ^[1], die beide eben noch nicht multistep sind:

1. Beispiel:Bestellformular_mit_verschiedenen_Abschnitten.html
2. Beispiel:Klassen_mit_JavaScript_umschalten_und_mit_CSS_nutzen2.html (Umfrage)

Was ich zusätzlich noch haben wollte (dort oder woanders), wäre ein Formular, in das man eben immer nur einen Datensatz eingibt und dann eine weitere Zeile mit leeren Eingabefeldern erzeugt werden kann.^[2]

Im Folgekapitel Formulare/Auswahllisten ^[3] gibt es mehrere Beispiele mit Pizza:

3. Beispiel:Radio vs Checkboxen

Könnte man das Thema durchgehend verwenden?

Für eine flexible Anmeldeseite, wie Password sie sich vorstellt, sieht das ganz anders aus. Das können wir für ihn nicht lösen. Wir könnten uns einen Ordner voller Anforderungen zusammenbrainstormen. Aber entsteht dabei etwas, was Password brauchen kann?

Ja, ein gutes Tutorial könnte ihm zeigen, dass man Formulare

• planen und in fieldsets gliedern muss,
• alle Eingabefelder mit label, aber nicht mit placeholder versieht
• mit JS schrittweise einblendet.

Die passgenaue Umsetzung können wir nicht leisten – da hast du Recht!

Herzliche Grüße

Matthias Scharwies

---

1. Mein Lastenheft:
   1x mit Ausgrauen, 1x mit Einblenden des aktuellen fieldsets - Änderung von title , h2 und aria-current="step"
   1x mit progress, 1x mit divs als bullet points ↩︎

2. Die Frage ist, ob man so etwas in einem „Anfänger“-Tutorial oder in einem Tutorial „Formulare mit JS – nur für Fortgeschrittene“ behandelt.
   Ein Tutorial, das sich nur auf die HTML-Elemente an sich konzentriert, würde heute imho nicht mehr ausreichen.
   Selbst der Einstieg Was ist ein Webformular? verwendet JavaScript. ↩︎

3. Dort gibt es einen FlipFlop-Schalter, der mit dem Checkbox-Hack arbeitet, vor dem wir eigentlich warnen.
   @Hörnchen hat uns ja seinen <toggle-switch> gezeigt, den man bei Web Components erklären könnte. Soll der Flip-Flop-Schalter schon vorher weg? ↩︎

[Matthias Scharwies]

Hallo zusammen,

@JürgenB und ich hatten uns diesen Thread zum Anlass genommen, ein Tutorial zu benutzerfreundlichen, mehrteiligen Formularen zu erstellen.^[1]

Vorher: Aus den 3 Portalseiten HTML/Tutorials/Formulare, HTML/Tutorials/Formulare/input und JavaScript/Tutorials/Formulare wurde die Portalseite

Formulare (mit Cards).^[2]

1. Was ist ein Webformular? klärt die Funktionsweise von Formularen.

2. Benutzereingaben zugänglich gestalten
   musste gründlich umgearbeitet werden. Das erste Beispiel bestand (aus noch nicht erklärten) Radio-Buttons; gleich nach label kamen Beispiel mit dem heute verpönten placeholder. Ich habe das Kapitel browsereigene Validierung dort integriert und duplicate content entfernt.

Jetzt sind wir bei den Multistep-Formularen. Problem, das Jürgen bereits angemerkt hatte: Komplexere Formulare werden serverseitig ausgewertet und deshalb eben dort oft auch zusammengestellt.

Und trotzdem könnten wir dort einfach zeigen, welche Techniken man verwendet und welche Probleme man in der Konzeption berücksichtigen, bzw. vermeiden müsste. Das CSS und JS soll nur gezeigt, aber nicht ausführlich erklärt werden.

Die vorhandenen Formulare:

Klassen mit JavaScript umschalten und mit CSS nutzen Bestellformular_mit_verschiedenen_Abschnitten

sind imho zu kompliziert und auch nicht (mehr) schön anzusehen. Mein Beispiel aus dem Forum ist von der Geschäftslogik zu kompliziert, was ja auch den Thread-Ersteller bei der Planung seines Spiele-Wochenendes irritiert hatte.

Ich habe hier einen neuen Versuch: Beispiel:Formular-18.html

Dieses baut auf den Beispielen 16 und 17 auf.

Ziel soll sein, die einzelnen fieldsets erst einzublenden/freizuschalten, wenn das aktuelle ausgefüllt ist. Dazu habe ich ein paar Fragen:

1. Habt ihr generelle Kritikpunkte/Anregungen?

2. Funktion

   • a. Immer nur 1 fieldset sichtbar machen
     oder
   • b. die anderen mit disabled ausgrauen und dann eben "hell machen" - der Fokus kann ja immer ins erste Eingabe-Feld springen, damit das aktuelle fieldset immer im Viewport ist.
   • c. Wann soll disabled entfernt werden? Ja, wenn alle Eingabefelder gefüllt sind - was macht man aber mit den Checkboxen des ersten fieldsets und der textarea???
   • d. Bei der Sterne-Bewertung (ist in einem div) - Ein label oder p als Erläuterung?
   • e. Bei der Sterne-Bewertung ist :hover trotz disabled aktiv - schlimm oder sollte man das CSS dynamisch einfügen?

Ich würde das gerne auf dem Stammtisch am Mittwoch, den 04.09.2024 auf Discord besprechen! (Und anschließend das Tutorial fertigstellen!)

Herzliche Grüße

Matthias Scharwies

---

1. Angefangen hatten wir zusammen mit @Der Martin auf der MV in Hannover, dann kam halt immer wieder irgendetwas dazwischen. ↩︎

2. In Formulare/Eingabe_von_Text habe ich eine Seite zu Attributen wie autocomplete und spellcheck gefunden - das muss auch noch umgearbeitet werden.
   Den Artikel zu disabled und readonly habe ich einfach in die Referenz gepackt: HTML/Attribute/disabled#Ausgrauen:_disabled_vs_readonly
   Genauso mit inputmode ↩︎

[Gunnar Bittersmann]

@@Passwort

Ich habe aktuell ein Problem bei meiner Anmeldeseite

Ich sehe da aktuell zwei Probleme – außer dem von dir geschilderten.

1. Placeholder. Eins der unnützesten Features in HTML. Zum einen kann man schlecht unterscheiden, was Placeholder und was schon getätigte Nutzereingabe ist, zum anderen stehen wichtige Informationen nur bereit, wenn man noch keine Eingabe gemacht hat. Nicht verwenden!

   „Bitte angeben: …“ bei Sonderwünsche oder Hinweise gehört mit ins Label hinein; der Placeholder beim Namen ist völlig überflüssig.

2. Zwischen Einzel- und Doppelzimmer kann ich mich noch entscheiden, aber zur Entscheidung zwischen Zimmer mit Bad und WC drinnen und Bad und WC draußen auf dem Gang fehlt mir jede Grundlage. Das wäre der Preis – der muss hier angegeben sein.

Kwakoni Yiquan

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Ich sehe da aktuell zwei Probleme

Und noch ein drittes: die erzwungene Zustimmung zum Newsletter-Abo. Da kein Opt-out vorzusehen ist ein dark pattern.

Und ich finde keinen Hinweis, wie ich den Newsletter wieder abbestellen kann. Ich kenne die Gesetzeslage in der Schweiz nicht, aber ist das überhaupt erlaubt?

Kwakoni Yiquan

[Passwort]

Und noch ein drittes: die erzwungene Zustimmung zum Newsletter-Abo. Da kein Opt-out vorzusehen ist ein dark pattern.

Quatsch. Mit der Anmeldung stimmt man dem Eintrag in die NL zu, es steht extra auch noch auf der Anmeldeseite. Aus dem ersten NL kann man sich via Stornierung abmelden, vom zweiten mittels einer Nachricht an mich. Der erste NL ist erforderlich um den Teilnehmern die Infos zukommen zu lassen, die sie brauchen und ist so üblich. Andere Veranstalter machen das nur mit Mail-Verteilern, ist aber prinzipiell das gleiche.

Und ich finde keinen Hinweis, wie ich den Newsletter wieder abbestellen kann. Ich kenne die Gesetzeslage in der Schweiz nicht, aber ist das überhaupt erlaubt?

Siehe oben. Auch dieser Beitrag hilft nicht zur Problemlösung.

[Passwort]

Ich sehe da aktuell zwei Probleme – außer dem von dir geschilderten.

1. Placeholder. Eins der unnützesten Features in HTML. Zum einen kann man schlecht unterscheiden, was Placeholder und was schon getätigte Nutzereingabe ist, zum anderen stehen wichtige Informationen nur bereit, wenn man noch keine Eingabe gemacht hat. Nicht verwenden!

   „Bitte angeben: …“ bei Sonderwünsche oder Hinweise gehört mit ins Label hinein; der Placeholder beim Namen ist völlig überflüssig.

Ok, nehme ich zur Kenntnis.

2. Zwischen Einzel- und Doppelzimmer kann ich mich noch entscheiden, aber zur Entscheidung zwischen Zimmer mit Bad und WC drinnen und Bad und WC draußen auf dem Gang fehlt mir jede Grundlage. Das wäre der Preis – der muss hier angegeben sein.

Preis und Infos zu den Zimmern befindet sich auf einer separaten Seite. Das ist Absicht.

Dein Post hilft zur Problemlösung leider nicht.

[Gunnar Bittersmann]

@@Passwort

Preis und Infos zu den Zimmern befindet sich auf einer separaten Seite.

Und um das Anmeldeformular ausfüllen zu können müssen Nutzer erst eine andere Seite aufsuchen? Ernsthaft?

Das ist Absicht.

Ah, du willst aus dem Anmeldeformular ein adventure game machen. Das findest du für die Spiele-Wochenende-Seite angemessen? Ich glaube allerdings nicht, dass Nutzer in dem Moment spielen wollen. Sie wollen sich anmelden, so einfach wie’s geht.

Dein Post hilft zur Problemlösung leider nicht.

Doch. Nicht bei dem Problem, das du geschildert hast, sondern bei den Problemen, die du nicht geschildert hast.

Kwakoni Yiquan

[Rolf B]

Hallo Passwort,

dass Deine Logik zu komplex für deklaratives HTML ist, hat dir Matthias gesagt.

Wichtig wäre noch, dass du die Prüfung auch auf dem Server durchführst. Die Javascript-Kontrolle ist nice to have, kann aber von bösen Nutzern umgangen werden.

Fachlicher Edge-Case: X möchte von Tag 1 auf Tag 2 übernachten. Vom 2. auf den 3. Tag schläft sie anderswo (oder macht durch, ist ja schließlich zum SPIELEN da) und am 3. Tag auch teilnehmen. Das geht nicht einzustellen.

Rolf

[Passwort]

Hallo Passwort,

Wichtig wäre noch, dass du die Prüfung auch auf dem Server durchführst. Die Javascript-Kontrolle ist nice to have, kann aber von bösen Nutzern umgangen werden.

Die ganze Seite besteht aus einem Basis-Codegerüst, das ich mir habe bauen lassen für ein kleines Geld, damit ich eine Website anbieten kann für das Event, was ich dann mit Leben gefüllt habe. Meine Kenntnisse in HTML, JS und PHP sind zu rudimentär, damit ich sowas selbst auf die Beine hätte stellen können. Es hat an vielen Stellen codemässig Verbesserungspotential, das weiss ich. Aber jetzt habe ich mal was und wenn sich das Event gut entwickelt, dann kann ich noch Geld in eine Verbesserung des Codes stecken. Aber erstmal muss es reichen und ich beschränke mich darauf, Fehler auszumerzen.

Fachlicher Edge-Case: X möchte von Tag 1 auf Tag 2 übernachten. Vom 2. auf den 3. Tag schläft sie anderswo (oder macht durch, ist ja schließlich zum SPIELEN da) und am 3. Tag auch teilnehmen. Das geht nicht einzustellen.

Ja, das ist mir bewusst. Kommt aber wohl nicht vor. Durchmachen wird keiner wirklich, denn dazu bräuchte es mindestens drei, die das machen und habe ich bei keiner anderen Spieleveranstaltung erlebt. Und wenn dann doch mal so ein Fall auftritt dass jemand eine Nacht bei Freunden o.ä, übernachtet, die andere aber im Hotel....ja dann soll er das in die Sonderwünsche schreiben oder mich vorab kontaktieren.