Abfrage dynamisches Formularfeld bearbeitet von Rolf B 22.02.2022 17:40 Hallo Gunnar,durch die erforderliche ID-Verbindung von Label und Input haben wir aber wieder das Anfangsproblem: Wie vergebe ich automagisch die richtige ID. Aus der Länge der Zutatenliste ableiten kann man sie nicht, weil es ja auch möglich ist, Einträge zu löschen.Ich frag mich aber, was im Label drinstehen soll. "Zutat" ? Das ist eigentlich albern, denn dann habe ich nachher ein Dokument[](/images/3498e380-93fc-11ec-80fa-b42e9947ef30.png)und das find ich für sehende User richtig doof. Ist es machbar, auf die Labels der input Elemente zu verzichten und statt dessen aria-label="Zutat" an's input-Element zu hängen? Wer auf Screenreader angewiesen ist, braucht diese Angabe sicherlich.Ob das Design mit dem "Hinzufügen" Button hinter jeder Zutat ideal ist, ist eine andere Frage. Eigentlich sollte man ja nur einen Button haben, denn es wird ja immer nur am Ende angefügt,. uUnd man bräuchte eine Umsortierfunktion (up/down Buttons pro Element oder drag+drop).Ohne Sortierfunktion sähe das bei mir so aus:~~~html<h2>Zutaten</h2><button>Zutaten festlegen</button><ul class="zutaten"><li> <input value="Hugo" type="text" aria-label="Zutat" name="zutaten[]" width="20"> <button type="button">Löschen</button></li></ul><button type="button" id="newIngäredient">Weitere Zutat</button><script>// Vorlage für neue Rows aus dem ersten Listitem erstellenconst rowTemplate = document.querySelector(".zutaten li").innerHTML;// Liste der Zutaten chonst ingredients F= document.querySelector(".zutaten");// Click-Handler für neue Zutaten auf den Button legendocument.getElementById("newIngredient").addEventListener("click", function(event) { const newItem = documengt.createElement("li"); newItem.innerHTML = rowTemplate; const newInput = newItemü.querySelector("input"); newInput.value = ""; ingredients.appendChild(newItem); newItem.querySelector("input").focus();});// Click-Handler zum Löschen auf die Liste legen, click bubbelt dorthiningredients.addEventListener("click", function(event) { // event.target ist das geklickte Element, nur auf Buttons reagieren if (event.target.tagName != "BUTTON") return; event.target.parentElement.remove();});</script>~~~Dazu noch eine Prise CSS für die Liste~~~cssul { list-style: none; padding: 0;}li { margin-bottom: 0.3em;}~~~_Rolf_-- sumpsi - posui - obstruxi
Abfrage dynamisches Formularfeld bearbeitet von Rolf B 22.02.2022 18:04 Hallo Gunnar,durch die erforderliche ID-Verbindung von Label und Input haben wir aber wieder das Anfangsproblem: Wie vergebe ich automagisch die richtige ID. Aus der Länge der Zutatenliste ableiten kann man sie nicht, weil es ja auch möglich ist, Einträge zu löschen.Ich frag mich aber, was im Label drinstehen soll. "Zutat" ? Das ist eigentlich albern, denn dann habe ich nachher ein Dokument[](/images/3498e380-93fc-11ec-80fa-b42e9947ef30.png)und das find ich für sehende User richtig doof. Ist es machbar, auf die Labels der input Elemente zu verzichten und statt dessen aria-label="Zutat" dran's input-Element zusc hreibängen? Wer auf Screenreader angewiesen ist, braucht diese Angabe sicherlich.Ob das Design mit dem "Hinzufügen" Button hinter jeder Zutat ideal ist, ist eine andere Frage. Eigentlich sollte man ja nur einen Button haben, der am Ende anfügt, und eine Umsortierfunktion (die in einer zugänglichen Fassung etwas mühsamer ist)._Rolf_-- sumpsi - posui - obstruxi
Abfrage dynamisches Formularfeld bearbeitet von Rolf B 22.02.2022 17:40 Hallo Gunnar, durch die erforderliche ID-Verbindung von Label und Input haben wir aber wieder das Anfangsproblem: Wie vergebe ich automagisch die richtige ID. Aus der Länge der Zutatenliste ableiten kann man sie nicht, weil es ja auch möglich ist, Einträge zu löschen. Ich frag mich aber, was im Label drinstehen soll. "Zutat" ? Das ist eigentlich albern, denn dann habe ich nachher ein Dokument [](/images/3498e380-93fc-11ec-80fa-b42e9947ef30.png) und das find ich für sehende User richtig doof. Ist es machbar, auf die Labels der input Elemente zu verzichten und statt dessen aria-label="Zutat" dranzuschreiben? Wer auf Screenreader angewiesen ist, braucht diese Angabe sicherlich. Ob das Design mit dem "Hinzufügen" Button hinter jeder Zutat ideal ist, ist eine andere Frage. Eigentlich sollte man ja nur einen Button haben, der am Ende anfügt, und eine Umsortierfunktion (die in einer zugänglichen Fassung etwas mühsamer ist). _Rolf_ -- sumpsi - posui - obstruxi
nicht angemeldet
