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.
Een normaal tekstveld:
<input type="text" name="tekstveld" />De breedte van het tekstveranderen met het attribuut size:
<input type="text" name="tekstveld" size="50" />De beginwaarde veranderen met het attribuut value:
<input type="text" name="tekstveld" value="Cursus HTML" />Het maximum aantal toegelaten karakters veranderen met attribuut maxlength:
<input type="text" name="tekstveld" size="10" maxlength="4" />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="tekstveld" />Een onzichtbaar tekstveld is gelijkaardig met een gewoon tekstveld, maar met het verschil dat de bezoeker het veld niet ziet. De bezoeker kan dus ook niets typen in een onzichtbaar tekstveld. Het doel van zo'n onzichtbaar tekstveld is om informatie door te sturen die niet door de bezoeker is ingevuld.
Selectievakjes (checkboxen) in een formulier worden gebruikt wanneer de gebruiker meerdere opties tegelijk kan kiezen.
<input type="checkbox" name="appel" value="1" />Appel<br /> <input type="checkbox" name="peer" value="1" />Peer<br /> <input type="checkbox" name="banaan" value="1" />Banaan<br />
Wanneer de gebruiker een selectievakje aanvinkt, krijgt dit element bij de verwerking van het formulier de waarde die is beschreven in het attribuut value.
Door het attribuut checked toe te voegen wordt het selectievakje vooraf aangevinkt:
<input type="checkbox" name="appel" value="1" checked="checked" />Appel<br /> <input type="checkbox" name="peer" value="1" />Peer<br /> <input type="checkbox" name="banaan" value="1" />Banaan<br />
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="mannelijk" />Mannelijk<br /> <input type="radio" name="geslacht" value="vrouwelijk" />Vrouwelijk
Door het attribuut checked toe te voegen wordt het selectievakje vooraf aangevinkt:
<input type="radio" name="geslacht" value="mannelijk" checked="checked" />Mannelijk<br /> <input type="radio" name="geslacht" value="vrouwelijk" />Vrouwelijk
Er zijn 4 verschillende soorten knoppen die kunnen gebruikt worden in een formulier: submit, image, reset, button.
Deze knop zorgt ervoor dat het formulier over gaat tot verwerking en de locatie volgt die is gespecificieerd in het action attribuut van het bijhorende form element.
<input type="submit" name="submit" />De tekst op de knop kan veranderd worden door het value attribuut te gebruiken:
<input type="submit" name="submit" value="Verzenden" />Bij het klikken op de reset knop krijgen alle elementen in het bijhorende formulier terug hun beginwaarde.
<form action="post" method="post"> <i>Vul je naam in: </i> <input name="naam" type="text" /> <input type="reset" name="beginwaarden" value="Terug naar beginwaarden" /> </form>
Deze knop is vergelijkbaar met de submit knop maar met het verschil dat de afbeelding die gespecificieerd is in het src attribuut wordt getoond in plaats van de standaard knop.
<input type="image" name="afbeelding" src="verzenden.jpg" alt="afbeelding" />De button knop heeft standaard geen betekenis. Deze knop wordt meestal gebruikt om een script uit te voeren of om een hyperlink te volgen.
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>
Om de gebruiker de mogelijkheid te bieden om een bestand te selecteren moet er een input element aanwezig zijn waarvan het attribuut type de waarde file heeft. Dit element zorgt ervoor dat er een tekstveld aanwezig is en een knop. Wanneer er op de knop wordt gedrukt opent er een venster, waar de gebruiker een bestand kan selecteren. Hierna wordt in het tekstveld het bestand weergegeven inclusief het volledige pad.