Submenu (ul) gegen eine dropdown-liste tauschen

[Lars]

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:

<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>

Ich finde nur keinen Eintrag wie ich das Formular dazu bewege die jeweilige Seite zu laden.

Vom Gefühl hatte ich schon was mit

<form methode="get">

probiert, dann tauchen die Werte ja immerhin in der URL auf.

Gruß Lars

[JürgenB]

Hallo Lars,

ich glaube, du suchst eine Drop-Down-Navigation.

Gruß
Jürgen

[Rolf B]

Hallo Lars,

damit die Werte eines Eingabeelements an den Server geschickt werden, braucht das Element einen Namen. Dieser Name bekommt dann den Wert des Elements zugeordnet.

<form action="index.php" method="get">
   <select name="jahrgang" required>
    <option value="">bitte auswählen</option>
    <option>2020</option>
    <option>2019</option>
    <option>2018</option>
    <option>2017</option>
  </select>
  <button>Anzeigen</button>
</form>

Dieses Form würde bei Auswahl von 2019 und Klick auf "Anzeigen" die Seite

    index.php?jahrgang=2019  

abrufen.

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.

Die Entscheidung, was anzuzeigen ist, trifft dann das index.php Script.

Rolf

[Gunnar Bittersmann]

@@Rolf B

damit die Werte eines Eingabeelements an den Server geschickt werden, braucht das Element einen Namen.

Nein. Hier geht es nicht um das Abschicken von Daten, sondern um die Navigation auf einer Webseite. Dafür sind form, select, option die falschen HTML-Elemente.

nav, ul, li und last but not least a sind die richtigen.

😷 LLAP

[Rolf B]

Hallo Gunnar,

damit die Werte eines Eingabeelements an den Server geschickt werden, braucht das Element einen Namen.

Nein.

Doch!

Allerdings hast Du zwei Themen in einer Zeile angesprochen. Das andere ist:

Hier geht es nicht um das Abschicken von Daten, sondern um die Navigation auf einer Webseite.

Damit magst Du recht haben. Wenn man die Auswahl des Jahrgangs als einen Filter in einem Suchformular auffasst, könnte man es dann rechtfertigen?

Rolf

[Gunnar Bittersmann]

@@Rolf B

damit die Werte eines Eingabeelements an den Server geschickt werden, braucht das Element einen Namen.

Nein.

Doch!

Oh!

(Der musste jetzt kommen.)

Trotzdem: nein. Wenn das Element sowieso wegkommt, braucht es vorher nicht noch einen Namen.

Hier geht es nicht um das Abschicken von Daten, sondern um die Navigation auf einer Webseite.

Damit magst Du recht haben. Wenn man die Auswahl des Jahrgangs als einen Filter in einem Suchformular auffasst, könnte man es dann rechtfertigen?

Wenn es denn ein Suchformular gibt – so mit Eingabefeld für die Suchbegriffe –, dann ja. Suchen ist nicht navigieren.

Wenn das, was eine Navigationsliste sein sollte, von einem Screenreader als Formular zur Dateneingabe vorgelesen wird, dürfte das sehr verwirrend sein.

😷 LLAP

[Lars]

Hallo Gunnar, Hallo Rolf,

erstmals danke für die Antworten.

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.

Allerdings hat mich ein Kumpel gerade darauf hingewiesen, dass auch eine Liste (wie @@JürgenB sie vorgeschlagen hat) durch

overflow:scroll

äußerlich klein gehalten werden kann und auch diese natürlich aus einem separaten index stammen kann.

Ich habe also wieder mal viel zu kompliziert versucht etwas einfaches zu erreichen. Sorry dafür und danke für die Mühen.

Gruß Lars