Formulieren maken met Dreamweaver CS 4 In deze handleiding leer je om een formulier en elementen die je binnen een formulier kunt gebruiken, te ontwerpen met Dreamweaver. Het uitgangspunt is dat dit zoveel mogelijk gebeurt in Design View.
Tekstvelden en button We beginnen met een zeer eenvoudig formulier dat twee tekstvelden en een button bevat. 1. Zorg er steeds voor dat je in de Classic-mode staat: 2. Zorg dat je in Design View staat 3. Kies in de knoppenbalk voor het tabblad Forms: 4. We zetten eerst een formulier op de pagina door Insert Form te kiezen: Je krijgt dan een rood kader op je scherm: Het rode kader geeft de grenzen van het formulier aan. 5. Vervolgens zetten we twee tekstvelden in het formulier. Kies Text Field: 2
Je krijgt dan een nieuw venster om de gegevens van het tekstveld in te vullen: Stel we willen de voornaam en de achternaam laten invullen, dan is het eerste tekstveld de voornaam. De ID is het gegeven dat straks overgedragen moet worden. Het Label geeft aan, wat een gebruiker moet invullen. Bij de keuzerondjes kies je voorlopig Attach label tag using for attribute. De rest kun je leeg laten. Je krijgt dan het volgende op het scherm: Herhaal dit nog een keer voor achternaam; ID:achternaam, Label:Achternaam. Forceer eerst een lege regel door op ENTER te drukken. 3
Het resultaat zou dan als volgt moeten zijn: 6. Nu zetten we er nog een knop onder. Dit wordt een button genoemd: Forceer eerst weer een nieuwe regel met ENTER. Klik dan op het invoegen van de button, zie schermafbeelding. Je krijgt dan een nieuw venster: Geef alleen de button een ID en laat de rest leeg; we geven een button niet een label. We willen wel de tekst op de knop straks wijzigen. 4
Je krijgt dan het volgende: De elementen staan er nu op. We gaan vervolgens met het Properties Panel het formulier verder af maken. 7. Selecteer de button. In het Properties Panel staan de eigenschappen: We wijzigen de Value in Verzenden; de tekst op de button. 8. Je kunt door het selecteren van de tekstvelden, de eigenschappen ook verder instellen: Een paar opmerkingen hierover: Char width geeft aan hoe breed het tekstveld is. Max char: geeft aan hoeveel tekens er ingevuld mogen worden. Bij de radio buttons kun je nog kiezen voor een bepaald type tekstveld; kies je voor Password dan kun je niet zien welke tekens je ingevuld hebt. Disabled betekent dat het tekstveld gegrijsd in de browser te zien is, je kunt dus niets invullen. Read-only betekent dat een bezoeker van de pagina niets kan wijzigen in het tekstveld. Intil val betekent dat er vast een standaardwaarde in het tekstveld komt te staan. 5
9. Tot slot moeten we nog wat instellen bij het formulier zelf. We moeten aangeven welke actie er ondernomen moet worden om het formulier af te handelen. Selecteer het formulier door op het rode kader te klikken. Het Properties Panel geeft de eigenschappen van het formulier: Het is wel zo netjes om het formulier een nette naam te geven dus wijzigen we de Form ID in een naam naar keuze. Let op herkenbare namen! Het belangrijkste is natuurlijk het instellen van de Action. Je kunt verwijzen naar de eigen bestandsnaam of met de knop Browse to File een ander bestand kiezen: Het is ook mogelijk op de super globale variabele $_SERVER te gebruiken: <?php echo $_SERVER["PHP_SELF"]?> Bovenstaande stappen zijn nodig om een formulier in je pagina te plaatsen. De afhandeling moet je uiteraard zelf maken. Dit kan met diverse scripttalen. We bekijken vervolgens ook nog een paar andere veel voorkomende elementen in een formulier. Radio Buttons (selectierondjes) Deze gebruik je als je een bezoeker een keuze wilt laten maken uit een aantal opties waarvan er slechts één toegepast kan worden. Geslacht bijvoorbeeld. Deze voegen we ook in het eerder gemaakte formulier onder het tekstveld voor Achternaam. 1. Kies Radio Button: 6
2. Je krijgt dan een nieuw venster: Na het klikken van OK zie je het volgende: Een punt van aandacht is het volgende. Indien je de radio button selecteert dan zie je in het Properties Panel de eigenschappen voor dit element: De Radio Button heet nu nog radio. Dat lijkt merkwaardig. Bij tekstvelden kwam hier de naam van het tekstveld. Bij Radio Button moet je dat zelf doen omdat het meestal zo is dat Radio Buttons bij elkaar horen en dus over dezelfde variabele gaan. De ID moet uiteraard wel verschillen. Wijzig de naam dus bijvoorbeeld in geslacht. De Initial State kun je gebruiken als je vast een standaardwaarde wil vastleggen. Een ander overwegingpunt: De Checked Value heeft als waarde:man. Dat is de waarde die doorgegeven wordt bij verzenden. Het is goed om er over na te denken, als het bijvoorbeeld naar een database moet, of dit de geschikte waarde is. Dit geldt overigens ook voor de waarden die uit andere formulierelementen komen. 7
3. We zetten nog een radio button op het scherm, nu om geslacht vrouw te kunnen kiezen. Deze kan naast de eerste radio button: Wijzig vervolgens met behulp van het Properties Panel nog even de naam: List menu (selectielijst) Dit formulier element wordt veel toegepast als een bezoeker een keuze kan maken uit meerdere opties. Het ook heel handig om invoerfouten van bezoekers te vermijden. 1. Kies List/Menu uit de knoppenbalk: 8
2. Je krijgt dan weer een venster om het nodige in te vullen: 3. Indien je nu op OK klikt wordt het menu geplaatst. Er moeten natuurlijk nog wel items in dit menu komen. Dat doen we met het Properties Panel. Selecteer het menu en kijk naar het Properties Panel: We gaan nu de item toevoegen door op List Values te klikken: Een valkuil is hier het invullen. We hoeven hier maar een simpele lijst met woonplaatsen te maken. Hier maakt Dreamweaver weer onderscheid met wat een bezoeker van de pagina ziet in het Menu en welke data er verzonden moet worden. Stel we hebben de plaatsen Enkhuizen, Stedebroec, Hoorn en Medemblik en je gebruikt in een database afkortingen voor deze plaatsen dan moet je bij Value dus die afkortingen zetten. Indien je dat niet nodig hebt om onderscheid te maken dan kun je Value leeglaten. Opmerking: Je kunt op deze wijze overigens ook in één keer een groep van Radio Buttons aanmaken door deze optie te kiezen uit de knoppenbalk: 9
Je krijgt dan in het nieuwe venster de mogelijkheid om in één keer alle opties aan te maken: Indien je veel Radio Buttons hebt, kun je ze zelfs organiseren in een tabel. Checkboxes (selectievakjes) Deze zijn vooral handig als een gebruiker meerdere opties te gelijk wil selecteren, hetgeen met de Radio Buttons juist niet kan. 1. Kies in de knoppenbalk voor CheckbBox: 2. Het nieuwe venster opent zich: We vullen daar wat gegevens in. Bedenk dat het Label hetgeen is wat de bezoeker ziet! 10
Checkbox Group Vaak heb je de situatie dat er meerdere opties zijn. Het is dan handiger om een Checkbox Group te gebruiken: 1. We kunnen dan direct alle opties maken: Let hier ook weer goed op het verschil tussen Label (wat ziet de bezoeker) en Value (wat wordt doorgegeven). 11