Cursus HTML - deel 8: formulieren

Trefwoorden: HTML, website, cursus, formulieren, forms, tekstveld, tekstvak, wachtwoordveld, verzendknop, wisknop

1. Inleiding


Op het internet ben je vast en zeker al eens formulieren tegengekomen. Voor bouwers van een website is dat één van de gemakkelijkste manieren om informatie van de gebruikers te verkrijgen. De gebruiker vult enkele tekstvakken in, maakt zijn keuze uit een keuzelijst, via keuzerondjes, ... en klikt op de "verzenden"-knop. Het formulier wordt daarna verwerkt en de webmaster ontvangt de informatie van de gebruiker.
De formulieren zelf worden opgemaakt in HTML, de verwerking ervan kan via 2 manier gebeuren:

  • Client-side: Een extern mailprogramma zoals (Mozilla Thunderbird, Microsoft Outlook, ...) verzendt de gegevens van het formulier via het standaard mailaccount van het programma. Als er een geen mailaccount is gedefinieerd zal er niets gebeuren
  • Server-side: Een formulier kan ook server-side verzonden worden. De server zal de gegevens van het mailformulier verwerken en verzenden naar het opgegeven emailadres. Hiervoor wordt een server-side taal als PHP, ASP, JSP, ... gebruikt.

De beste manier is om via een server-side taal de verzending te doen. Je kan zo meer controle uitoefenen op je formulier en je mailbericht.
Omdat beide mogelijkheden niets te maken hebben met HTML worden ze in deze cursus niet behandeld. Onthou wel dat je HTML nodig hebt om een formulier op te bouwen, dus het is noodzakelijk om er iets van te kennen als je later met een server-side taal gaat werken :).

2. Soorten formuliervelden


HTML heeft veel verschillende mogelijkheden voor formulieren zoals tekstvelden, keuzerondjes, keuzelijsten, .... Hier vind je een opsomming van de meeste mogelijkheden:


  • Een tekstveld
    http://www.multidesk.be/bijlage/ebf283172d3dd5be5662046aae284105.jpg

  • Een wachtwoordveld
    http://www.multidesk.be/bijlage/f51a8dc8a7ceaee0ba547f37bcf7ad3c.jpg

  • een tekstvak
    http://www.multidesk.be/bijlage/b0358eca22447de663dc978d285abf50.jpg

  • keuzerondjes
    http://www.multidesk.be/bijlage/512f1c1d6726ead539adf6e7e0b62b8d.jpg

  • selectievakjes
    http://www.multidesk.be/bijlage/366e19cd326cd0613d6dd0be82241d71.jpg

  • verzendknop / wisknop
    http://www.multidesk.be/bijlage/68afa26f6c91b8e7d52fd7208365e511.jpg

  • een uploadveld
    http://www.multidesk.be/bijlage/c4c3927b74684e87135ba56cac98d077.jpg

  • een keuzelijst
    http://www.multidesk.be/bijlage/edd26aa737097b4844c3f9886c4ba7c6.jpg



In dit artikel gaan we de eerste 3 mogelijkheden, verzendknop en de wisknop. Dit zijn de gemakkelijkste :). In een volgend artikel bespreken we dan de keuzerondjes, selectievakjes, de keuzelijst en het uploadveld, omdat deze iets moeilijker zijn.

3. Een formulier


3.1. De basis

Een formulier begin je traditioneel met de form-tag en op het einde sluit je die tag ook weer af. Tussen de 2 tags komen alle onderdelen van het formulier. Het is dus ook mogelijk om meerdere formulieren op een pagina te plaatsen, de browser houdt beide formulieren dan uit elkaar door de form-tag. Tussen de form-tags komen dus elementen van je formulier, maar het is ook mogelijk om opmaak in je formulier aan te brengen, zoals een tabel om alles beter te positioneren of vette tekst om het één en ander te benadrukken, ....

3.2. Attributen bij de form-tag

3.2.1. Name

Bij de form-tag zijn er ook enkele noodzakelijk attributen nodig.

Ten eerst heb je het name-attribuut. De waarde hiervan is de naam die je wil geven aan het formulier. Dit kan later belangrijk zijn om vanuit scripts het formulier aan te spreken:
CODE
  1. <form name="registratie">
  2.  
  3. ...
  4.  
  5. </form>


3.2.2. Method

Met method geef je aan hoe de informatie, verkregen door het formulier, verzonden moet worden. Method kan slechts twee waarden hebben "get" en "post". Met get wordt de informatie in de URL weergegeven, via een andere taal zoals PHP kan die informatie dan verwerkt en gebruikt worden. Je zal dit hoogstwaarschijnlijk al gezien hebben als je aan het surfen was op het internet, dit is een voorbeeld van een URL waarin get gebruikt wordt:
CODE
  1. pagina.html?naam=Simon&interesse=HTML

Een nadeel van get is dat het minder geheugen beschikbaar heeft. Er kan meer informatie verzonden worden via post. Bij post wordt de informatie onzichtbaar voor de gebruiker doorgegeven aan de doelpagina, dit is doorgaans ook veiliger.

Dit is een voorbeeld van het gebruik van method met de post-methode. Voor de get-methode vul je gewoon "get" in.
CODE
  1. <form name="formulier" method="post">
  2.  
  3. ...
  4.  
  5. </form>


3.2.3. Action

Het laatste wat in de form-tag moet staan is het attribuut action. Hiermee geef je aan de browser door, wat hij met de informatie moet doen. Ofwel kan je een URL opgeven of een pad naar een pagina. Dan stuurt de browser de informatie door naar die pagina. Die pagina bevat andere code dan HTML en zorgt dan voor de verwerking van de informatie en eventueel voor het doormailen van de informatie. Zo gebeurt server-side verwerking.
CODE
  1. <form name="formulier" method="post" action="../pagina.php">
  2.  
  3. ...
  4.  
  5. </form>

Ofwel kan je een emailadres opgeven voorafgegaan door mailto:. Hiermee weet de browser dat er client-side verwerking moet gebeuren. Het formulier wordt dan verstuurd via een emailprogramma op de computer van de gebruiker. Daarbij kan er echter veel misgaan (zie Inleiding voor meer informatie).
CODE
  1. <form name="formulier" method="post" action="mailto:mailadres@provider.be">
  2.  
  3. ...
  4.  
  5. </form>


4. Een tekstveld


4.1. De basis


http://www.multidesk.be/bijlage/ebf283172d3dd5be5662046aae284105.jpg

Een tekstveld is een vakje van één regel waar korte informatie ingeplaatst kan worden zoals: een naam, een emailadres, woonplaats, ...

Bijna elk veld (uitgezonderd de keuzelijst en het tekstvak) in een HTML-formulier kan gemaakt worden met de input-tag. Om een ander veld te krijgen is er telkens een andere waarde nodig bij het attribuut type. Bij de input-tag is het type-attribuut dus verplicht!

Om een tekstveld te maken gebruik je "text" als waarde voor het type-attribuut.

Opgelet!:
De input-tag heeft geen afsluitende tag, dus sluiten we hem af op de speciale manier, namelijk met een "/>".

CODE
  1. <form name="formulier" method="post" action="../pagina.php">
  2.  
  3.         <input type="text" />
  4.  
  5. </form>


4.2. Attributen bij een tekstveld

4.2.1. Name

Met "name" geef je een naam aan je tekstveld. Dit is heel belangrijk voor de formulierverwerking, zonder naam kan je namelijk geen input van het veld verkrijgen.

CODE
  1. <form name="formulier" method="post" action="../pagina.php">
  2.  
  3.         <input type="text" name="voornaam" />
  4.  
  5. </form>



4.2.2. Size

Met size kan je de lengte van het tekstvak bepalen. Dit kan handig zijn omdat voor sommige informatie een lang vak nodig is, voor een emailadres bijvoorbeeld. Voor andere informatie is dan weer een korter veld nodig, voor een postcode bijvoorbeeld.
CODE
  1. <form name="formulier" method="post" action="../pagina.php">
  2.  
  3.         <input type="text" name="postcode" size="4" />
  4.  
  5. </form>


4.2.3. Maxlength

Met maxlength kan je de gebruiker een limiet opleggen voor het aantal tekens dat ingevuld mag worden. Geef je 10 als waarde van het attribuut, dan zal de gebruikers maar 10 tekens kunnen invoeren.

Dit is een goed voorbeeld van een veld, geschikt voor een Belgische postcode. Het vakje is 4 tekens lang en er kunnen slechts 4 tekens ingevuld worden:
CODE
  1. <form name="formulier" method="post" action="../pagina.php">
  2.  
  3.         <input type="text" name="postcode" size="4" maxlength="4" />
  4.  
  5. </form>


4.2.4. Value

Een laatste attribuut is value. Hiermee kun je al tekens in het tekstveld plaatsen alvorens de gebruiker iets ingevuld heeft. De browser plaats de waarde van value dan in het veld als het formulier geopend wordt. Dit kan handig zijn om nog wat extra informatie te geven
CODE
  1. <form name="formulier" method="post" action="../pagina.php">
  2.  
  3.         Vul je persoonlijke gegevens in:
  4.         <input type="text" name="voornaam" value="Je voornaam" />
  5.         <input type="text" name="naam" value="Je achternaam" />
  6.  
  7. </form>


5. Een wachtwoordveld


5.1. De basis


http://www.multidesk.be/bijlage/f51a8dc8a7ceaee0ba547f37bcf7ad3c.jpg

Een wachtwoordveld is ongeveer hetzelfde als een tekstveld, maar de gebruiker kan niet meer zien wat hij ingevoerd heeft. De browser zet de tekens namelijk om in sterretjes, bolletjes, ....

CODE
  1. <form name="formulier" method="post" action="../pagina.php">
  2.  
  3.         <input type="password" />
  4.  
  5. </form>


5.2. Attributen bij een wachtwoordveld

De attributen bij een wachtwoordveld zijn dezelfde als bij een gewoon tekstveld.
Name dient weer om het veld een naam te geven en zo in de verwerking gemakkelijk de informatie uit het veld te halen. Size dient om de lengte van het veld aan te passen, maxlenght om het aantal tekens te beperken en value kan je weer gebruiken om al een bepaalde waarde in het veld te plaatsen. Zoals het bij een wachtwoordveld hoort zullen de tekens van die value ook omgezet worden in andere tekens.

CODE
  1. <form name="formulier" method="post" action="../pagina.php">
  2.  
  3.         <input type="text" name="wachtwoord" size="14" maxlength="10" value="wachtwoord" />
  4.  
  5. </form>


6. Een tekstvak


6.1. De basis


http://www.multidesk.be/bijlage/b0358eca22447de663dc978d285abf50.jpg

Een tekstvak wordt ook gebruikt om tekst in neer te schrijven, maar dit keer gaat om grotere stukken tekst. Een tekstvak is groter dan een gewoon tekstveld en kan ook in breedte en hoogte aangepast worden.

Dit keer wordt dit veld niet met de input-tag aangemaakt maar met de textarea-tag. Deze wordt op de normale manier afgesloten.

CODE
  1. <form name="formulier" method="post" action="../pagina.php">
  2.  
  3.         <textarea></textarea>
  4.  
  5. </form>


6.2. Attributen bij een tekstvak

6.2.1. Name en value

Bij een tekstvak kan je ook het name-attribuut gebruiken, weer om een naam aan het veld te geven. Dit is, om dezelfde reden als bij de andere velden, gemakkelijker voor de formulierverwerking.
Het is ook mogelijk om een value aan een tekstvak te geven. Dit doe je echter niet met een attribuut, maar door gewoon de tekst tussen de beide tags te plaatsen.

CODE
  1. <form name="formulier" method="post" action="../pagina.php">
  2.  
  3.         <textarea name="opmerking" >Dit is een value. Vul hier je opmerking in</textarea>
  4.  
  5. </form>


Bij een tekstvak heb je 2 verplicht attributen (cols en rows) en 2 optionele attributen (readonly en disabled). Hieronder staan ze allemaal uitgelgd

6.2.2. Cols en rows

Met de attributen cols en rows kan je de breedte (cols) en hoogte (rows) van je tekstvak aanpassen. Beide attributen verwachten een cijfer als waarde. Cols en rows zijn, zoals hierboven staat, verplichte attributen bij de textarea-tag.

CODE
  1. <form name="formulier" method="post" action="../pagina.php">
  2.  
  3.         <textarea cols="10" rows="15" name="opmerking" >Dit is een value. Vul hier je opmerking in</textarea>
  4.  
  5. </form>


6.2.3. Readonly

Het attribuut readonly verwacht geen waardes. Je kan het woord in de textarea-tag plaatsen om de gebruiker te beletten iets in het vak te schrijven. Je kan dus een value in het vak plaatsen, die de gebruiker kan selecteren en kopiëren, maar er kan niets verandert of getypt worden in het vak.

CODE
  1. <form name="formulier" method="post" action="../pagina.php">
  2.  
  3.         <textarea cols="10" rows="15" name="opmerking" readonly >Dit is een value. Vul hier je opmerking in</textarea>
  4.  
  5. </form>


Dit attribuut kan eventueel ook gebruikt worden bij een tekstveld of wachtwoordveld.

6.2.4. Disabled

Het attribuut werkt ongeveer hetzelfde als readonly. De tekst in het tekstvak kan door de gebruiker niet aangepast worden, maar het tekstvak is ook onklikbaar gemaakt. De gebruiker kan de tekst dus niet selecteren of kopiëren. Het tekstvak ziet er ook een beetje anders uit en het lijkt alsof het niet actief is.

CODE
  1. <form name="formulier" method="post" action="../pagina.php">
  2.  
  3.         <textarea cols="10" rows="15" name="opmerking" disabled >Dit is een value. Vul hier je opmerking in</textarea>
  4.  
  5. </form>


Dit attribuut kan eventueel ook gebruikt worden bij een tekstveld of wachtwoordveld.

7. De verzendknop


7.1. De basis


http://www.multidesk.be/bijlage/68afa26f6c91b8e7d52fd7208365e511.jpg

De laatste velden die we in dit artikel bespreken zijn de verzend- en wisknop. Ze lijken erg op elkaar, maar ze hebben twee uiteenlopende functies.

De verzendknop heeft als functie om het formulierveld te versturen. Daarvoor worden o.a. de method- en actionattributen in de form-tag gebruikt.

De verzendknop wordt weer opgebouwd met de input-tag. Dit keer heeft het type-attribuut de waarde "submit"

CODE
  1. <form name="formulier" method="post" action="../pagina.php">
  2.  
  3.         <input type="submit" />
  4.  
  5. </form>


7.2. Attributen bij een verzendknop

7.2.1. Name

Het attribuut name kan ook hier worden gebruikt. Weer heeft het de functie om de verwerking te vergemakkelijken. Via de naam kan bijvoorbeeld gekeken worden of er al op verzonden gedrukt is of niet.

CODE
  1. <form name="formulier" method="post" action="../pagina.php">
  2.  
  3.         <input type="submit" name="verzenden" />
  4.  
  5. </form>


7.2.2. Value

Met het value-attribuut kan je de tekst op de verzendknop wijzigen. De knop vergroot naargelang de tekst die erin staat.

CODE
  1. <form name="formulier" method="post" action="../pagina.php">
  2.  
  3.         <input type="submit" name="verzenden" value="Verzend dit formulier" />
  4.  
  5. </form>


8. De wisknop


8.1. De basis


http://www.multidesk.be/bijlage/68afa26f6c91b8e7d52fd7208365e511.jpg

De wisknop is het tegengestelde van een verzendknop. De formuliervelden die de gebruiker ingevuld heeft worden gewist en de eventuele values worden terug in de velden geplaatst. Het wordt dus teruggeplaatst naar zijn beginwaarden.

Dit keer is de waarde bij het type-attribuut "reset".

CODE
  1. <form name="formulier" method="post" action="../pagina.php">
  2.  
  3.         <input type="reset" />
  4.  
  5. </form>


8.2. Attributen bij een wisknop

De attributen bij een wisknop zijn dezelfde als bij de verzendknop. Ze hebben ook dezelfde functies.

CODE
  1. <form name="formulier" method="post" action="../pagina.php">
  2.  
  3.         <input type="reset" name="wissen" value="Wis het volledige formulier" />
  4.  
  5. </form>


9. Slot


Zo, dit was het eerste deel over formulieren. Nu hebben we alle velden voor tekstinvoer en enkele knoppen besproken. In een volgend deel bespreken we de keuzerondjes, selectievakjes, keuzelijsten en uploadvelden.

Formulieren kunnen heel handig zijn, zeker als je weet hoe je het één en ander kan verwerken met een server-side taal.

Als je nu al vragen hebt, kan je ze stellen in de forums.

Klik hier om deel 9 formulieren vervolg te lezen.Dit artikel werd geschreven door Simon op woensdag 27 juni 2007 om 17:43 en werd sindsdien 14022 keer gelezen.

  • Pagina
  • 1 van 1

Geen reacties gevonden
Er werden nog geen reacties bij dit artikel geplaatst.
  • Indien je denkt iets te kunnen toevoegen aan het artikel, kan je zelf een reactie schrijven via de koppeling Plaats een reactie bij dit artikel hieronder.
  • Indien je andere commentaar (iets wat niet meteen functioneel bijdraagt aan het artikel zelf) hebt, kan je een bedankje formuleren via de koppeling Plaats een bedankje bij dit artikel hieronder.