Kies een thema:

Cursus HTML

Beginner


Gevorderde


Appendix


    Informatie


    Referenties


    Links


    10 Formulieren


    » Inhoudstafel
    10.1 Inleiding
    10.2 form element
    10.3 Verzenden via e-mail

    10.1 Inleiding

    Formulieren zijn onmisbaar voor een website, op bijna elke website vind je wel formulieren. Er zijn verschillende toepassingen die je kan maken met formulieren:

    • Formulieren kunnen dienen om de webmaster te contacteren van de website.
    • Formulieren worden gebruikt om een bericht op een pagina te plaatsen (denk aan een forum, gastenboek, ...).
    • Formulieren kunnen gebruikt wordt om een zoekopdracht uit te voeren, en iets terug te krijgen van een databank.
    • Formulieren kunnen informatie van de bezoeker vragen (bijv. naam) en deze met een JavaScript achteraf tonen op de pagina.

    In dit hoofstuk richten we ons vooral op hoe formulieren samen gesteld worden. De verwerking van zo'n formulier gebeurt meestal in een scripttaal zoals PHP, ASP.NET, JSP, ... In HTML wordt enkel de opmaak van het formulier verwezelijkt.

    10.2 form element

    Het form element bevat alle gegevens die tot het formulier behoren. Tekstvelden, knoppen, keuzevakjes, etc worden tussen de <form> en </form> tags geplaatst. Het form element kent één verplicht attribuut action. Dit attribuut bepaalt naar waar de data wordt gestuurd wanneer de submit knop wordt uitgevoerd.

    Het attribuut method specificeert welke HTTP-methode gebruikt wordt bij het versturen van de data. Dit kan of te wel get zijn of post.

    get
    De data uit het formulier worden via de URI verstuurd naar de URI welke via het action attribuut is gespecificeerd. De URI ziet er als volgt uit: URI?naam=waarde&naam=waarde. Telkens de naam van het element gevolgt door zijn waarde.
    post
    de data uit het formulier wordt opgenomen in de body van een bericht en wordt verzonden naar de URI welke via het action attribuut is gespecificeerd.
    De standaardwaarde, welke wordt aangehouden als het method attribuut niet is gespecificeerd, is get.

    Wanneer de verwerking van het formulier op een nieuwe pagina moet gebeuren, moet je het target attribuut de waarde _blank geven.

    Hieronder een voorbeeld van een formulier waar de data wordt meegegeven via post naar een PHP pagina. Voor wie geïnteresseerd is hoe de PHP pagina er uit ziet, zie deze pagina.

    <form method="post" action="http://www.cursushtml.be/afbeeldingen/voorbeeld1Formulier.php" target="_blank">
  <p>Typ uw voornaam in:</p>
  <input type="text" name="voornaam" /><br />
 
  <p>Typ uw achternaam in:</p>
  <input type="text" name="achternaam" /><br />
 
  <input type="submit" name="verzenden" value="verzenden" />
</form>
    Resultaat:

    Typ uw voornaam in:


    Typ uw achternaam in:




    » Voorbeelden:

    10.3 Verzenden via e-mail

    Om de data van het formulier rechtstreeks door te sturen naar een e-mailadres, zonder gebruik te maken van een script, plaats je een mail-URI in het action attribuut.

    <form method="post" action="mailto:naam@provider.be">
  ...
</form>

    Het bericht van de e-mail van het voorbeeld onder deze paragraaf ziet er als volgt uit wanneer je "Joel" en "Verheyen" intypt als waarden.

    Resultaat:
    voornaam=Joel&achternaam=Verheyen&verzenden=verzenden

    Zoals je opmerkt is dit niet zo duidelijk en gebruiksvriendelijk. Tegenwoordig wordt er dan ook bijna geen gebruik meer gemaakt van deze techniek, maar wordt er gebruik maakt van een serverside script (PHP, JSP, ASP.NET, ...) die de e-mail verstuurd via de server. De opmaak van het bericht kan op die manier naar eigen wens opgesteld worden.


    » Voorbeelden:

    « Tabellen    input element »