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 2
27-05-2009 16:49:47
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 3
27-05-2009 16:49:48
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 e-mailnieuwsbrief; 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 4
27-05-2009 16:49:48
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 e-mailen. 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 e-mailprogramma. 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.
13.2 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 e-mailnieuwsbrief 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 e-mail 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 e-mail. Meer over FormMail kunt u lezen op http://www.scriptarchive. com/readme/formmail.html.
DB_DRWCS4_H13.indd 5
27-05-2009 16:49:48
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.
13.2.1 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
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 6
27-05-2009 16:49:49
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 Afbeelding 13.3 De elementen van een formulier. direct naar die pagina of website); Afbeeldingveld, waarmee u een afbeelding kunt gebruiken als knop; 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.
13.3 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 7
27-05-2009 16:49:49
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 8
27-05-2009 16:49:49
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 13.5.
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 9
27-05-2009 16:49:50
Dreamweaver CS4 de basis
8. Voer in de linkerkolom de omschrijvingen van afbeelding 13.6 in.
13.3.1 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 13.8.
10
DB_DRWCS4_H13.indd 10
27-05-2009 16:49:50
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 13.10 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 13.11. 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 11
27-05-2009 16:49:50
Dreamweaver CS4 de basis
Afbeelding 13.10 De waarden in de keuzelijst.
Afbeelding 13.11 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 13.12. Naast een groep kunt u ook losse selectievakken plaatsen. In dit geval is een groep het beste.
Afbeelding 13.12 De selectievakken.
12
DB_DRWCS4_H13.indd 12
27-05-2009 16:49:51
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, e-mailadres, fax- en telefoonnummer gevraagd moeten worden.
13.4 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.
13.4.1 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 13
27-05-2009 16:49:51
Dreamweaver CS4 de basis
Gratis formulieren downloaden Op het internet zijn veel gratis formulieren te vinden. Zo kunt u op http://www.freedownloadmanager.org/downloads/webform_software/ 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 13.13.
Afbeelding 13.13 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 13.13.
3. 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 13.14.
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 e-mail wordt verstuurd. Met de opties Ingescha-
14
DB_DRWCS4_H13.indd 14
27-05-2009 16:49:51
13 Interactieve formulieren met gedragingen
Afbeelding 13.14 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 13.15. 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 13.15.
Afbeelding 13.15 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 15
27-05-2009 16:49:51
Dreamweaver CS4 de basis
Afbeelding 13.16 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.
13.5 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
