Formulieren maken met Dreamweaver CS 4/CS 5

Transcriptie

1 Formulieren maken met Dreamweaver CS 4/CS 5 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.

2 Hoofdstuk 1 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: Je krijgt dan een nieuw venster om de gegevens van het tekstveld in te vullen: 2

3 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. Het resultaat zou dan als volgt moeten zijn: 3

4 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. Je krijgt dan het volgende: 4

5 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

6 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. Indien je niets invult wordt verwezen naar de eigen bestandsnaam of je kunt 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"]?>, deze verwijst ook naar de pagina waar het formulier op staat. Dit laatste is eigenlijk wel een goede methode! 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 gaan in het volgende deel kijken hoe dat met PHP gaat. 6

7 Hoofdstuk 2 Formulier afhandeling met PHP De waarden die in de tekstvelden worden ingevuld, moeten uitgelezen worden. We kijken in Codeview even naar de HTML-code die door Dreamweaver gegenereerd is: <form id="invullen_naam" name="invullen_naam" method="post" action="<?php echo $_SERVER["PHP_SELF"]?>"> <p> <label for="voornaam">voornaam</label> <input type="text" name="voornaam" id="voornaam" /> </p> <p> <label for="achternaam">achternaam</label> <input type="text" name="achternaam" id="achternaam" /> </p> <p> <input type="submit" name="verzendknop" id="verzendknop" value="verzenden" /> </p> </form> Dreamweaver geeft behalve name ook een id. Deze is voor het uitlezen van het formulier niet van belang maar is bijvoorbeeld belangrijk bij gebruik van Javascript o.i.d. Indien we nu PHP gaan gebruiken, dan laten we PHP de waarden uitlezen die ingevuld zijn bij name. Deze waarden worden opgeslagen in één variabele met de naam $_POST, het gebruik van hoofdletters is verplicht. Dit is een array, in deze variabele kunnen meerdere waarden opgeslagen worden. Je krijgt dan hier: $_POST[ voornaam ] en $_POST[ achternaam ]. De hoofdletters geven aan dat het een super globale is. We gaan de bijbehorende PHP-code invoeren. Ga naar Codeview en plaats de cursor in de body. We zetten de volgende code in het PHP-blok: <?php $voornaam=$_post["voornaam"]; $achternaam=$_post["achternaam"]; echo $voornaam." ".$achternaam;?> 7

8 We geven de variabele voornaam de waarde die in de variabele $_POST[ voornaam ] zit. Deze waarde wordt gelezen uit het formulier daar waar de naam, voornaam is (name="voornaam"). Hetzelfde geldt voor achternaam. Het is overigens niet verplicht dat de variabele in PHP dezelfde naam heeft als de naam in het formulier. Het volgende zou dus bijvoorbeeld ook mogen: $vnaam=$_post["voornaam"]; We slaan de wijzigingen op en m.b.v. F12 bekijken we het formulier in de browser: Het lijkt op een foutmelding maar het invullen lukt wel: De Notice ontstaat omdat het formulier direct wordt uitgelezen. Het formulier is dan nog leeg en zit er geen waarden in de POST-array. We gaan dat oplossen, het staat immers een beetje slordig. Zie de volgende code: 8

9 Op regel 11 gaan we eerst controleren of de array $_POST niet leeg is. Is dat niet zo, de array is dus leeg, dan gaat de uitvoer verder bij else, op regel 17 en wordt het formulier gelezen en en daarna is de actie dat je weer op de pagina terugkomt, dus op regel 11. Nu zijn de velden wel gevuld dus wordt het eerste deel van de if uitgevoerd en komen de voornaam en de achternaam op het scherm. Let overigens goed op: het else blok moet afgesloten worden. Dit gebeurt na het formulier. Zie regel 31 t/m 33. Het voorgaande was een eenvoudig voorbeeld met twee tekstvelden. Er zijn nog meer formulierelementen te gebruiken. Met Dreamweaver is het maken van zulke formulieren geen probleem. De verdere verwerking, bijvoorbeeld in PHP, is soms wel wat lastiger. 9

10 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: 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 10

11 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. 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: 11

12 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: 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: 12

13 4. 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: 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. 13

14 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! Checkbox Group Vaak heb je de situatie dat er meerdere opties zijn. Het is dan handiger om een Checkbox Group te gebruiken: 14

15 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). Opdrachten 1. Zie onderstaande schermfoto: Maak dit invulformulier. 2. Laat met behulp van PHP de gegevens in beeld komen. Gebruik een nieuwe pagina om dit in beeld te brengen. De waarden bij de checkboxes hoeven afgehandeld te worden. Zie onderstaande schermfoto: 15