HTML: Formulieren

HTML: Formulieren
Formulieren
Begin met het kopiëren van de lay-out pagina (template.html) en sla deze op als
formulieren.html. Pas de titel en de voettekst aan. Zorg ook dat de startpagina
bereikbaar is vanaf het menu en pas het menu van de startpagina aan zodat je ook bij
formulieren.html kan komen. Zorg er ook voor dat deze pagina als kop én als titel*
‘Formulieren’ heeft.
* Zoals uitgelegd in de presentatie
Om goed met formulieren te kunnen werken, moet een website PHP of javascript
gebruiken. Omdat jullie dat nog niet kunnen, hebben wij een PHP script gemaakt dat
jullie kunnen gebruiken. Om dat te kunnen gebruiken hebben we een iframe nodig dat
het PHP bestand weergeeft. Voeg daarom een iframe toe. De iframe heeft de “name”
attribuut nodig om goed te kunnen werken, dus voeg de “name” attribuut toe en kies
een naam (bijvoorbeeld ‘resultaat’).
Nadat de iframe gemaakt is, kun je nu een form toevoegen. Geef de form een “action”
attribuut met als waarde “​
http://smcaccent.nl/verwerk.php​
”. Geef het form ook de
attribuut “target” met als waarde de naam van de iframe. Het laatste wat moet
gebeuren voordat je de form kan gaan vullen is een verzendknop toevoegen.
Nu kunnen we de form gaan vullen. Begin met een select met een “name” attribuut.
Voeg daarna 10 options toe, voor de cijfers van 1 tot en met 10. Vergeet het “value”
attribuut niet! Test nu of je een getal kan kiezen en of de iframe dan laat zien welk
getal jij gekozen hebt als je op de verzendknop drukt.
St. Michaël College
|
Programmeren kun je leren! | 2014-2015
HTML: Formulieren
Als de select goed werkt gaan we nog een input toevoegen: een tekstveld. Vergeet niet
om de input een “name” attribuut te geven. Als je klaar bent, vergeet dat niet te testen
of de iframe nu zowel het gekozen getal als de ingevulde tekst laat zijn.
Wanneer je klaar bent, laat je je werk controleren. Vervolgens kun je verder/beginnen
aan dat JavaScript opdrachten of probeer je een enquête formulier te maken met
keuze bolletjes (​
radio buttons​
) en aankruis vakjes (​
checkboxes​
). Ook dit formulier laat
je verzenden naar het standaard verwerk-script.
St. Michaël College
|
Programmeren kun je leren! | 2014-2015