Submenu (ul) gegen eine dropdown-liste tauschen – SELFHTML-Forum Forum als Ergänzung zum SELFHTML-Wiki und zur Dokumentation SELFHTML https://forum.selfhtml.org/self?srt=yes Submenu (ul) gegen eine dropdown-liste tauschen Sat, 02 Jan 21 15:28:57 Z https://forum.selfhtml.org/self/2021/jan/02/submenu-ul-gegen-eine-dropdown-liste-tauschen/1779843?srt=yes#m1779843 https://forum.selfhtml.org/self/2021/jan/02/submenu-ul-gegen-eine-dropdown-liste-tauschen/1779843?srt=yes#m1779843 <p>Ich versuche über eine Dropdown-Liste verschiedene Seiten aufzurufen. Hintergrund ist, dass ich für jedes Jahr unsere Feuerwehreinsätze auflisten will und die Auswahl der Seiten natürlich immer länger wird. Deswegen möchte ich von der "ul" auf der linken seite zu einer Listenauswahl wechseln. Folgendes bekomme ich hin:</p> <pre><code class="block"><form action="index.php"> <label>Wähle ein Jahr aus:</label> <select> <option value="2020.php">2020</option> <option value="2019.php">2019</option> <option value="2018.php">2018</option> <option value="2017.php">2017</option> ... </select> <button>Anzeigen</button> </form> </code></pre> <p>Ich finde nur keinen Eintrag wie ich das Formular dazu bewege die jeweilige Seite zu laden.</p> <p>Vom Gefühl hatte ich schon was mit</p> <pre><code class="block"><form methode="get"> </code></pre> <p>probiert, dann tauchen die Werte ja immerhin in der URL auf.</p> <p>Gruß Lars</p> <div class="signature">-- <br> Programmieren ist ein bisschen wie ein Sprung aus einem Hochhaus - bei jeder Etape/Etage kann man sagen "soweit so gut". Bis man aufschlägt! :) </div> Submenu (ul) gegen eine dropdown-liste tauschen Sat, 02 Jan 21 15:50:05 Z https://forum.selfhtml.org/self/2021/jan/02/submenu-ul-gegen-eine-dropdown-liste-tauschen/1779844?srt=yes#m1779844 https://forum.selfhtml.org/self/2021/jan/02/submenu-ul-gegen-eine-dropdown-liste-tauschen/1779844?srt=yes#m1779844 <p>Hallo Lars,</p> <p>ich glaube, du suchst eine <a href="https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/zug%C3%A4ngliche_Dropdown-Navigation" rel="nofollow noopener noreferrer">Drop-Down-Navigation</a>.</p> <p>Gruß<br> Jürgen</p> Submenu (ul) gegen eine dropdown-liste tauschen Sat, 02 Jan 21 16:04:09 Z https://forum.selfhtml.org/self/2021/jan/02/submenu-ul-gegen-eine-dropdown-liste-tauschen/1779849?srt=yes#m1779849 https://forum.selfhtml.org/self/2021/jan/02/submenu-ul-gegen-eine-dropdown-liste-tauschen/1779849?srt=yes#m1779849 <p>Hallo Lars,</p> <p>damit die Werte eines Eingabeelements an den Server geschickt werden, braucht das Element einen Namen. Dieser Name bekommt dann den Wert des Elements zugeordnet.</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>index.php<span class="token punctuation">"</span></span> <span class="token attr-name">method</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>get<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>jahrgang<span class="token punctuation">"</span></span> <span class="token attr-name">required</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>bitte auswählen<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>2020<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>2019<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>2018<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>2017<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span><span class="token punctuation">></span></span>Anzeigen<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> </code></pre> <p>Dieses Form würde bei Auswahl von 2019 und Klick auf "Anzeigen" die Seite</p> <pre><code> index.php?jahrgang=2019 </code></pre> <p>abrufen.</p> <p>Da in den Optionen der Anzeigewert und der zum Server zu sendende Wert identisch sind, kannst Du auf das value Attribut verzichten. Es sei denn, du möchtest einen "nichts ausgewählt" Punkt in der Liste haben, wie oben - der muss value="" bekommen, damit das required Attribut eine Auswahl erzwingen kann.</p> <p>Die Entscheidung, was anzuzeigen ist, trifft dann das index.php Script.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> Submenu (ul) gegen eine dropdown-liste tauschen Sat, 02 Jan 21 18:04:19 Z https://forum.selfhtml.org/self/2021/jan/02/submenu-ul-gegen-eine-dropdown-liste-tauschen/1779857?srt=yes#m1779857 https://forum.selfhtml.org/self/2021/jan/02/submenu-ul-gegen-eine-dropdown-liste-tauschen/1779857?srt=yes#m1779857 <p>@@Rolf B</p> <blockquote> <p>damit die Werte eines Eingabeelements an den Server geschickt werden, braucht das Element einen Namen.</p> </blockquote> <p>Nein. Hier geht es nicht um das Abschicken von Daten, sondern um die Navigation auf einer Webseite. Dafür sind <code class="bad">form</code>, <code class="bad">select</code>, <code class="bad">option</code> die falschen HTML-Elemente.</p> <p><code class="good">nav</code>, <code class="good">ul</code>, <code class="good">li</code> und <em>last but not least</em> <code class="good">a</code> sind die richtigen.</p> <p> LLAP</p> <div class="signature">-- <br> <em lang="en">“When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.”</em> —John Lennon </div> Submenu (ul) gegen eine dropdown-liste tauschen Sat, 02 Jan 21 19:14:30 Z https://forum.selfhtml.org/self/2021/jan/02/submenu-ul-gegen-eine-dropdown-liste-tauschen/1779858?srt=yes#m1779858 https://forum.selfhtml.org/self/2021/jan/02/submenu-ul-gegen-eine-dropdown-liste-tauschen/1779858?srt=yes#m1779858 <p>Hallo Gunnar,</p> <blockquote> <blockquote> <p>damit die Werte eines Eingabeelements an den Server geschickt werden, braucht das Element einen Namen.</p> </blockquote> </blockquote> <blockquote> <p>Nein.</p> </blockquote> <p>Doch!</p> <p>Allerdings hast Du zwei Themen in einer Zeile angesprochen. Das andere ist:</p> <blockquote> <p>Hier geht es nicht um das Abschicken von Daten, sondern um die Navigation auf einer Webseite.</p> </blockquote> <p>Damit magst Du recht haben. Wenn man die Auswahl des Jahrgangs als einen Filter in einem Suchformular auffasst, könnte man es dann rechtfertigen?</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> Submenu (ul) gegen eine dropdown-liste tauschen Sat, 02 Jan 21 20:23:07 Z https://forum.selfhtml.org/self/2021/jan/02/submenu-ul-gegen-eine-dropdown-liste-tauschen/1779859?srt=yes#m1779859 https://forum.selfhtml.org/self/2021/jan/02/submenu-ul-gegen-eine-dropdown-liste-tauschen/1779859?srt=yes#m1779859 <p>@@Rolf B</p> <blockquote> <blockquote> <blockquote> <p>damit die Werte eines Eingabeelements an den Server geschickt werden, braucht das Element einen Namen.</p> </blockquote> </blockquote> <blockquote> <p>Nein.</p> </blockquote> <p>Doch!</p> </blockquote> <p>Oh!</p> <p>(Der musste jetzt kommen.)</p> <p>Trotzdem: nein. Wenn das Element sowieso wegkommt, braucht es vorher nicht noch einen Namen.</p> <blockquote> <blockquote> <p>Hier geht es nicht um das Abschicken von Daten, sondern um die Navigation auf einer Webseite.</p> </blockquote> <p>Damit magst Du recht haben. Wenn man die Auswahl des Jahrgangs als einen Filter in einem Suchformular auffasst, könnte man es dann rechtfertigen?</p> </blockquote> <p>Wenn es denn ein Suchformular gibt – so mit Eingabefeld für die Suchbegriffe –, dann ja. Suchen ist nicht navigieren.</p> <p>Wenn das, was eine Navigationsliste sein sollte, von einem Screenreader als Formular zur Dateneingabe vorgelesen wird, dürfte das sehr verwirrend sein.</p> <p> LLAP</p> <div class="signature">-- <br> <em lang="en">“When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.”</em> —John Lennon </div> Submenu (ul) gegen eine dropdown-liste tauschen Sat, 02 Jan 21 20:41:29 Z https://forum.selfhtml.org/self/2021/jan/02/submenu-ul-gegen-eine-dropdown-liste-tauschen/1779860?srt=yes#m1779860 https://forum.selfhtml.org/self/2021/jan/02/submenu-ul-gegen-eine-dropdown-liste-tauschen/1779860?srt=yes#m1779860 <p>Hallo Gunnar, Hallo Rolf,</p> <p>erstmals danke für die Antworten.</p> <p>Was mich gestört hat ist, dass die Liste seit 2007 ja immer Länger wird und ich dann irgendwann 1000px scrollen muss um eine bestimmte seite zu finden. Plus wie soll ich das ins Layout integrieren? Deswegen und weil die Auswahl aus einer externen Datei eingebunden werden kann dachte ich, das sei die beste Lösung.</p> <p>Allerdings hat mich ein Kumpel gerade darauf hingewiesen, dass auch eine Liste (wie @@JürgenB sie vorgeschlagen hat) durch</p> <pre><code class="block">overflow:scroll </code></pre> <p>äußerlich klein gehalten werden kann und auch diese natürlich aus einem separaten index stammen kann.</p> <p>Ich habe also wieder mal viel zu kompliziert versucht etwas einfaches zu erreichen. Sorry dafür und danke für die Mühen.</p> <p>Gruß Lars</p> <div class="signature">-- <br> Programmieren ist ein bisschen wie ein Sprung aus einem Hochhaus - bei jeder Etape/Etage kann man sagen "soweit so gut". Bis man aufschlägt! :) </div>