infromatica.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
input{
display: inline-block;
font-family: sans-serif;
}
span{
font-family: sans-serif;
}
input[type=checkbox]{
appearance: none;
}
label{
border: 1px solid black;
width: 40px;
height: 20px;
border-radius: 20px;
cursor: pointer;
vertical-align: -7px;
}
label::after{
content: "";
width: 18px;
height: 18px;
border-radius: 18px;
margin: 1px 0px 0px 1px;
background-color: black;
position: absolute;
transition: 0.5s ease margin-left;
}
#checkleerling:checked + label[for=checkleerling]::after, #checkdocent:checked + label[for=checkdocent]::after{
margin-left: 21px;
}
label{
display: inline-block;
}
.checkboxcontainer{
display: block;
padding: 4px;
}
.veld{
display: inline-block;
padding: 5px;
width: 120px;
text-align: end;
}
</style>
</head>
<body>
<form>
<span class="veld">Voornaam:</span><input><br>
<span class="veld">Tussenvoegsel:</span><input><br>
<span class="veld">Achternaam:</span><input><br>
<span class="veld">Woonplaats:</span><input><br>
<div class="checkboxcontainer">
<span class="veld" style="padding: 0px;">Leerling:</span><input type="checkbox" id="checkleerling"><label for="checkleerling"></label><br>
</div>
<div class="checkboxcontainer">
<span class="veld" style="padding: 0px;">Docent:</span><input type="checkbox" id="checkdocent"><label for="checkdocent"></label><br>
</div>
<span id="school" style="display: none;">
<span class="veld">School:</span><input><br>
</span>
<span id="leerling" style="display: none;">
<span class="veld">Klas:</span><input><br>
<span class="veld">Niveau:</span>
<select>
<option value="vmbo">VMBO</option>
<option value="vmbo">HAVO</option>
<option value="vmbo">VWO</option>
</select>
<br>
</span>
<span id="docent" style="display: none;">
<span class="veld">Vak:</span><input><br>
</span>
</form>
<script>
document.getElementById("checkleerling").onchange = () => {
if(document.getElementById("checkleerling").checked){
document.getElementById("checkdocent").checked = false
document.getElementById("docent").style.display = "none"
document.getElementById("leerling").style.display = "inline"
document.getElementById("school").style.display = "inline"
}
else{
document.getElementById("leerling").style.display = "none"
document.getElementById("school").style.display = "none"
}
}
document.getElementById("checkdocent").onchange = () => {
if(document.getElementById("checkdocent").checked){
document.getElementById("checkleerling").checked = false
document.getElementById("leerling").style.display = "none"
document.getElementById("docent").style.display = "inline"
document.getElementById("school").style.display = "inline"
}
else{
document.getElementById("docent").style.display = "none"
document.getElementById("school").style.display = "none"
}
}
</script>
</body>
</html>
Resultaat
Made by Thijs Aarnoudse