Elk formulier kent een aantal elementen waarin de lezer zijn gegevens kan invoeren. De eenvoudige functie prompt(), (eigenlijk een method van het object window) is een voorbeeld daarvan:
prompt("tik hier een vraag die je wenst te stellen.");
of
var a = prompt("geef een getal.")
waarmee het ingevoerde getal onmiddellijk opgeslagen wordt in de variabele a.
voorbeeld
Andere mogelijkheden zijn bijvoorbeeld tekstvakken (van één of meer regels), maar kunnen ook selectievakjes, keuzerondjes (radio buttons) of selectielijsten zijn. Hieronder volgt een kort overzicht van de belangrijkste invoermogelijkheden.
Let wel:
Het eenvoudigste veld om gegevens in te voeren, is het tekstveld. Hier kan de lezer eigenlijk alle tekstuele en numerieke informatie in doorgeven. Typische tekstvelden verzamelen informatie over bijvoorbeeld naam, adres, postcode en woonplaats; maar ook kunnen lezers in tekstvelden op- en aanmerkingen, suggesties en kritieken kwijt. De volgende code definieert een tekstveld in een formulier.
<input type="text" name="voornaam">
Dit voorbeeld toont direct een aantal kenmerken. De invoervelden beginnen allemaal met de tag <input>. Vervolgens wordt het type van invoer aangegeven, in dit geval zal het invoerveld van het type text zijn. Tenslotte moet het invoerveld een naam krijgen met het attribuut name="veldnaam". Omdat de gebruiker nu in zijn browser alleen een leeg vak te zien krijgt, is het beter het veld vooraf te laten gaan door een verklarende tekst:
Voeg hier uw voornaam in: <input type="text" name="voornaam">
Indien het attribuut type="type" niet gebruikt wordt, wordt er automatisch voor het type tekst gekozen. Het attribuut name="veldnaam" is een verplicht attribuut. Zonder deze toont de browser geen invoerveld op het scherm. Daarnaast bestaan er een aantal andere attributen waarmee je de invoer enigszins kunt sturen. We bespreken hier slechts één: De grootte van het invoervak instellen. (voor meer mogelijkheden: zie uitbreiding.)
Om de lengte van het invoervak vast te stellen, kan je het attribuut size gebruiken. Dit heeft alleen effect op de grootte van het vak zoals de browser dat op het scherm toont. De lengte van de invoer wordt er niet door beperkt. De volgende tag presenteert een tekstvak dat op het scherm een lengte van 35 tekens heeft:
<input type="text" name="voornaam" size="35">
Uitbreiding: meer over tekstvelden
Er zijn eigenlijk drie types knoppen:
Met deze knop in je formulier kan je alle invoervelden in één keer wissen. Per
formulier kan je slechts één knop van dit type gebruiken. Ook hier kan je het opschrift
van de knop wijzigen met het attribuut value="tekst", bijvoorbeeld
<input type="Reset" value="Wis de inhoud van het formulier.">
Aan deze knop koppelen we een functie of een opdracht.
<input type="button" value="tekst op de knop" onClick="uit te voeren functie">
De eventhandler onClick is gedefinieerd als attribuut van de tag <input>. De naam van het event wordt als naam voor het attribuut gebruikt, in dit voorbeeld onClick. Deze gebeurtenis (het uitvoeren van de functie of opdracht) vindt plaats zodra de gebruiker met de muis op een object klikt.
Uitbreiding: meer invoermogelijkheden
4.3.1 Je moet een databank aanmaken via een formulier waar de gebruiker zijn naam, voornaam, straat, huisnummer, postnummer, gemeente en provincie kan invoeren. Zorg dat de invoervelden mooi onder elkaar staan. Pas de grootte van de hokjes aan tot een realistisch formaat (het heeft geen zin dat het invoerveld van postnummer 35 lang is...)
OPLOSSING IN BRONCODE
OPLOSSING ALS FORMULIER
4.3.2 Maak een knop op het formulier die alle gegevens wist.
OPLOSSING IN BRONCODE
OPLOSSING ALS FORMULIER
4.3.3 Maak een formulier die 2 waarden opvraagt, voorzie dit formulier van een knop die de functie start om het verbruik van je wagen te berekenen en van een RESET-knop.
OPLOSSING IN BRONCODE
OPLOSSING ALS FORMULIER
4.4.1 Oefening 1(Terug naar opgave)
<html>
<head>
<title> Oefening 431 </title>
</head>
<body>
<script language="javascript">
</script>
<form>
<h1>Gelieve onderstaand formulier in te vullen</h1>
<p><br>
Naam: <input type="text" name="naam" size="20"> Voornaam: <input type="text" name="voornaam" size="20"><br>
Straat: <input type="text" name="straat" size="20"> Nummer: <input type="text" name="nummer" size="3"><br>
Postnummer: <input type="text" name="postnummer" size="4"> Gemeente: <input type="text" name="gemeente" size="20"><br>
Provincie: <input type="text" name="naam" size="20"><br>
</p>
</form>
</body>
</html>
4.4.2 Oefening 2(Terug naar opgave)
<html>
<head>
<title> Oefening 432 </title>
</head>
<body>
<script language="javascript">
</script>
<form>
<h1>Gelieve onderstaand formulier in te vullen</h1>
<p>Naam: <input type="text" name="naam" size="20"> Voornaam: <input type="text" name="voornaam" size="20"><br>
Straat: <input type="text" name="straat" size="20"> Nummer: <input type="text" name="nummer" size="3"><br>
Postnummer: <input type="text" name="postnummer" size="4"> Gemeente: <input type="text" name="gemeente" size="20"><br>
Provincie: <input type="text" name="naam" size="20"><br>
</p>
<hr>
<p><input type="reset" value="wis de gegevens van dit formulier"> </p>
</form>
</body>
</html>
4.4.3 Oefening 3(Terug naar opgave)
<html>
<head>
<title> Oefening 433</title>
</head>
<body>
<script language="javaScript">
function verbruik(liter, afstand)
{
document.zuinig.resultaat.value= liter/afstand*100
}
</script>
<form name="zuinig">
<p>Aantal liter dat u getankt hebt:<input type="text" name="getankt" size="20"><br>
Aantal km dat u gereden hebt: <input type="text" name="km" size="20"><br>
<input type="button" value="bereken" onClick="verbruik(document.zuinig.getankt.value,document.zuinig.km.value)"> Uw wagen verbruikt <input type="text" name="resultaat" size="5"> per 100 km<br>
<input type="reset" value="wis dit formulier"> </p>
</form>
</body>
</html>