<!-- oefening 1 -->
<!DOCTYPE html>
<html>
<body>
<form id="frm1">
Voornaam:
<input type="text" name="f_vnaam">
<br> Achternaam:
<input type="text" name="f_anaam">
<br>
<br>
<input type="button" value="Toon" onclick="laadWaarden()">
</form>
<p id="naam"></p>
<script>
function laadWaarden() {
var f = document.getElementById("frm1");
document.getElementById("naam").innerHTML = f.elements["f_vnaam"].value + ' '
+ f.elements["f_anaam"].value;
f.reset();
}
</script>
</body>
</html>
Download hier het bestand.
<!-- oefening 2 -->
<!DOCTYPE html>
<html>
<body>
<form id="frm1">
Voornaam:
<input type="text" name="f_vnaam">
<br> Achternaam:
<input type="text" name="f_anaam">
<br>
<input type="radio" name="f_geslacht" value="man"> Man<br>
<input type="radio" name="f_geslacht" value="vrouw"> Vrouw<br>
<br>
<br>
<input type="button" value="Toon" onclick="laadWaarden()">
</form>
<p id="Tekst"></p>
<script>
function laadWaarden() {
var f = document.getElementById("frm1");
document.getElementById("Tekst").innerHTML = f.elements["f_vnaam"].value + ' '
+ f.elements["f_anaam"].value + ' is een ' + f.elements["f_geslacht"].value + '!' ;
f.reset();
}
</script>
</body>
</html>
Download hier het bestand.
<!-- oefening 3 -->
<!DOCTYPE html>
<html>
<body>
<form id="frm1">
Voornaam:
<input type="text" name="f_vnaam">
<br> Achternaam:
<input type="text" name="f_anaam">
<br>
<input type="radio" name="f_geslacht" value="man"> Man<br>
<input type="radio" name="f_geslacht" value="vrouw"> Vrouw<br>
<br>
<select name="f_woonplaats">
<option value="Amsterdam">AMS</option>
<option value="Rotterdam">ROT</option>
<option value="Utrecht">UT</option>
<option value="Den haag">DH</option>
</select>
<br>
<br>
<input type="button" value="Toon" onclick="laadWaarden()">
</form>
<p id="Tekst"></p>
<script>
function laadWaarden() {
var f = document.getElementById("frm1");
document.getElementById("Tekst").innerHTML = f.elements["f_vnaam"].value + ' '
+ f.elements["f_anaam"].value + ' is een ' + f.elements["f_geslacht"].value + ' en woont in '
+ f.elements["f_woonplaats"].value + '.';
f.reset();
}
</script>
</body>
</html>
Download hier het bestand.
<!-- oefening 4 -->
<!DOCTYPE html>
<html>
<body>
<form id="frm1">
<table>
<tr>
<td>Voornaam</td>
<td>
<input type="text" name="f_vnaam">
</td>
</tr>
<tr>
<td>Achternaam</td>
<td>
<input type="text" name="f_anaam">
</td>
</tr>
<tr>
<td>Geslacht</td>
<td>
<input type="radio" name="f_geslacht" value="man"> Man
<input type="radio" name="f_geslacht" value="vrouw"> Vrouw</td>
</tr>
<tr>
<td>Woonplaats</td>
<td>
<select name="f_woonplaats">
<option value="AMS">Amsterdam</option>
<option value="ROT">Rotterdam</option>
<option value="UT">Utrecht</option>
<option value="DH">Den haag</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="button" value="Toon" onclick="laadWaarden()">
</td>
</tr>
</table>
</form>
<br>
<table border="1">
<tr>
<td>Voornaam</td>
<td><span id="vnaam"></span></td>
</tr>
<tr>
<td>Achternaam</td>
<td><span id="anaam"></span></td>
</tr>
<tr>
<td>Geslacht</td>
<td><span id="geslacht"></span></td>
</tr>
<tr>
<td>Woonplaats</td>
<td><span id="woonplaats"></span></td>
</tr>
<tr>
<td>Provincie</td>
<td><span id="provincie"></span></td>
</tr>
</table>
<script>
function laadWaarden() {
var f = document.getElementById("frm1");
document.getElementById("vnaam").innerHTML = f.elements["f_vnaam"].value;
document.getElementById("anaam").innerHTML = f.elements["f_anaam"].value;
document.getElementById("geslacht").innerHTML = f.elements["f_geslacht"].value;
document.getElementById("woonplaats").innerHTML = f.elements["f_woonplaats"].value;
var woonplaats = f.elements["f_woonplaats"].value;
if (woonplaats == 'AMS') {
document.getElementById("provincie").innerHTML = 'Noord Holland';
} else if (woonplaats == 'UT') {
document.getElementById("provincie").innerHTML = 'Utrecht';
} else {
document.getElementById("provincie").innerHTML = 'Zuid Holland';
}
f.reset();
}
</script>
</body>
</html>
Download hier het bestand.