webdevh16.1

<!-- oefening 1 -->

<!DOCTYPE html>
<html lang="nl">

<head>
    <title>Oefening 1</title>
</head>

<body>

	<form action="oefening2.php" method="post">
		Voornaam: <input type="text" name="voornaam"><br>
		Achternaam: <input type="text" name="achternaam"><br>
		<input type="submit">
	</form>

</body>
</html>

Download hier het bestand.
<!-- oefening 2 -->

<!DOCTYPE html>
<html lang="nl">

<head>
    <title>Oefening 2</title>
</head>

<body>

	Voornaam: <br>
	Achternaam: 
</body>

</html>

Download hier het bestand.
<!-- oefening 3 -->


<!doctype html>
<html>
    <head>  
        <title>Oefening 3</title>
        <script>
           
            function updateKeuze2(keuze1){
                var alle_opties = {"Noord Holland":["Alkmaar","Amsterdam","Haarlem"],"Zuid Holland":["Rotterdam","Den Haag","Leiden"]};
                
                var keuze2 = document.getElementById("keuze2");
                keuze2.options.length = 0;                

                var geselecteerde_optie = keuze1.options[keuze1.selectedIndex].value;
   
                alle_opties[ geselecteerde_optie ].forEach( (optie) => {
                    keuze2[keuze2.options.length] = new Option( optie );                       
                }); 
            }

        </script>

    </head>
    <body>

	<form action="oefening4.php" method="get">

	    <select id="keuze1" name="keuze1" onchange="updateKeuze2(this)">
	        <option></option>
	        <option value="Noord Holland">Noord Holland</option><option value="Zuid Holland">Zuid Holland</option>	    </select>
	   
	    <select id="keuze2" name="keuze2">
	    
	    </select>
	    
	    <input type="submit">
    
    </form>

    </body>
    
</html>

Download hier het bestand.
<!-- oefening 4 -->

<!DOCTYPE html>
<html lang="nl">

<head>
    <title>Oefening 4</title>
</head>

<body>

	Keuze 1: <br>
	Keuze 2: 
</body>

</html>

Download hier het bestand.