Het input element wordt gebruikt om tekstvelden, knoppen, selectievakjes (checkboxes) en
keuzerondjes (radio buttons) te plaatsen in een formulier. Het attribuut type bepaalt welk type
van input element er gebruikt wordt. Elk input element heeft een naam (attribuut name), om zo
later de waarde te kunnen opvragen. Let wel op dat de naam van elk formulier element uniek
moet zijn. Met het attribuut value wordt de beginwaarde bepaalt van het input element.
Hieronder een overzicht van de meest gebruikte input-elementen.
Kijk voor meer voorbeelden en uitleg op internet.
Tekstveld:
<input type="text" name="tekstveld" size="50" />
Resultaat:
Wachtwoordveld.
Een wachtwoord moeten sterretjes worden zodat mensen in de buurt het niet kunnen lezen. Hiervoor
verander je de waarde van het attribuut type naar "password".
<input type="password" name="wachtwoordveld" />
Resultaat:
Selectievakje (checkbox)
Selectievakjes (checkboxen) in een formulier worden gebruikt wanneer de gebruiker meerdere
opties tegelijk kan kiezen. Door de naam van de checkboxen gelijk te houden geef je aan dat
deze bij elkaar horen.
<input type="checkbox" name="fruit" value="appel" />Appel<br />
<input type="checkbox" name="fruit" value="peer" />Peer<br />
<input type="checkbox" name="fruit" value="banaan" />Banaan<br />
Resultaat:
Keuzerondje (radio button)
Keuzerondjes (radio buttons) in een formulier worden gebruikt wanneer de gebruiker een keuze moet
maken. Bij keuzerondjes kan er maar één tegelijk aangevinkt worden. Een voorbeeld waar keuzerondjes
kunnen gebruikt worden is bij het vragen van het geslacht:
<input type="radio" name="geslacht" value="man" />Mannelijk<br />
<input type="radio" name="geslacht" value="vrouw" />Vrouwelijk
Resultaat:
Tekstvak
Het textarea element is een tekstveld met het verschil dat bij een textarea meerdere lijnen kunnen
ingetypt worden. Het attribuut name is verplicht te definiëren. Het attribuut cols bepaalt de breedte van het
veld terwijl het attribuut rows het aantal rijen bepaalt. De inhoud tussen de start- en de eind tag bepaalt de
beginwaarde van het veld.
<textarea name="textarea" cols="50" rows="10">Dit is een
voorbeeld</textarea>
Resultaat:
Bestand verzenden:
In een formulier kun je de gebruiker de mogelijkheid bieden één of meerdere bestanden naar de
server te sturen. Deze informatie kan enkel verwerkt worden wanneer er een script of een
programma op de server aanwezig is die weet wat er met de bestanden moet gebeuren. Als er
zich geen script of programma bevindt op de server heeft het geen zin om bestanden door te
sturen naar de server.
In het form element moet het enctype attribuut de waarde multipart/form-data krijgen. Op deze
manier weet de server dat er ook een bestand mogelijk wordt doorgestuurd via het formulier
waardoor de server dit op de correcte manier kan verwerken.
<form method="post" enctype="multipart/form-data"
action="verwerking.php">
<input type="file" name="bestand" /><br />
<input type="submit" value="Verzenden" />
</form>
Resultaat:
Button
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 tag maar
hebben een verschillend type (button, submit, reset of image). De submitknop zorgt ervoor dat het
formulier over gaat tot verwerking en de locatie volgt die is gespecificeerd in het action attribuut van het
bijhorende form element.
<input type="submit" name="verzendknop" value="Verzenden" />
Resultaat:
Bij het klikken op de resetknop krijgen alle elementen in het bijhorende formulier terug hun beginwaarde.
<input type="reset" name="r_knop" value="Terug naar beginwaarden" />
Resultaat: