Handleiding HTML - Formulieren - Voorbeeld zoekformulier

HTML		Formulieren

Handleiding HTML Inhoud HTML | Inhoud CSS | Trefwoordenregister | Begin

Voorbeeld zoekformulier

Hier is een voorbeeld opgenomen van een formulier, dat gebruik maakt van een server welke dient als zoekmachine op het Web. Als je in het formulier één of meer zoektermen opgeeft, krijg je van de zoekmachine een HTML-document terug gestuurd. Daarop staan hyperlinks naar documenten waarin de opgegeven zoektermen voorkomen.

Voor het versturen van een zoekopdracht maken we gebruik van de zoekmachine Google. In eerste instantie gaat het om een eenvoudig formulier, dat alleen een veld heeft voor het invoeren van de zoekterm(en).

Omdat het script van Google de complete zoekopdracht als onderdeel van de URI verwacht, heeft het METHOD attribuut van het FORM element de waarde "get". Door aan het FORM element ook het TARGET attribuut toe te voegen met de waarde "_blank", is er in dit geval voor gezorgd dat de respons van de zoekmachine wordt weergegeven in een nieuw venster. Als je dat venster sluit, ben je weer terug in dit document.
Er wordt gebruikt gemaakt van het INPUT element voor het maken van het tekstveld en de knop voor verzenden. Gezien de eenvoud van het formulier is geen knop opgenomen voor het herstellen van de beginwaarden.
De waarden van het NAME attribuut van het tekstveld en de knop zijn niet zelf gekozen, maar gekoppeld aan het script dat de zoekopdracht uitvoert. De waarde van het SIZE attribuut, waarmee de lengte van het tekstveld wordt vastgelegd, is wel zelf bepaald.

<P><IMG SRC="google.gif" ALT="Google" WIDTH="75" HEIGHT="32" BORDER="0" ALIGN="right"></P> <H2>Zoeken bij Google</H2> <FORM METHOD="get" ACTION="http://www.google.nl/search" TARGET="_blank"> Voer de zoekterm(en) in en klik op Zoeken:<BR> <BR> <INPUT TYPE="text" NAME="q" SIZE="40">   <INPUT TYPE="submit" NAME="btnG" VALUE="Zoeken"> </FORM>

Hieronder wordt het formulier weergegeven. Je kunt de werking uitproberen door in het tekstvak een zoekopdracht in te voeren en vervolgens op de knop Zoeken te klikken.

Zoeken bij Google

Het script waarmee Google werkt, kent een groot aantal extra mogelijkheden. Als voorbeeld worden er een tweetal aan het formulier toegevoegd. Met de eerste kan de bezoeker aangegeven of het hele web doorzocht moet worden, of alleen Nederlandse pagina's. Met de tweede kan worden vastgelegd hoeveel resultaten (hyperlinks) per keer moeten worden weergegeven.

Met keuzerondjes wordt bepaald waar moet worden gezocht. De waarden van de attributen NAME en VALUE van het INPUT element zijn gekoppeld aan het script. Met behulp van het CHECKED attribuut is de standaardkeuze vastgelegd.
De keuze van het aantal resultaten wordt bepaald met behulp van een keuzelijst. De waarde van het NAME attribuut van het SELECT element is weer gekoppeld aan het script. Bij de waarden van het VALUE attribuut van de OPTION elementen is uitgegaan van de mogelijkheden die Google op de eigen site ook biedt. Het SELECTED attribuut bepaalt welke mogelijkheid de standaard is.

<P><IMG SRC="google.gif" ALT="Google" WIDTH="75" HEIGHT="32" BORDER="0" ALIGN="right"></P> <H2>Zoeken bij Google</H2> <FORM METHOD="get" ACTION="http://www.google.nl/search" TARGET="_blank"> Zoek in: <INPUT TYPE="radio" NAME="lr" VALUE="">het web <INPUT TYPE="radio" NAME="lr" VALUE="lang_nl" CHECKED>Nederlandse pagina's <BR> Aantal resultaten per keer: <SELECT NAME="num"> <OPTION VALUE="10">10</OPTION> <OPTION VALUE="20">20</OPTION> <OPTION VALUE="30" SELECTED>30</OPTION> <OPTION VALUE="50">50</OPTION> <OPTION VALUE="100">100</OPTION> </SELECT><BR> <BR> Voer de zoekterm(en) in en klik op Zoeken:<BR> <BR> <INPUT TYPE="text" NAME="q" SIZE="40">   <INPUT TYPE="submit" NAME="btnG" VALUE="Zoeken"> </FORM>

Hieronder wordt het formulier weergegeven. Ook nu kun je de werking uitproberen door in het tekstvak een zoekopdracht in te voeren, zo nodig andere keuzemogelijkheden te selecteren en vervolgens op de knop Zoeken te klikken.

Zoeken bij Google

Vervolg: Voorbeeld vragenformulier

Inhoud onderdeel | Inhoud HTML | Inhoud CSS | Trefwoordenregister | Begin