1. Inleiding
Een van de belangrijkste dingen in HTML is de mogelijkheid om formulieren te maken.
Om een formulier samen te stellen kan je gebruik maken van verschillende soorten veld en deze combineren.
In deze tutorial zal het acpect velden en buttons van naderbij bekeken worden.
top 2. Form & Attributen
Het belangrijkste bij een formulier is het form, deze zal de werking van de velden en buttons mogelijkmaken.
Een form wordt gemaakt met de tags <form> & </form>
Deze moet je nog aanvullen met een aantal attributen, hieronder zie je een overzichtje hiervan.
name
Dit attribuut is om een naam aan het form mee te geven
name="mail_form"
method
Dit attribuut is om de manier van data vergaring aan te duiden.
methode="post"
action
Dit attribuut is om de actie van het form aan te duiden.
action="pagina.html"
enctype
Dit attribuut is om het type van het form aan te duiden.
enctype="multipart/form-data"
Wat je hierboven ziet aan voorbeelden is natuurlijk maar een mogelijkheid.
Nu zullen we daar even verder op in gaan.
NAME
Dit attribuut gebruik je om een naam mee tegeven aan je form.
Dit is normaal niet nodig om te doen, tenzij je gaat werken met JavaScript.
Dan is het noodzakelijk om je form een naam te geven zodat je JavaScript het kan herkennen en er iets mee kan doen.
METHOD
Dit attribuut gebruik je om aan je form te vertellen op welke wijze er informatie binnen komt of buiten gaat.
Je hebt de keuzen uit 2 mogelijkheden, GET en POST.
Met GET zal de ingevulde data in de url worden gestopt en zo worden doorgegeven.
<form
method="get">
Met POST zal de ingevulde data worden doorgegeven via superglobals
ACTION
Dit attribuut gebruik je om aan je form te vertellen wat dez emoet doen met de inhoud van de velden.
Dit kunnnen verschillende dingen zijn.
- Je kan de inhoud opnieuw op de pagina gebruiken.
<form
method="post"
action="">
- Je kan de inhoud doorsturen naar een andere pagina om daar te gebruiken.
<form
method="post"
action="pagina_naam.html"> <form
method="post"
action="pagina_naam.html?titel=formulier
is verzonden"> <form
method="post"
action="?p=pagina_naam&t=formulier
is verzonden"> ...
- Je kan de inhoud onmiddellijk versturen met een mail.
<form
method="post"
action="mailto:naam@domein.tld"> <form
method="post"
action="mailto:naam@domein.tld?subject=Mail voor
webmaster"> <form
method="post"
action="mailto:naam@domein.tld?subject=Mail voor
webmaster&body=Dit is een mail voor jouw webmaster!"> ...
top 3. Velden & Aanverwanten
De velden zijn de sleutels voor een forumier, zonder velden heb je namelijk geen formulier.
In een overzicht dat je hieronder vindt staan de verschillende soorten die je kan gebruiken.
Dit zijn enkel de tags en dien je nog te voorzien van attributen zoals name, value, type, ...
<input/>
Deze tag gebruik je om letterlijk een input te doen, zoals bv een gebruikersnaam invullen om in te loggen
<textarea> </textarea>
Deze tag gebruik je om een veld (area) te maken, waar je dan een tekst in kunt typen
<select> </select>
Deze tag gebruik je om een keuze (select) menu te maken, zoals bv om een land te kiezen
INPUT
Deze tag gebruik je om letterlijk een input te doen, zoals bv een gebruikersnaam invullen om in te loggen.
Je moet deze tag aanvullen met een type een een name, de naam is zeer belangrijk want deze heb je nodig om nadien de waarde eruit te kunnen halen.
Voor typen heb je de keuze uit. (text, password, checkbox, radio, file, button, submit, reset en image)
In dit del van de tutorial zullen we enkel text, password, checkbox, radio en file behandelen.
De overige zijn bedoelt om het maken van buttons en komen aanbod in het volgende deel.
- Text
Dit attribuut gaat een tekst veld creëren.
Je kan deze nog aanvullen met een value, size en maxlength.
Deze kun je onderling met elkaar combineren indien je dit wilt.
Hieronder vind je enkel voorbeelden met hun code.
- Password
Dit attribuut gaat een tekst veld creëren maar je zult niet kunnen zien wat
erinstaat.
Je kan deze nog aanvullen met een value, size en maxlength.
Deze kun je onderling met elkaar combineren indien je dit wilt.
Hieronder vind je enkel voorbeelden met hun code.
Indien je een lijstje aantal mogelijkheden wilt, dien je deze allemaal de zelfde
name te geven. Indien je dat niet doet, zul je eindigen met alle rondjes geselecteerd en dat is niet de bedoeling. Als dat de bedoeling is, gebruik je de checkbox beter.
- File
Dit attribuut gaat een tekst veld creëren om een bestand te kunnen uploaden.
Je kan deze nog aanvullen met een value, size en maxlength; maar dat is ongebruikelijk en
misschien ook onnodig.
Als je dit attribuut gebruikt dien je ook de enctype mee te geven in het form.
Deze is multipart/form-data voor het uploaden van bestanden.
Hieronder vind je enkel voorbeelden met hun code.
TEXTAREA
Deze tag gebruik je om een tekst veld te creëren.
Je kan deze tag nog aanvullen met cols, rows & value; maar dat is niet
noodzakkelijk.
De waarde van name is natuurlijk hier ook weer belangrijk omdat je deze naam
zult moeten gebruiken op de action pagina (zoals gedefineerd bij action).
Indien je geen rows en/of cols meegeeft, krijg je het onderstaande resultaat.
<textarea
name="tekst_veld"></textarea>
Als je een waarde voor rows en/of cols meegeeft, krijg je vb het onderstaande
resultaat.
Wel zit er een verschil, op de wijze waarop je een value
meegeeft.
Bij de vorige moest je dat doen doormiddel van het attribuut value, bij een
textarea moet je dit niet zo doen.
Hierbij moet je de waarde plaatsen tussen de 2 tags <textarea>hier zo
dus</textarea>.
<textarea
name="tekst_veld"
rows="5"
cols="30">Dit
is de waarde voor het veld.</textarea>
SELECT
Deze tag gebruik je om een dorp-down lijstje te maken van verschillende
mogelijkheden.
Je begint een dorp-down met de tags <select></select> zoals
hieronder weer gegeven, maar dan heb je nog niets.
<select name="optie_lijst"></select>
Bij een dorp-down is het de bedoeling dat je mogelijkheden opgeeft waaruit
gekozen kan worden.
Dit doe je doormiddel van de tags <option> & </option>, hierbij
moet je natuurlijk weer een value opgeven om deze nadien nog te kunnen
achterhalen.
top 4. Buttons
De buttons in een formulier zijn dat gene die een formulier inwerking laat treden.
Er zijn verschillende soorten buttons die je kunt gebruiken in een formulier.
Al de buttons beginnen met de input tage maar hebben een verschillend type (button, submit, reset
of image).
Hieronder zie je een overzichtje van de typ, hun code en wat uitleg.
- Button
Met het type button maak je een standaard button, waaraan je een naam kunt geven
en een actie.
Dit zul je dan moeten doen met de tag onclick.
Indien je XHTML-valid wilt zijn, moet je <button>ga naar pagina</button> gebruiken.
Hieronder vind je een voorbeeld met zijn code.
<input type="button"
value="ga naar pagina"
onclick="window.location='index.php'"
/>
<button onclick="window.location='index.php'">ga
naar pagina</button>
ga naar pagina
- Submit
Met het type submit, maak je van een button die het form gaat uitvoeren (zoals
gedefineerd bij method) naar een ergens (zoals gedefineerd bij action)
De name die je opgeeft is ook weer belangrijk omdat je dit zult nodig hebben op
de pagina naarwaar je het form naartoe zend (zoals gededineerd bij action).
- Image
Met het type image, maak je van een button die het zelfde doet als submit maar
dan met een plaatje.
<input type="image"
src="pasop.jpg">
top 5.Extra's
Er zijn nog enkel extra's die je kan toevoegen aan je form.
Deze hebben niet nodig, maar zorgen voor een beter gebruik of uitzicht.
FIELDSET
Je kent misschien wel site die z'n mooie rand rond hun tabel of tekst hebben.
Maar dan niet dmv een tabel of zo, neen want deze hebben dan mooie rondingen.
Je ziet dit ook bijna altijd bij een intalatie wizard als je een programma of
game installeerd op je pc.
Maar waar gaat het nu over, vragen jullie zich waarschijnlijk af, wel over het
volgende.
Indien je de volgende <fieldset> &
</fieldset> tags gebruikt, krijg je dat effect.
<fieldset></fieldset>
Indien je rond tekst of form tussen plaatst krijg je dat effect.
<fieldset>Deze
tekst staat hier mooi.<br
/>Vindt
jij ook niet?</fieldset>
Indien je nu een titeltje op de "tabel" wilt zetten kan je dat doen
dmv de tags <legend> & </legend>.
Deze plaats je na de <fieldset> tag, ook kun je in de legend tag atributen
gebruiken zoals align om het mooi in het midden te zetten.
<fieldset><legend
align='center'>De
Uitleg over de tags fieldset!</legend
>Deze
tekst staat hier mooi.<br
/>Vindt
jij ook niet?</fieldset>
TABINDEX
Met de tag tabindex, kan je je velden een volgorde geven om te berijken via de
TAB toets.
Hieronder zie je een voorbeeld met en zonder tabindex en met kun code's.
De 1ste is zonder de tag en de 2de is met de tag.
Wat is jouw favoriete javascript framework? (S: 18, R: 2)
(4.14) 
