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

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 attribuut

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.

---

Method attribuut

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.site.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 ( & ).

POST

-

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

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.

---

Action attribuut

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="vb.php">

Verwijzen naar een pagina op een andere website:

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

Verwijzen naar een e-mail adres:

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

Verwijzen naar een pagina in een andere map:

Target attribuut

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"

Waarde	Beschrijving
_self	Laadt de link in hetzelfde venster van de browser.
_blank	Laadt de link in een nieuw venster van de browser.
_parent	Laadt de link in de bron van het document.
_top	Laadt de link in het hele venster.

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.

---

Enctype attribuut

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">

Waarde	Beschrijving
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>

---

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.

---

---