16. Formulieren




<!-- 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.


<!--opdracht 1: maak, zo geautomatiseerd mogelijk, de opdracht conform de dia. -->

Download hier het bestand.
<!--opdracht 2: maak, zo geautomatiseerd mogelijk, de opdracht conform de dia. -->

Download hier het bestand.
<!--opdracht 3: maak, zo geautomatiseerd mogelijk, de opdracht conform de dia. -->

Download hier het bestand.
<!--opdracht 4: maak, zo geautomatiseerd mogelijk, de opdracht conform de dia. -->

Download hier het bestand.


<!--opdracht 1: maak, zo geautomatiseerd mogelijk, de opdracht conform de dia. -->

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

<head>
    <title>Opdracht 1</title>
</head>

<body>
    
	<form action="antwoord2.php" method="post">
		Naam: <input type="text" name="naam"><br>
		<input type="submit">
	</form>
	
</body>

</html>

Download hier het bestand.
<!--opdracht 2: maak, zo geautomatiseerd mogelijk, de opdracht conform de dia. -->

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

<head>
    <title>Opdracht 2</title>
</head>

<body>

<body>

	Voornaam: <BR>Achternaam: 
</body>

</body>

</html>

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


<!doctype html>
<html>
    <head>  
        <title>Opdracht 3</title>
        <script>
           
            function updateKeuze2(keuze1){
                var alle_opties = {"Nederland":["Noord-Holland","Zuid-Holland","Utrecht"],"Spanje":["Barcelona","Malaga","Sevilla"]};
                
                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 );                       
                }); 
                
                updateKeuze3 (keuze2);
            }
            
			function updateKeuze3(keuze2){
                var alle_opties = {"Noord-Holland":["Amsterdam","Alkmaar","Haarlem"],"Zuid-Holland":["Rotterdam","Den Haag","Leiden"],"Utrecht":["Utrecht","Amersfoort","Nieuwegein"],"Barcelona":["Anoia","Osona","Valles Oriental"],"Malaga":["Guadalteba","Nororma","Antequera"],"Sevilla":["Sierra Sur","Aljarafe","Sierra Norte"]};
                
                var keuze3 = document.getElementById("keuze3");

                keuze3.options.length = 0;                

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

        </script>

    </head>
    <body>

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

	    <select id="keuze1" name="keuze1" onchange="updateKeuze2(this)">
	        <option></option>
	        <option value="Nederland">Nederland</option><option value="Spanje">Spanje</option>	    </select>
	   
	    <select id="keuze2" name="keuze2" onchange="updateKeuze3(this)">
	    
	    </select>
	    
		<select id="keuze3" name="keuze3">
	    
	    </select>
	    
	    <input type="submit">
    
    </form>

    </body>
    
</html>

Download hier het bestand.
<!--opdracht 4: maak, zo geautomatiseerd mogelijk, de opdracht conform de dia. -->

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

<head>
    <title>Opdracht 4</title>
</head>

<body>

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

</html>

Download hier het bestand.