Handleiding HTML - Voorbeeld Formulieren

Formulier met zoekopdracht

Hierna zijn enkele voorbeelden van formulieren opgenomen, waarbij gebruik gemaakt wordt van servers welke dienen als zoekmachines 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 of nieuwsberichten waarin de opgegeven zoektermen voorkomen.

Door in de voorbeelden aan het FORM element het TARGET attribuut toe te voegen met de waarde "_blank", is ervoor gezorgd dat de respons van de zoekmachine wordt weergegeven in een nieuw venster (als de browser frames ondersteunt). Als je dat venster sluit, ben je weer terug in dit document.

Als eerste een voorbeeld van een formulier voor het versturen van een zoekopdracht naar de zoekmachine Yahoo. Dit is een eenvoudig formulier, dat alleen een veld heeft voor het invoeren van de zoekterm(en).
Omdat het CGI-script van Yahoo de complete zoekopdracht als onderdeel van de URI verwacht, heeft het METHOD attribuut van het FORM element de waarde "get".
Er wordt gebruikt gemaakt van het INPUT element voor het maken van het tekstveld en de knoppen "submit" en "reset".
De waarde van het NAME attribuut van het tekstveld is niet zelf gekozen, maar is gekoppeld aan het CGI-script dat de zoekopdracht uitvoert. De waarde van het SIZE attribuut, waarmee de lengte van het tekstveld wordt vastgelegd, is wel zelf bepaald.

<H2>Zoeken bij Yahoo</H2>

<FORM METHOD="get"
ACTION="http://search.yahoo.com/bin/search" TARGET="_blank">
Voer de zoekterm(en) in en klik op Zoeken:<BR>
<BR>
<INPUT TYPE="text" SIZE="40" NAME="p"><BR>
<BR>
<INPUT TYPE="reset" VALUE="Beginwaarden">
<INPUT TYPE="submit" 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 Yahoo

Het tweede voorbeeld betreft een formulier voor het versturen van een zoekopdracht naar de zoekmachine Altavista. Hierbij kan worden aangegeven wat de taal is van de zoekterm(en) en naar wat voor soort documenten gezocht moet worden (webpagina's, afbeeldingen, etc.).
Ook het CGI-script van Altaviste verwacht de complete zoekopdracht als onderdeel van de URI. Het METHOD attribuut van het FORM element het daarom weer de waarde "get".
Voor de goede werking van het CGI-script is een verborgen invoer nodig: het TYPE attribuut van het INPUT element met de waarde "hidden".
Net als op de eigen zoekpagina van Altavista maken we voor de taal gebruik van een uitschuifkeuzelijst. De waarden van het NAME attribuut van het SELECT element en het VALUE attribuut van de OPTION elementen zijn gekoppeld aan het CGI-script, waarmee de zoekopdracht wordt uitgevoerd door de zoekmachine. Met behulp van het SELECTED attribuut is aangegeven welke mogelijkheid de standaard is.
Het soort document waarnaar moet worden gezocht, wordt bepaald met behulp van keuzerondjes. De waarden van de attributen NAME en VALUE van het INPUT element zijn weer gekoppeld aan het CGI-script. Met behulp van het CHECKED attribuut is de standaardkeuze vastgelegd.
Ook voor het tekstvak is de waarde van het NAME attribuut gekoppeld aan het CGI-script.

<H2>Zoeken bij Altavista</H2>

<FORM METHOD="get"
ACTION="http://www.altavista.digital.com/cgi-bin/query"
TARGET="_blank">
<INPUT TYPE="hidden" NAME="pg" VALUE="q">
Kies een taal voor de zoekterm(en): 
<SELECT NAME="kl">
<OPTION VALUE="XX" SELECTED>iedere taal</OPTION>
<OPTION VALUE="zh">Chinees</OPTION>
...
<OPTION VALUE="sv">Zweeds</OPTION>
</SELECT><BR>
<BR>
Zoek naar: 
<INPUT TYPE="radio" NAME="stype" VALUE="stext" CHECKED> Webpagina's 
<INPUT TYPE="radio" NAME="stype" VALUE="simage"> Afbeeldingen 
<INPUT TYPE="radio" NAME="stype" VALUE="svideo"> Video
<INPUT TYPE="radio" NAME="stype" VALUE="saudio"> Audio<BR>
<BR>
Voer de zoekterm(en) in en klik op Zoeken:<BR>
<BR>
<INPUT TYPE="text" SIZE="40" MAXLENGTH="800" NAME="q"><BR>
<BR>
<INPUT TYPE="reset" VALUE="Beginwaarden">
<INPUT TYPE="submit" VALUE="Zoeken">
</FORM>

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

Zoeken bij Altavista

Het derde voorbeeld betreft een formulier voor het versturen van een zoekopdracht naar de zoekmachine Vindex. In dit voorbeeld kan met behulp van aankruisvakjes een aantal opties worden vastgelegd, die bepalen hoe de zoekresultaten worden weergegeven, of bij het klikken op een hyperlink een nieuw venster geopend moet worden en of gezocht moet worden naar woorden die erg op het opgegeven woord lijken (fuzzyness).
Bij Vindex heeft het METHOD attribuut van het FORM element de waarde "post".
Voor het tekstvak is de waarde van het NAME attribuut van het INPUT element gekoppeld aan het CGI-script.
Ook voor de aankruisvakjes zijn de waarden van de attributen NAME en VALUE gekoppeld aan het CGI-script. Met behulp van het CHECKED attribuut zijn de meeste aankruisvakjes reeds van een vinkje voorzien (bij de optie 'Sites in nieuw venster' is dat niet gedaan, omdat de zoekresultaten ook al in een nieuw venster worden weergegeven).

<H2>Zoeken bij Vindex</H2>

<FORM METHOD="post"
ACTION="http://www.vindex.nl/doorzocht/nederland" TARGET="_blank">
Voer de zoekterm(en) in en klik op Zoeken:<BR>
<BR>
<INPUT TYPE="text" SIZE="40" NAME="in"><BR>
<BR>
Opties:<BR>
<INPUT TYPE="checkbox" NAME="resume" VALUE="on" CHECKED> Samenvatting
<INPUT TYPE="checkbox" NAME="ord1" VALUE="on" CHECKED> 1 URL per domein<BR>
<INPUT TYPE="checkbox" NAME="window" VALUE="on"> Sites in nieuw venster
<INPUT TYPE="checkbox" NAME="fuzzy" VALUE="on" CHECKED> Fuzzyness<BR>
<BR>
<INPUT TYPE="reset" VALUE="Beginwaarden">
<INPUT TYPE="submit" VALUE="Zoeken">
</FORM>

De werking van het formulier kun je weer uitproberen door in het tekstvak een zoekopdracht in te voeren, zonodig de opties te wijzigen en vervolgens op de knop Zoeken te klikken.

Zoeken bij Vindex

Terug naar Formulieren