Tot nu toe heb je gegevens ingevoerd met document.prompt of document.confirm,
en gegevens uitgevoerd met document.write, of de standaardfunctie alert(....)
Maar dat kan natuurlijk veel mooier: op veel websites zie je invoervelden, vakjes om aan te vinken, en knoppen.
Ook de schermuitvoer kan op bepaalde plaatsen op je webpagina verschijnen.
Dit kun je doen met 'formulieren': speciale 'gebieden' op je webpagina waar zich de tekstvelden, knopppen e.d. bevinden.
Deze formulieren maak je met html-code. In je formulier leg je met 'events' (zie les 9) het verband met javascript code ergens anders op je pagina.
Alle elementen in een formulier bevinden zich tussen de twee 'form'-tags.
<form name="mijnformulier" action="" method="">
........
</form>
Een kleine toelichting:
name="mijnformulier" Geef het formulier een zelfgekozen naam.
action="" Deze twee kunnen bij ons leeg blijven,
method="" ze zijn alleen van belang als het formulier reageert door eenandere pagina te openen.
Tussen de twee form-tags komen de tags voor invoer (en uitvoer).
Voorbeeld en van tags binnen een formulier (probeer ze gerust uit!):
Tekstveld
<input type="text" name="mijntekst" />
<input type="text" name="mijntekst" value="Hallo allemaal" size="20" maxlength="40"/>
Toelichting:
type="text' het is een veld voor tektsinvoer of weergave
name="mijntekst"
een zelfgekozen naam
value="Hallo" de vooringestelde waarde van het veld (mag ook leeg zijn, dus: "")
size="10" er passen 10 tekens in het tekstveld
maxlength="40" de tekst kan niet langer zijn dan 40 tekens (als dat meer is dan bij size, dan zal de tekst kunnen scrollen)
Tekstgebied
<textarea name="mijntekstveld"></textarea>
<textarea name="mijntekstveld" rows="4" cols="30"></textarea>
Toelichting:
Je ziet dat hier meer regels mogelijk zijn. Kijk maar eens wat er gebeurt als je er heel veel tekst in typt (meer dan er in één keer inpast)
rows="4" cols="30" Dit geeft de hoogte en breedte van het tekstveld aan.
Button (knop)
Een button is een speciaal type van de input-tag.
Hij dient ervoor om actie te ondernemen als er op wordt geklikt.
Met name de button kan een javascript functie in werking stellen, door de 'event' onClick="..." (zie les 9)
<input type="button" value="Klik hier" onClick="alert('goed gedaan')" />
Toelichting:
De code hierboven spreekt voor zichzelf.
N.B.:
Let hier eens op het gebruik van de enkele aanhalingstekens!
Het fout zou gaan als je zou typen: onClick="alert("goed gedaan")"; dubbele aanhalingstekens binnen een andere set aanhalingstekens kan niet. Je gebruikt dan bij de binnenste de enkele.
Maar hoe haal je nu de invoer gegevens uit een formulier naar javascript,
en: hoe stuur je de uitvoer van javascript naar de velden van een formulier?
Daarvoor moet je eerst iets weten over objecten en hun eigenschappen.
Voorbeeld:
Je document is een object.
Het formulier 'mijnformulier' is een deelobject binnen dat object. Dat schrijf je als volgt: document.mijnformulier
Een veld binnen een formulier, is dan weer een deelobject daarbinnen. Dat schrijf je zo: document.mijnformulier.mijntekst
De 'waarde' van dat veld, is daar weer een deelobject van. Dus: document.mijnformulier.mijntekst.value
De inhoud van dat laatste (in ons voorbeeld "Hallo allemaal") noemt men een eigenschap van dat object.
Dus je kunt schrijven: document.mijnformulier.mijntekst.value = "Hallo allemaal"
Ingewikkeld? Op het eerste gezicht misschien wel. Kijk dan nog eens goed; het zit heel logisch in elkaar.
In javascript.
Ergens in je pagina staat een javascriptfunctie.
Snap je nu wat er gebeurt als in deze functie de volgende code staat:
document.write( document.mijnformulier.mijntekst.value );
Inderdaad, de inhoud van het tekstveld verschijn op het scherm. Maar je hele formulier is dan van het scherm verdwenen.
Daarom is het volgende beter:
document.mijnformulier.mijntekstveld.value = document.mijnformulier.mijntekst.value;
De inhoud van het tekstveld wordt nu overgenomen in de inhoud van het tekstgebied.
Zo kun je dus het ene veld voor invoer gebruiken, en het andere voor uitvoer.
Duizelt het je nu? Dan gaan we eens wat proberen. Kopieer onderstaande tekst naar HTMLkit, en probeer hem uit met verschillende waarden en instellingen.
<html>
<head>
<title>Untitled</title>
<script language="JavaScript" type="text/javascript">
<!--
function berekensnelheid()
{
var snelheid, zinnetje;
snelheid = document.reis.kilom.value / document.reis.duur.value;
zinnetje = "Hallo " + document.reis.naam.value + ", \njouw gemiddelde snelheid is " + snelheid + " km/u.";
document.reis.resultaat.value = zinnetje;
}
//-->
</script></head>
<body><form name="reis" action="" method="">
<br>Typ hier je naam:
<input type="text" name="naam" value="naam svp" size="20" maxlength="40"/>
<br>Hoeveel kilometer woon je van school?
<input type="text" name="kilom" value="" size="4"/>
kilometer
<br>Hoe lang duurt de reis naar school?
<input type="text" name="duur" value="" size="4"/>
minuten<br><br><input type="button" value="Klik hier" onClick="berekensnelheid()" />
<br><br><textarea name="resultaat" rows="4" cols="30"></textarea></form>
</body>
</html>
Wil je meer weten over het gebruik van formulieren? Kijk dan in de bijlage bij les 10