Form


HTML form element

HTML-formulieren worden op een webpagina geplaatst met behulp van de tag <form>. Je kunt een formulier toevoegen aan een bestaand HTML-document of je kunt een nieuw document opzetten speciaal voor dat formulier. Je begint het formulier met <form> en helemaal aan het einde van het formulier plaats je de eind tag </form>.

Het <form> element wordt gebruikt om een HTML-formulier te maken en het ziet er als volgt uit:

<form name="formulier naam" action="script url" method="get of post">
    Hier komen formulierelementen zoals input, textarea etc.
</form>


Form attributen

De meest gebruikte form attributen zijn:
name method action target enctype

Tip De twee belangrijkste attributen bij de <form> tag zijn method en action. Deze twee bepalen hoe de informatie uit het formulier naar de server wordt verstuurd.


Name attribuuttop

Het name attribuut specificeert de naam van een formulier, dit is alleen nodig voor het verwijzen vanuit scripts. Indien je werkt met meerdere formulieren is het ook makkelijk om een naam te geven zodat je je formulieren kan onderscheiden van elkaar.

VoorbeeldVoorbeeld:
<form name="tForm"> <!-- We hebben het formulier de naam "tForm" gegeven -->


Method attribuuttop

De method geeft aan hoe de gegevens naar de server worden verzonden als je het formulier indient. Method heeft twee mogelijke waarden: post en get. Welke waarde moet worden opgenomen, hangt af van het gebruikte script op de server. Get is de standaardwaarde als er geen andere methode is opgegeven.

  • GET - Hiermee worden de gegevens van het formulier via de URL verzonden.

Hieronder is een voorbeeld van een URL met get gegevens voor de voor- en achternaam:

http://www.mijnsite.nl/formulieren.php?voornaam=suzan&achternaam=muis

Get gegevens zijn afkomstig van de URL zelf. De start van get data wordt aangeduid met een vraagteken ( ? ).
De naam van het veld wordt gevolgd door een gelijkteken ( = ) en de waarde van het veld. Elk veld wordt vervolgens gescheiden door een ampersand ( & ).

VoorbeeldVoorbeeld:
<form method="get" action="forms/get.php" target="_blank">
   <p>Voornaam:   <input type="text" name="voornaam" size="20"></p>
   <p>Achternaam: <input type="text" name="achternaam" size="20"></p>
   <p><input type="submit" value="Verzenden"></p>
</form>

  • POST - Hiermee worden de gegevens van het formulier verzonden zonder dat ze in de URL staan.

VoorbeeldVoorbeeld:
<form method="post" action="forms/post.php" target="_blank">
   <p>Voornaam:   <input type="text" name="voornaam" size="20"></p>
   <p>Achternaam: <input type="text" name="achternaam" size="20"></p>
   <p><input type="submit" value="Verzenden"></p>
</form>

Tip De meeste HTML-programmeurs geven de voorkeur aan post, omdat er meer informatie op een betere manier mee verzonden kan worden dan met get.

Hieronder hebben we een ander voorbeeld, ook bij dit formulier wordt gebruik gemaakt van post.

VoorbeeldVoorbeeld:
<form method="post" action="forms/postvoorbeeld.php"></form>


Action attribuuttop

Action geeft de naam van de bron die de browser moet aanroepen als reactie op het insturen van het formulier. Meestal verwijst de URL naar een CGI-script, PHP-script of een andere uitvoerbare dienst op de server. In het kort, met action kan je aangeven waar de informatie uit het formulier naar toe moet worden verzonden.

• Verwijzen naar een andere pagina:

<form method="post" action="voorbeeld.php">

• Verwijzen naar een pagina op een andere website:

<form method="post" action="http://www.voorbeeld.nl/voorbeeld.php">

• Verwijzen naar een e-mail adres:

<form method="post" action="mailto:naam@voorbeeld.nl">

• Verwijzen naar een pagina in een andere map:

VoorbeeldVoorbeeld:
<form method="post" action="forms/actionvoorbeeld.php"></form>


Target attribuuttop

Het target attribuut specificeert in welk venster de link (url) van het formulier geladen moet worden.
<form method="post" action="voorbeeld.php" target="_blank">

Het doelvenster kan één van de volgende waarden aannemen target="waarde"

WaardeBeschrijving
_selfLaadt de link in hetzelfde venster van de browser.
_blanklaadt de link in een nieuw venster van de browser.
_parentLaadt de link in de bron van het document.
_topLaadt de link in het hele venster.

Tip De twee belangrijkste waarden zijn de bovenste twee, (target="_self" en target="_blank").
De _self waarde is over het algemeen de standaard. Het laadt elke nieuwe pagina in het huidige browservenster, terwijl de _blank waarde een nieuw venster opent.

VoorbeeldVoorbeeld:
<form method="post" action="forms/targetvoorbeeld.php" target="_blank">


Enctype attribuuttop

Het doel van het attribuut enctype is om aan te geven hoe de gegevens in het formulier moeten worden gecodeerd voordat het wordt verzonden naar de locatie dat is aangegeven in het attribuut action. Bij de post methode bevat dit attribuut het Content Type of Internet Media Type (MIME), dat het formaat van de gegevens aangeeft.

  • ENCTYPE kan één van de volgende waarden bevatten:

<enctype="application/x-www-form-urlencoded | multipart/form-data | text/plain">

WaardeBeschrijving
application/x-www-form-urlencoded Dit is de standaardwaarde die de meeste formulieren gebruiken.
mutlipart/form-data Deze waarde is nodig wanneer er gebruik gemaakt wordt van formulieren waar je bestanden kan uploaden.
text/plain Spaties (ruimten) worden omgezet naar "+" symbolen, speciale tekens worden niet gecodeerd


Voorbeeld: enctype="application/x-www-form-urlencoded"

Als je geen gebruik maakt van het attribuut enctype dan is de standaard waarde van dit attribuut "application/x-www-form-urlencoded". Voorbeeld hieronder hebben we enctype weggelaten. Dit is ook het meest voorkomende methode, in de meeste gevallen laat je enctype ook weg.

<form method="post" action="cgi-bin/voorbeeld.pl">


Voorbeeld: enctype="multipart/form-data"

Deze waarde kan worden gebruikt om bestanden zoals een foto, video enz. te versturen via een formulier.

<form method="post" enctype="multipart/form-data" action="cgi-bin/upload.pl">
   <input type="file"><input type="submit" value="Bestand uploaden">
</form>

upload  


Voorbeeld: enctype="text/plain"

Het is heel eenvoudig om een webformulier op te zetten, zonder dat het een script nodig heeft om het te verwerken. Door gebruik te maken van de eenvoudige "mailto" code in het attribuut action, kan je een formulier opzetten, zodat de resultaten automatisch per e-mail wordt verzonden naar een adres dat jezelf opgeeft.

VoorbeeldVoorbeeld:
<form action="mailto:naam@voorbeeld.nl" enctype="text/plain" method="post">
   <p>Naam: <input name="naam" type="text" size="30"></p>
   <p>Email: <input name="email" type="text" size="30"></p>
   Bericht:<br /><textarea name="bericht" cols="40" rows="8"></textarea>
   <p><input type="submit" name="Submit" value="Verzenden">
   <input type="reset" value="Reset" name=""></p>
</form>