l107/formulier.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formulieren</title>
<style>
#checkbox:hover{
cursor: pointer;
}
input[type=checkbox]{
cursor: pointer;
}
.veld{
width: 150px;
display: inline-block;
text-align: left;
}
</style>
<script>
window.onload = check
function check(){
if(document.getElementById('kinderen').checked){
document.getElementById('aantalkinderen').disabled=false
//document.getElementById('aantalkinderendiv').style.display ='block';
}
else{
document.getElementById('aantalkinderen').disabled=true
//document.getElementById('aantalkinderendiv').style.display ='none';
document.getElementById('aantalkinderen').value = "";
}
if(document.getElementById('huisdieren').checked){
//document.getElementById('aantalHuisdieren').disabled=false
//document.getElementById('sterilisatie').disabled=false
document.getElementById('huisdierenAantaldiv').style.display ='block';
document.getElementById('sterilisatiediv').style.display ='block';
}
else{
//document.getElementById('aantalHuisdieren').disabled=true
//document.getElementById('sterilisatie').disabled=true
document.getElementById('huisdierenAantaldiv').style.display ='none';
document.getElementById('sterilisatiediv').style.display ='none';
document.getElementById('aantalHuisdieren').value = "";
document.getElementById('sterilisatie').checked=false;
}
}
</script>
</head>
<body>
<h2>Reservering:</h2>
<h3>Persoonlijke gegevens</h3>
<form method="get">
<div><span class="veld">Volledige naam : </span><input type="text" id="naam"></div>
<div><span class="veld">Woonplaats : </span><input type="text" id="woonplaats"></div>
<div><span class="veld">E-mailadres : </span><input type="text" id="e-mail"></div>
</br>
<h3>Kinderen en huisdieren</h3>
<div><span class="veld"></span><input type="checkbox" value="1" id="kinderen" onchange="check()"><label for="kinderen" id="checkbox">Kinderen</label></div>
<div id="aantalkinderendiv"><span class="veld">Aantal kinderen : </span><input type="text" id="aantalkinderen"></div>
</br>
<div><span class="veld"></span><input type="checkbox" value="1" id="huisdieren" onchange="check()"><label for="huisdieren" id="checkbox">Huisdieren</label></div>
<div id="huisdierenAantaldiv"><span class="veld">Aantal huisdieren : </span><input type="text" id="aantalHuisdieren"></div>
<div id="sterilisatiediv"><span class="veld"></span><input type="checkbox" value="1" id="sterilisatie" onchange="check()"><label for="sterilisatie" id="checkbox">Gesteriliseerd</label></div>
</br>
<div><span class="veld">Geboortedatum : </span><input type="date" id="geboortedatum"></div>
</form>
</br>
<h3>Aankomst en vertrek</h3>
<form>
<div><span class="veld">Aankomstdatum : </span><input type="date" id="aankomstdatum"></div>
</br>
<div><span class="veld">Vertrekdatum : </span><input type="date" id="vertrekdatum"></div>
</br>
<h3>Betalen</h3>
<div><span class="veld">Betaalmethode: </span><input type="checkbox" id="betalen" value="1" onchange="check()"><label for="betalen" id="checkbox">Creditcard</label></div>
<div><span class="veld"></span><input type="checkbox" value="1" id="betalen2" onchange="check()"><label for="betalen2" id="checkbox">Ideal</label></div>
</br>
<div><input type="submit" id="knop" value="Boeken"></div>
</br>
<div>
<span class="veld">Keuze</span>
<select>
<option></option>
<option>Keuze1</option>
<option>Keuze2</option>
<option>Keuze3</option>
<option>Keuze4</option>
</select>
</div>
</form>
</body>
</html>
Resultaat
Made by Thijs Aarnoudse