Interactieve formulieren met gedragingen

Transcriptie

1 13 Interactieve formulieren met gedragingen De belangrijkste punten van hoofdstuk 13 Formulieren gebruiken. Formulieren opmaken. Gedragingen gebruiken met formulieren. Een formulier laten valideren. DB_DRWCS4_H13.indd :49:47

2 Wat leert u in dit hoofdstuk? Waarom formulieren steeds belangrijker worden op een website. Wat formulieren zijn en hoe u deze kunt inzetten. Hoe een formulier wordt opgebouwd en met welke elementen. Het valideren van een formulier met behulp van gedragingen. DB_DRWCS4_H13.indd :49:48

3 Dreamweaver CS4 de basis 13.1 Interactie met de bezoeker Formulieren maken een website interactief. Behalve een goede vormgeving van de juiste informatie is het noodzakelijk interactieve onderdelen op de website te implementeren. Elke professionele website zal minstens één interactief onderdeel moeten omvatten. Interactieve formulieren worden ook weleens Rich Internet Applications genoemd. Interactie met de bezoeker van uw website is mogelijk via: een Flashgame, waarbij gebruikers na het spelen van het spel hun gegevens invoeren; een aanvraagformulier, waarbij de gebruiker informatie kan aanvragen; een reactieformulier, waarbij de bezoeker een reactie kwijt kan over de geboden inhoud; een forum, waar verschillende bezoekers samen online een discussie voeren; een inschrijvingsformulier, voor het ontvangen van een nieuwsbrief; een optie voor het downloaden van bestanden, formulieren, proefproducten enzovoort; een trainingsaanvraag, waarbij de bezoeker aangeeft welke training hij wil volgen. Deze mogelijkheden maken een interactief formulier tot een van de meest belangrijke onderdelen van een website. Afbeelding 13.1 Formulieren worden steeds belangrijker op een website. DB_DRWCS4_H13.indd :49:48

4 13 Interactieve formulieren met gedragingen Gegevens professioneel opvangen Een formulier wordt gebruikt aan de voorkant van de website, ook wel de front-end genoemd. Na de invoer van de gegevens door de gebruiker kunt u deze gegevens naar u laten en. In Dreamweaver is dat technisch eenvoudig te realiseren. Het is echter professioneler de gegevens in een database te plaatsen. Deze kunt u dan beschikbaar maken via het web. Zo kunt u overal ter wereld de gegevens raadplegen en kunnen ze niet kwijtraken in uw programma. Gegevens die in een database worden opgeslagen kunnen eenvoudig worden geanalyseerd en gerapporteerd. De zogenaamde back-end kan bijvoorbeeld worden geprogrammeerd in ASP, ASP.NET, PHP, ColdFusion of JSP. Dreamweaver ondersteunt deze (script)talen Formulieren op een website plaatsen Een formulier wordt meestal strak vormgegeven. De formulierelementen, zoals de tekstvakken, worden doorgaans in een tabel geplaatst. Hiernaast komt het zogenaamde label. Dat legt uit wat in het vak ingevuld moet worden. De meest voor de hand liggende manier om een formulier vorm te geven, is het gebruik van tabellen. Toch kunt u ook met lagen mooie effecten creëren, zodat een formulier bijvoorbeeld zwevend op een achtergrond kan worden geplaatst. Voor een formulier geldt maar één vereiste: het moet werken. Een formulier kan het beste buiten de sjabloon worden geplaatst, aangezien de validatietechniek van een formulier (JavaScript) vaak op plekken moet staan die door een sjabloon zijn geblokkeerd. Dan is het formulier wel zichtbaar, maar zal het niet werken. Voor een formulier kennen we de volgende plaatsen op de website: een inschrijving voor een nieuwsbrief wordt meestal op de binnenkomende pagina (index) geplaatst; een zoekformulier wordt meestal ook op de binnenkomende pagina geplaatst, zodat de bezoeker direct naar de benodigde informatie kan zoeken; een boekingsformulier wordt steeds vaker in de lagere niveaus van een website geplaatst; Manieren van formulierverwerking Een van de meest gebruikte manieren van formulierverwerking is via FormMail. Dit is een technische serverside-applicatie waarmee u de professioneel kunt laten versturen. FormMail is een universele manier van formulierverwerking. Met het instellen van enkele variabelen kan heel gemakkelijk een willekeurig formulier worden verwerkt en de gegevens worden verstuurd per . Meer over FormMail kunt u lezen op com/readme/formmail.html. DB_DRWCS4_H13.indd :49:48

5 Dreamweaver CS4 de basis Afbeelding 13.2 Aanvraagformulier op AtMost.nl. een aanvraag- of contactformulier wordt dieper op de website geplaatst als een aparte pagina De formulierelementen Een formulier bestaat uit verschillende elementen. Elk element is geschikt voor een bepaalde handeling binnen het formulier. In Dreamweaver bevat de werkbalk Invoegen een grafisch overzicht van alle formulierelementen. In afbeelding 13.3 ziet u de elementen van links naar rechts: Formuliergebied (Form) plaatst de tags <form></form> rondom het gebied. Het formuliergebied zorgt voor de activering van het formulier; Tekstvak, waarin de gebruiker gegevens kan typen. Het tekstvak kan meerdere regels met gegevens bevatten. U kunt het aantal regels en de breedte zelf instellen; het Verborgen veld kan gegevens meesturen met een formulier die de gebruiker niet ziet. Denk hierbij bijvoorbeeld aan het unieke ip-adres van de bezoeker; het Keuze- of selectievak kan aan- of uitgevinkt worden. Een keuzevak wordt DB_DRWCS4_H13.indd :49:49

6 13 Interactieve formulieren met gedragingen meestal gebruikt voor het aanbieden van verschillende keuzes, zoals de opties bij een product; een Keuzerondje wordt gebruikt voor de opties Ja of Nee. Anders dan het keuzevak is de keuzeknop gegroepeerd; deze wordt bijvoorbeeld gebruikt bij de keuze van het geslacht; Groep keuzerondjes is een verzameling keuzeknoppen waaruit de gebruiker een keuze kan maken. Anders dan bij een keuzevak kan bij een groepering maar één keuze worden gemaakt. de Keuzelijst of Lijst/menu toont een uitklaplijst(je) met keuzes; het Snelmenu is een voorgeprogrammeerde keuzelijst met : hiermee kunt u hyperlinks plaatsen waaruit de gebruiker kan kiezen (na het kiezen van een link springt de gebruiker direct naar die pagina of website); Afbeeldingveld, waarmee u een afbeelding kunt gebruiken als knop; Afbeelding 13.3 De elementen van een formulier. Bestandveld, waarmee u een bestand kunt opzoeken op de harde schijf. Deze optie wordt bijvoorbeeld gebruikt bij sollicatieformulieren waarbij een cv meegestuurd wordt in de vorm van een aangehecht bestand; de Knop (button) is de bevestigingsknop, de Reset-knop of een niet-gedefinieerde knop waaraan u een effect kunt koppelen, zoals het laten openen van een nieuw venster wanneer op de knop wordt gedrukt; het Label is de tekst die naast een formulierelement is geplaatst. Het label kan aan het element worden gekoppeld om zo een vaste combinatie te vormen in het formulier; ook een Veldenset kan gerelateerde formulierelementen bij elkaar houden; extra in Dreamweaver CS4 zijn de opties voor het gebruik van zogenaamde AJAXeffecten met Spry en Spry-validatie. Zo worden dynamische formulierelementen op een juiste manier opgebouwd Een formuliertabel aanmaken We gaan nu een compleet formulier maken waarin de bruikbare elementen worden gecreëerd. Vervolgens gaan we ervoor zorgen dat het formulier ook daadwerkelijk functioneert. Oefening 13.1 Een formulier ontwerpen We gaan een aanmeldingsformulier voor een training aanmaken. DB_DRWCS4_H13.indd :49:49

7 Dreamweaver CS4 de basis 1. Creëer een nieuw, leeg document met Bestand > Nieuw > Lege pagina > Documenttype > HTML > Geen > Maken. 2. Sla dit nieuwe document op als formulier.html in de projectmap. Voer als titel in: Formulieren maken in Dreamweaver CS4. 3. Voorzie het document van de nodige pagina-eigenschappen voor de links, tekstkleur en het lettertype. 4. Om het formulier werkbaar te maken, hebben we een formuliergebied nodig. Voeg dit in met menubalk Invoegen > Formulier > Formulier. Afbeelding 13.4 Een formuliergebied invoegen. DB_DRWCS4_H13.indd :49:49

8 13 Interactieve formulieren met gedragingen 5. Voeg nu een tabel in met Invoegen > Tabel en voer acht rijen en twee kolommen in. Bevestig vervolgens met OK, zie afbeelding Afbeelding 13.5 Een tabel in het formuliergebied invoegen. 6. Kleur de tabel met behulp van de eigenschappen van de tabel. 7. Voeg de bovenste twee cellen samen. Typ in deze cel de tekst Aanmelding. Afbeelding 13.6 De invoeromschrijvingen invoegen. DB_DRWCS4_H13.indd :49:50

9 Dreamweaver CS4 de basis 8. Voer in de linkerkolom de omschrijvingen van afbeelding 13.6 in De formulierelementen in de tabel plaatsen We hebben nu de vormgeving en het geraamte voor ons formulier op het scherm staan. Vervolgens kunnen we de losse elementen op de juiste plaats zetten. Bij het invoegen van deze elementen zal in Dreamweaver CS4 automatisch het dialoogvenster van het element verschijnen. Kies voor de optie Geen label tag om te voorkomen dat een tekstlabel direct naast het formulierelement wordt geplaatst en we dus een dubbele omschrijving hebben. Afbeelding 13.7 Een formulier wel of niet van labels voorzien. Oefening 13.2 Het formulieren van de juiste tekstvakken voorzien 1. Voeg twee tekstvakken in voor Voornaam en Achternaam; het resultaat kunt u zien in afbeelding DB_DRWCS4_H13.indd :49:50

10 13 Interactieve formulieren met gedragingen Afbeelding 13.8 Een formulier voorzien van een tekstvak. 2. Voeg twee keuzerondjes in naast Geslacht. Geef geslacht als naam bij de optie Id. Voer vrouw in bij Terugloop met labeltag voor de labels man en vrouw in het dialoogvenster keuzerondje. Afbeelding 13.9 De waarden voor geslacht. 3. Voer een lijst/menu zonder labeltag in naast de tekst Trainingslocatie in de tabel. 4. Kies in het paneel Eigenschappen onderin voor Lijstwaarden. 5. Neem de gegevens over in de Lijstwaarden zoals getoond in afbeelding en bevestig met OK. In de Lijstwaarden staan in de linkerkolom de waarden die de gebruiker ziet. Rechts staan de technische namen ( variabelen ) die bij verwerking van het formulier belangrijk zijn. Vul altijd beide waarden in. 6. Voeg nu een tekstgebied zonder label in naast de tekst Extra verzoek voor de training in de daarvoor bestemde cel. Zie afbeelding Een tekstgebied kent meerdere regels (multi lines), anders dan een tekstveld dat maar één regel kent. Technische namen van formulierelementen Een tekstveld of een keuzerondje zijn voorbeelden van formulierelementen. Deze elementen dienen technisch een unieke naam te hebben, een Id, om zo de gegevens aan te kunnen sturen of te kunnen versturen. Gebruik bij voorkeur kleine letters en begin niet met een hoofdletter bij het geven een Id of naam. Ook is het aan te bevelen om logische namen te gebruiken: gebruik het woord voornaam bij het tekstveld dat vraagt om de invoer van een voornaam. Namen mogen underscores bevatten, maar verder geen vreemde (lees)tekens. 11 DB_DRWCS4_H13.indd :49:50

11 Dreamweaver CS4 de basis Afbeelding De waarden in de keuzelijst. Afbeelding Het tekstveld. 7. Plaats naast de tekst Ik ontvang de bevestiging graag per een groep van drie vierkante selectievakken onder elkaar en voorzie deze van de labels zoals getoond afbeelding Naast een groep kunt u ook losse selectievakken plaatsen. In dit geval is een groep het beste. Afbeelding De selectievakken. 12 DB_DRWCS4_H13.indd :49:51

12 13 Interactieve formulieren met gedragingen Einde van Reset De Resetknop komt steeds minder voor in formulieren. De verwarring over de plaats (naast de Verzendknop) geeft teveel irritatie. Daarom kiezen usabilityspecialisten en editors steeds vaker voor het weglaten van de knop Reset. Wees eerlijk: heeft u Reset weleens gebruikt in een formulier? 8. Voeg ten slotte een knop in de onderste rij van de tabel in met de optie Knop. Er verschijnt nu een knop met als label Verzenden. In de volgende paragraaf veranderen we de eigenschappen van de knoppen die we gemaakt ebben. Indien u een formulier commercieel gaat inzetten, zal natuurlijk ook naar een postadres, adres, fax- en telefoonnummer gevraagd moeten worden De eigenschappen van de formulierelementen Elk element in een formulier kent eigenschappen. Zo kan een tekstvak een visuele breedte van dertig tekens hebben. Een knop kan een Reset-knop of een Verzendknop zijn. Een tekstgebied kan meerdere regels en kolommen omvatten. Indien de gegevens uit het formulier in een database terechtkomen, zullen de formulierelementen de juiste eigenschappen moeten hebben om valide gegevens in de database te kunnen invoeren. De namen die in de databaseprogrammering per element kunnen worden meegegeven, worden gebruikt om in gegevens in de database op de juiste plek terecht te laten komen. Indien een gebruiker bij het invulveld naam zijn of haar naam invult, dan zullen deze gegevens in de database in het veld naam terecht moeten komen. Twee voorbeelden waarbij de eigenschappen van de formulierelementen belangrijk zijn: de breedte van de voor- en achternaam staat in de database op bijvoorbeeld veertig tekens: ook in het formulier zullen de tekstvakken dan eenzelfde breedte moeten hebben om een foutmelding te voorkomen; in de database kan een veld twee waarden aannemen, bijvoorbeeld man of vrouw. In het formulier zal dan óf de waarde man óf de waarde vrouw aangegeven moeten worden Formulierelementen instellen De elementen zijn nu visueel in het formulier geplaatst. De eigenschappen zullen bepalend zijn voor het invoeren door de gebruiker. Zo is de breedte van een invulveld belangrijk voor de invoer in een database. Ook kunt u de maximale hoeveelheid 13 DB_DRWCS4_H13.indd :49:51

13 Dreamweaver CS4 de basis Gratis formulieren downloaden Op het internet zijn veel gratis formulieren te vinden. Zo kunt u op gratis complete oplossingen downloaden waarin formulieren worden gebruikt. De techniek die het formulier verwerkt, wordt er gratis bij geleverd. karakters in een invulveld bepalen en de breedte van bijvoorbeeld een voornaam op maximaal twintig karakters zetten. Dit wordt ook wel usability genoemd. Dit is de brug tussen techniek marketing. Oefening 13.3 Het formulier van de juiste waarden voorzien 1. Klik op het tekstvak Voornaam om de eigenschappen te bekijken in het paneel Eigenschappen, zoals getoond in afbeelding Afbeelding De eigenschappen van het tekstvak Voornaam. 2. Voer als naam van het tekstvak voornaam in. Gebruik daarbij kleine letters. Voer bij Tekenbreedte de waarde 40 in en doe hetzelfde bij Maximum aantal tekens (de tekenbreedte is de visuele breedte van het tekstvak in tekens, het maximum aantal tekens betreft het aantal tekens dat kan worden ingevoerd). Voer ook daar de waarde 40 in. Als u bij Type de optie Meerdere regels kiest, zal het tekstvak zich als een tekstgebied gaan gedragen. De optie Wachtwoord zal de ingevoerde gegevens afschermen en niet op het scherm tonen. De Beginwaarde is de standaardwaarde die in het tekstvak is te zien. Met de optie Klasse kunt u een aangemaakte CSS-stijl toevoegen aan het formulierelement. Zie opnieuw afbeelding Selecteer het keuzerondje met het label man. Voer bij de eigenschappen van dit element geslacht in. De waarde voor de Ingeschakelde waarde is man, zie afbeelding Deze waarde is erg belangrijk. Indien de gebruiker van het formulier deze knop aanklikt, zal deze waarde actief worden. De Ingeschakelde waarde is dan de waarde die naar de database wordt gestuurd. Dit is ook de waarde die per wordt verstuurd. Met de opties Ingescha- 14 DB_DRWCS4_H13.indd :49:51

14 13 Interactieve formulieren met gedragingen Afbeelding De eigenschappen van keuzerondje man. keld en Niet ingeschakeld kunt u een waarde actief of inactief maken. Indien een gebruiker geen keuze heeft gemaakt, zal deze standaardwaarde worden gebruikt. 4. Herhaal deze handelingen voor de keuzeknop vrouw, maar laat de optie man ingeschakeld, zoals u bij stap 3 hebt ingesteld. Dat betekent dat bij het invullen de standaardoptie man bij geslacht al staat geselecteerd. Als we de keuzelijst voor de trainingslocatie selecteren ziet u de eigenschappen van afbeelding Bij een keuzelijst kunt u kiezen uit de opties Menu of Lijst. Een Menu is een uitklapmenu dat alle opties laat zien als de gebruiker op het element klikt. Een Lijst is een vaste lijst van gegevens die uitklapt en niet meer inklapt. Als u een Lijst gebruikt, kunt u de hoogte instellen en aangeven of de gebruiker verschillende opties kan selecteren. De optie Geselecteerd geeft de mogelijkheid een bepaalde keuze alvast klaar te zetten in het menu. De gebruiker ziet deze waarde in de keuzelijst voordat deze uitklapt. 5. Zet de standaardwaarde in de keuzelijst voor de trainingslocatie op Amsterdam. 6. Voer in het vak direct onder Lijst/Menu de waarde locatie in, zie afbeelding Afbeelding De lijst met locaties. 7. Geef het tekstgebied naast Extra verzoek voor de training de naam extra_vraag. Deze naam kunt u onder Tekstveld invoeren. Stel de Tekenbreedte in op 40 tekens. Voer bij het aantal regels de waarde 5 in. U ziet dat het tekstgebied de breedte en de hoogte van de tabel beïnvloedt. 8. Geef de groep van drie selectievakken de waarde ontvangen_per. De Ingeschakelde waarden worden respectievelijk post, mail en fax. Omdat de groep één naam heeft kan de gebruiker maar één optie kiezen. Indien de namen van de vakken verschillend zijn zijn meerdere opties 15 DB_DRWCS4_H13.indd :49:51

15 Dreamweaver CS4 de basis Afbeelding Het tekstgebied opmaken. mogelijk. De selectievakken worden overigens vaak gebruikt voor een keuze met meerdere opties die aangeklikt kunnen worden. Ook een keuzevak kan worden aan- of uitgezet. Een ingeschakelde waarde wordt automatisch meegestuurd naar bijvoorbeeld een database. De Verzenden-knop onderaan heeft geen unieke waarde nodig. Naast Verzenden en Reset kent de knop de optie Geen, die is bedoeld voor een knop waaraan bijvoorbeeld een JavaScript wordt toegevoegd. Vervolgens gaan we het formulier testen in de browser Het formulier verzenden Het invulformulier is nu bijna compleet. De gegevens kunnen worden ingevoerd. De nodige begrenzingen voor het invoeren van gegevens in de tekstvakken zijn aangegeven. De juiste knoppen zijn geplaatst. Maar het formulier werkt nog niet. Als u het formulier bevestigt, gebeurt er nog niets. Oefening 13.4 Het formulier verzendklaar maken 1. Selecteer nu het formulier door op de rode rand te klikken of kies in de statusbalk de optie Form. U kunt tevens in de statusbalk op de tag <form> klikken. De eigenschappen van het formulier zijn te zien in het paneel Eigenschappen. De optie Actie is belangrijk. Voer hierbij in: mailto: info@mijnwebsite.nl. Het formulier is nu verzendklaar. Als u op de bevestigingsknop klikt, zal de optie Actie actief worden. In dit geval zal een worden opgemaakt met info@mijnwebsite.nl als geadresseerde. 2. Vervang het adres info@mijnwebsite.nl door uw eigen adres. Een voorwaarde is dat gebruikers van het formulier een mailprogramma, zoals Outlook, Outlook Express, Thunderbird of Windows Mail, ingesteld hebben op hun computer. De Methode is de manier van verzenden. De optie Post is de veiligste manier van verzenden, zie tevens het kader voor verdere toelichting. 16 DB_DRWCS4_H13.indd :49:52

16 13 Interactieve formulieren met gedragingen Verzenden met Post of Get Voor het verzenden van de gegevens kunt u kiezen uit Post of Get. Als u kiest voor Get zullen de ingevoerde waarden en namen van de formulierelementen te zien zijn in de locatiebalk van de browser. Het aantal tekens dat met deze methode kan worden verstuurd is beperkt. Als u kiest voor Post zullen de gegevens van het formulier anoniem worden verstuurd. Sommige applicaties, die bijvoorbeeld databases aansturen, vereisen óf Post óf Get. Een ASP-applicatie die gegevens uit het formulier verwerkt, kan er als volgt uitzien: C <% Option Explicit %> <html> <body> <% Response.Write Hallo & Request.Form( naam ) & uit & Request. Form( land ) %> </body> </html> Deze oplossing vereist Post als manier van verzenden. Op de Mac komt een oplossing met PHP vaak voor Een formulier valideren Met het valideren van een formulier zorgt u ervoor dat de gegevens gecontroleerd worden voordat actie wordt ondernomen. Het valideren van een formulier gebeurt bijvoorbeeld voordat een wordt verzonden. De validatie vindt plaats nadat op de Bevestigingsknop is geklikt. We gaan ons formulier nu valideren. Oefening 13.5 Het formulier valideren 1. Verwijder allereerst de standaardwaarden bij de tekstvakken Voornaam en Achternaam. 2. Selecteer de Bevestigingsknop. Activeer het paneel Gedragingen (Behavior). Klik op het zwarte plusteken. Nu verschijnt het menu zoals te zien links in afbeelding Kies in de lijst van Gedragingen voor Formulier valideren. Het dialoogvenster verschijnt nu. 4. Selecteer bij elk tekstvak de optie Vereist. 17 DB_DRWCS4_H13.indd :49:52

17 Dreamweaver CS4 de basis Afbeelding De gedragingen, met onder andere Validatie, bekijken. Afbeelding De gedragingen gebruiken voor validatie. 18 DB_DRWCS4_H13.indd :49:53

18 13 Interactieve formulieren met gedragingen Met de optie Vereist verplicht u gebruikers tekstvakken in te vullen. Helaas kunt u alleen tekstvakken valideren met deze Gedraging. Onder de motorkap wordt een JavaScript aangemaakt, die na het aanklikken van de knop controleert of de tekstvakken niet leeg zijn. Tevens kunt u de invoer controleren op de vraag of het gaat om tekst of om getallen. U kunt controleren of de invoer in een tekstvak een geldig adres betreft. Tevens kunt u een bepaald bereik van getallen aangeven. Meer validatiescripts De validatie die Dreamweaver biedt, is niet voor elk formulier voldoende. Op internet.com/forms/ kunt u nog meer scripts vinden die de ingevoerde waarden controleren. Zo kunt u controleren of er één of meer keuzen zijn gemaakt, of een punt of een komma is ingevoerd en of één- of tweemaal op de bevestigingsknop is geklikt. Oefening 13.6 De melding vertalen Het doel van deze oefening is het vertalen van de meldingen die de gebruiker krijgt als deze het formulier niet goed invult. De validatiemelding van afbeelding is standaard in het Engels. De JavaScript-code die Dreamweaver heeft gecreëerd staat in de header van het document. Zie hoofdstuk 2 en 3 voor de toelichting op het onderdeel header van een HTML-document. 1. Zoek in de codeweergave de melding op door te zoeken naar is required met CTRL-F of Command-F. 2. Vertaal de melding naar het Nederlands: verander is required in is verplicht Een formulier aan een database koppelen Een formulier aan een database koppelen biedt veel voordelen: zo kunt u gegevens langdurig opslaan, u kunt gegevens eenvoudig analyseren en de gegevens kunnen in andere vormen weer worden hergebruikt. Dreamweaver maakt het mogelijk een databasekoppeling op te zetten in bijvoorbeeld ASP of PHP. Deze techniek leest de gegevens uit het formulier en verstuurt deze naar de database. De browser op de computer verstuurt een verzoek naar een database. Dit verzoek wordt in het Engels een request genoemd. De database stuurt een antwoord (reply) terug naar de browser. Het verzoek dat naar de database gaat, wordt vanuit een formulier verstuurd. Een verzoek naar de database kan bijvoorbeeld een sollicitatieformulier zijn. Alle ingevulde gegevens gaan in een database en de database geeft aan dat alles juist in de database is geplaatst. 19 DB_DRWCS4_H13.indd :49:53

19 Dreamweaver CS4 de basis Oefening 13.7 Een aanmeldingsformulier aanmaken Het doel van deze oefening is het zelfstandig opmaken van een formulier dat gebruikt kan worden voor de aanmelding voor een nieuwsbrief. 1. Begin een nieuwe lege pagina en sla deze op als oefeningformulier.html. 2. Maak een tabel van 5 rijen en 2 kolommen en voorzie deze van een lichte opmaak. 3. Vul de tabel met de invulvelden voornaam, achternaam, adres en geslacht. 4. Voeg een verzendbutton (Submit button) toe en laat de gegevens en naar uw eigen adres. 5. Voorzie het formulier van een validatie van de (invul)velden. 20 DB_DRWCS4_H13.indd :49:53

20 13 Interactieve formulieren met gedragingen 21 DB_DRWCS4_H13.indd :49:53