Als u graag feedback van uw bezoekers wilt, of bijvoorbeeld zijn/haar naam wil weten dan kunt u bijvoorbeeld vragen aan diegene om een mailtje te sturen. Hierover heb ik het al even gehad bij links, maar er kan ook gebruik worden gemaakt van zogenoemde formulieren. Hiermee stelt u enkele vragen waarbij de gebruiker/bezoeker deze simpel beantwoord door deze in te vullen. Daarna worden deze verstuurd door op een verstuur button te klikken. U ontvangt deze netje in een email in uw mailbox.

<FORM>

Als eerste beginnen we met de label <FORM>. Hier vertellen wij wat er met het formulier gaat gebeuren, dus bijvoorbeeld vertellen dat het verzonden moet worden met email. Het wordt dus per email verzonden naar het opgegeven email-adres. Mocht u nu beschikking hebben over CGI bij uw provider (bij Cyberdots krijgt u dit gratis bij alle pakketten), dan kunt u ook een URL opgeven waarna de bezoeker toe gestuurd wordt na het versturen van het formulier. Dit kunt u het beste bij uw provider navragen, want het is niet altijd mogelijk.

We gaan bij het onderstaande formulier ervan uit dat er geen gebruik wordt gemaakt van CGI. Daarom beginnen we met het opmaken van het form-label:
<FORM NAME="reageer-formulier" ACTION="mailto:htmlcursus@cyberdots.nl" METHOD="POST">. Het formulier wordt uiteraard afgesloten met </FORM>. Hier tussen kunnen de volgende mogelijkheden (door elkaar) worden gebruikt:

<TEXTAREA></TEXTAREA>
Deze gebruikt u om tekstvelden te defineren.

<SELECT></SELECT>
Met deze functie krijgt u een pop-up menu of een lijst met vooraf gegeven elementen.

<INPUT TYPE="TEXT">
Met INPUT geeft u aan welk invoer er zal volgen, er zijn verschillende mogelijkheden. Dit is een voorbeeld van een standaard tekst invoer.

<TEXTAREA></TEXTAREA>

Gebruik deze label om tekstvelden te defineren. U geeft een unieke naam op door de attribuut NAME=xxxx toe te voegen. Hier kunt ook de rijen en de kolommen opgeven door bv: COLS="40" ROWS="3". Daarbij is het ook mogelijk om al een tekst vooraf in te vullen. Deze zet u tussen eide labels. Een voorbeeld:

<FORM NAME="voorbeeld 1" ACTION="mailto:webdesign@movieunlimited.demon.nl" METHOD="post">
<TEXTAREA NAME="test_tekstveld" ROWS=4 COLS=40>tekstveld</TEXTAREA>
</FORM>

En ziet er als volgt uit:

<SELECT></SELECT>

Met deze functie defineert u een soort POP-UP of een keuzeveld, waarin je uit verschillende elementen kunt kiezen. Buiten de naam kunt u nog meer attributen gebruiken: SIZE voor hoeveel opties je de bezoeker laat zien, anders wordt het een vel met een scroll-bar. MULTIPLE waarmee meer selectie-mogelijkheden mogelijk zijn, er verschijnt dan een scroll-bar. VALUE, waarmee je de opties opgeeft. En SELECTED waarmee je de standaard voorkeur opgeeft. Het volgende voorbeeld geeft een POP-UP menu waaruit je een keuze moet maken:

<SELECT NAME="selektie" SIZE="1">
       <OPTION VALUE="keuze 1">keuze 1
       <OPTION VALUE="keuze 2">keuze 2
       <OPTION VALUE="keuze 3">keuze 3
       <OPTION VALUE="keuze 4">keuze 4
</SELECT>

En ziet er als volgt uit:

Maar het is ook mogelijk om uw bezoeker een keuzelijst voor te schotelen door MULTIPLE toe te voegen:

<SELECT NAME="selektie" SIZE="2" MULTIPLE>
       <OPTION VALUE="keuze 1">keuze 1
       <OPTION VALUE="keuze 2">keuze 2
       <OPTION VALUE="keuze 3">keuze 3
       <OPTION VALUE="keuze 4">keuze 4
</SELECT>

En ziet er als volgt uit:

<INPUT TYPE=x>

Input is een optie waarbij informatie op de input wordt opgegeven. U kunt (buiten de naam) ook de volgende attributen gebruiken:

SIZE voor de grootte van het veld.
MAXLENGTH voor het maximale aantal karakters die mogen worden ingevoerd.
VALUE om een waarde vooraf in te vullen, welke de bezoeker kan wijzigen. (alleen bij tekst of bij paswoord types)
CHECKED om een checkbox of een radio-button aan te zetten en
TYPE voor het type invoer.

Dit wordt makkelijker door alle mogelijkheden te laten zien:

<INPUT TYPE="tekst" NAME="email" SIZE="15" MAXLENGTH="12" VALUE="emailadres">
Resulteert in:

<INPUT TYPE="password" NAME="paswoord" SIZE="15" MAXLENGTH="12" VALUE="paswoord">
Resulteert in:

<INPUT TYPE="checkbox" NAME="checkbox1" VALUE="checkbox_waarde1">Een ongeselecteerde checkbox
<INPUT TYPE="checkbox" NAME="checkbox2" VALUE="checkbox_waarde2" CHECKED>Een geselecteerde checkbox
Resulteert in:
Een ongeselecteerde checkbox Een geselecteerde checkbox

<INPUT TYPE="radio" NAME="keuze" CHECKED VALUE="Ja">Ja
<INPUT TYPE="radio" NAME="keuze" VALUE="Nee">Nee
Resulteert in: (let erop dat de NAME idem is, omdat anders beide buttons niet op elkaar reageren.
Ja Nee

<INPUT TYPE="reset">
Resulteert in een resetknop:

<INPUT TYPE="submit">
Resulteert in een verstuurknop.

De twee laatste voorbeelden zouden nog uitgebreid kunnen worden door de standaard knoppen te veranderen in plaatjes. Het is dus mogelijk om zelf en button te maken die er wat leuker uitziet. Dit gebeurt door het als volgt in te vullen:

<INPUT TYPE="image" SRC="plaatje.gif">
Resulteert in een verstuurknop.

Voorbeeld pagina

Tot slot vindt u hieronder een formulier die de bezoeker enkele vragen stelt over deze site, waarbij de bezoeker enkele vragen moet beantwoorden en enkele keuzes moet maken. U vind hieronder de code. Hier is gebruik gemaakt van tables, zo kunt u goed zien dat label goed te combineren zijn.

Klik hier voor het resultaat.

<TR><TD><font size=2>Mag ik je E-mailadres ?</TD>
<TD><input type="text" size="30" maxlength="50" name="E-mailadres"></TD></TR>

<TR><TD><font size=2>Als je al een homepage hebt, wil je hier je URL vermelden ?</TD>
<TD><input type="text" size="30" maxlength="50" name="URL Homepage"></TD></TR>

<TR><TD><font size=2>Hoe heb je deze cursus gevonden? Via welke site/URL ?</TD>
<TD><input type="text" size="30" maxlength="50" name="Hoe hier gekomen"></TD></TR>

<TR><TD><font size=2><B>Over de cursus zelf:</TD></TR>

<TR><TD><font size=2>Vond je de cursus duidelijk ?</TD><TD>

<SELECT NAME="Duidelijkheid cursus"><OPTION VALUE="">Maak een keuze
<OPTION VALUE="Ja, heel duidelijk">Ja, heel duidelijk
<OPTION VALUE="Ja, maar soms wat onduidelijk">Ja, maar soms wat onduidelijk
<OPTION VALUE="Ja">Ja
<OPTION VALUE="Ging wel">Ging wel
<OPTION VALUE="Nee, absoluut niet">Nee, absoluut niet
<OPTION VALUE="Nee, maar ik vond het niet leuk">Nee, maar ik vond het niet leuk
<OPTION VALUE="Geen mening">Geen mening
</SELECT></TD></TR>

<TR><TD><font size=2>Wat dit de eerste keer dat je bezig was met HTML ?</TD><TD><font size=2>
<INPUT TYPE="radio" NAME="1e keer met HTML" VALUE="Ja"> Ja
<INPUT TYPE="radio" NAME="1e keer met HTML" VALUE="Nee"> Nee</TD></TR>

<TR><TD><font size=2>Heb je wat van de cursus geleerd ?</TD><TD><font size=2>
<INPUT TYPE="radio" NAME="Van de cursus geleerd" VALUE="Ja"> Ja
<INPUT TYPE="radio" NAME="Van de cursus geleerd" VALUE="Nee"> Nee</TD></TR>

<TR><TD><font size=2>Ga je er gebruik van maken ?</TD><TD><font size=2>
<INPUT TYPE="radio" NAME="Kennis gebruiken" VALUE="Ja"> Ja
<INPUT TYPE="radio" NAME="Kennis gebruiken" VALUE="Nee"> Nee</TD></TR>

<TR><TD><font size=2>Heb je ook geoefend tijdens de cursus ?</TD><TD><font size=2>
<INPUT TYPE="radio" NAME="Geoefend tijdens de cursus" VALUE="Ja"> Ja
<INPUT TYPE="radio" NAME="Geoefend tijdens de cursus" VALUE="Nee"> Nee</TD></TR>

<TR><TD><font size=2>Ik zal een pagina maken met daarin de homepage's die zijn gemaakt naar aanleiding of met behulp van deze cursus. Als jij een pagina hebt gemaakt, wil je deze dan E-mailen naar ons ?<BR>Dit kan je altijd later E-mailen of versturen door middel van dit formulier.</TD>
<TD><font size=2>
<INPUT TYPE="radio" NAME="E-mailt URL van homepage" VALUE="Ja"> Ja
<INPUT TYPE="radio" NAME="E-mailt URL van homepage" VALUE="Nee"> Nee</TD></TR>

<TR><TD><font size=2>Wil je op de hoogte blijven van HTML, door middel van regelmatig een nieuwsbrief per E-mail ?</TD>
<TD><font size=2>
<INPUT TYPE="radio" NAME="Op de hoogte blijven" VALUE="Ja"> Ja
<INPUT TYPE="radio" NAME="Op de hoogte blijven" VALUE="Nee"> Nee</TD></TR>

<TR><TD><font size=2>Wat voor cijfer wil je de cursus geven (1 tot 10) ?<BR>1 is bar slecht en 10 is uitstekend:</TD>
<TD><SELECT NAME="Cijfer voor cursus"><OPTION VALUE="">Kies...
<OPTION VALUE="1">1
<OPTION VALUE="2">2
<OPTION VALUE="3">3
<OPTION VALUE="4">4
<OPTION VALUE="5">5
<OPTION VALUE="6">6
<OPTION VALUE="7">7
<OPTION VALUE="8">8
<OPTION VALUE="9">9
<OPTION VALUE="10">10
</SELECT></TD></TR>

<TR><TD><font size=2>Ruimte voor op- en/of aanmerken:</TD>
<TD><textarea name="op- en/of aanmerkingen" rows="2" cls="30"></textarea></TD></TR>

</TABLE>
<p><input type="submit" value="verstuur formulier">
<input type="reset" value="nee, opnieuw"></p>

</form>