Voorbeeld: een pulldown-menu

Je kunt geen pulldown-menu maken met alleen het gebruik van HTML. Je hebt of een stukje JavaScript nodig, of verwerking van formuliergegevens door een script op een server. Je kunt deze twee methoden ook combineren. Maar je moet je altijd afvragen of het gebruik van een pulldown-menu echt zinvol is. Vaak is een lijstje of een rijtje met gewone links gebruikersvriendelijker: de gebruiker overziet in één oogopslag de mogelijkheden, en het doel is gelijk duidelijk.

Met JavaScript

Een voorbeeld van een menu waarbij niet op een 'verzendknop' gedrukt hoeft te worden.

Deze code was hiervoor nodig:

001  <form name="nav">
002  <select name="SelectURL"
003   onChange="location=this.options[this.selectedIndex].value"
004  ><option value="pulldown.html" selected>Kies een item:
005   <option value="../index.html">Home
006   <option value="../faqs/index.html">FAQs
007   <option value="../artikelen/index.html">Artikelen
008   <option value="../contact.html">Suggesties
009   <option value="../colofon.html">Colofon
010   <option value="../zoeken.html">Zoeken
011  </select>
012  </form>

Ook werkend zonder JavaScript

Voor bezoekers die geen JavaScript hebben (ingeschakeld), kun je als 'backup' het formulier versturen naar een (gratis) webservice, bijvoorbeeld SelectURL van John S. Roberts.

Gebruik dan wel absolute URL's en een formulier met een verzendknop, zoals in het volgende voorbeeld:

001  <form action="http://www.uky.edu/cgi-bin/SelectURL"
002   method="post" name="nav2">
003  <select name="SelectURL"
004   onChange="location=this.options[this.selectedIndex].value"
005  ><option value="/faq/pulldown.html" SELECTED>Kies een item:
006   <option value="/faq/index.html">Home
007   <option value="/faq/faqs/index.html">FAQs
008   <option value="/faq/artikelen/index.html">Artikelen
009   <option value="/faq/contact.html">Suggesties
010   <option value="/faq/colofon.html">Colofon
011   <option value="/faq/zoeken.html">Zoeken
012  </select>
013  <input type="submit" value="Go!">
014  </form>

Meer tips

Als je de beschikking hebt over een eigen server, kun je de verwerking beter zelf doen. CGI-scripts daarvoor zijn makkelijk te vinden, bijvoorbeeld bij The CGI Resource Index.

Zie verder Navigational pulldown menus in HTML, het uitgebreide document waar deze pagina op gebaseerd is.