De categorie Forms in het paneel Insert

Transcriptie

1 Formulieren Invulformulieren bieden u de mogelijkheid om te communiceren met de bezoekers van uw website. Ze geven de bezoeker de mogelijkheid om feedback te geven, informatie door te spelen, informatie op te vragen, goederen of diensten te bestellen. In dit PDF-document wordt uitgelegd hoe u in Dreamweaver webpagina's kunt maken met formulieren. Een formulier bestaat uit twee componenten: 1. Het formulier dat de bezoeker in het browservenster te zien krijgt en waar gegevens kunnen worden ingevuld of geselecteerd. Het formulier wordt beschreven in het HTML-bestand en kan worden gemaakt in Dreamweaver. In Dreamweaver definieert u ook op welke manier de ingevulde gegevens moeten worden doorgestuurd. 2. De data van het in de browser ingevulde formulier worden doorgestuurd naar een programma of script dat de data verder afhandelt. U kunt dan denken aan het verzenden naar een adres of het wegschrijven in een database. Dat kan worden geregeld door bijvoorbeeld een programma op de webserver, een dynamische pagina of CGI-script. Om een formulier compleet te kunnen definiëren, hebt u dus informatie nodig van uw Internet Service Provider of systeembeheerder, namelijk welke applicatie gebruikt kan worden om de data van het formulier verder af te handelen. Formulieren in Dreamweaver kunnen allerlei soorten formulierelementen bevatten, zoals tekstvelden, buttons, checkboxen, radio buttons of selectielijsten. In het paneel Insert vindt u de categorie Forms met daarin alle objecten die u nodig hebt voor het maken van een formulier. Als alternatief maakt u een keuze uit de lijst bij het menu Insert > Form. De categorie Forms in het paneel Insert Tip: U kunt een HTML-bestand maken dat bestaat uit alleen maar één formulier. U kunt ook op een gewone pagina een formulier invoegen of u kunt meerdere formulieren op één pagina definiëren. Een formulier maken Als u een formulier maakt op een webpagina, dan wordt er in feite een gebied voor het formulier bepaald. Dat gebied wordt gedefinieerd met de <form>-tag. In dat gebied kunt u dan allerlei formulierelementen invoegen, die de data gaan bevatten die straks met dit formulier worden verzonden. In het gebied van het formulier kunt u ook 'gewone' HTML-elementen gebruiken, zoals tekst, afbeeldingen en tabellen. In de Properties-inspector van het formulier geeft u aan welke applicatie de data van het formulier verder moet afhandelen en op welke manier dat moet gebeuren. Zorg ervoor dat er een vinkje staat bij het menu View > Visual Aids > Invisible Elements en het formulier verschijnt als een roodgestreept kader in het documentvenster. Als de tekstcursor in dit kader staat, ziet u de <form>-tag in de Tag Selector linksonder in het documentvenster. Klik op de <form>-tag in de Tag Selector om het formulier te selecteren. Het is ook mogelijk om het formulier te selecteren door op het roodgestreepte kader te klikken. Let op: Het heeft geen zin om formulierelementen op een pagina te plaatsen buiten de <form>-tag! U gaat als volgt te werk om een nieuw formulier in te voegen op een pagina: 1. Open een nieuwe of bestaande webpagina. 2. Zorg ervoor dat de tekstcursor op de locatie staat waar het formulier ingevoegd moet worden. Klik op de knop Form in de categorie Forms van het paneel Insert. Of kies het menu Insert > Form > Form. 3. Zorg ervoor dat het formulier is geselecteerd (zet de tekstcursor in het roodgestreepte kader, het lege formulier, of klik op de <form>-tag in de Tag Selector) en definieer de eigenschappen van het formulier in de Properties-inspector. Formulieren in Dreamweaver - 1 -

2 In de Properties-inspector kunt u de volgende eigenschappen van het formulier veranderen: Form Name typ de naam van het formulier. Dit moet u doen als u bijvoorbeeld met behaviors of JavaScript het formulier wilt valideren. Action in dit vak geeft u de applicatie aan die de data in het formulier moet afhandelen. Meestal zal dat een CGI-script of een dynamische pagina (bijvoorbeeld ASP of PHP) zijn op een webserver en dan vult u hier de URL in. Bijvoorbeeld: Target in sommige gevallen zal de applicatie die u in het vak Action hebt opgegeven, data terugsturen. U kunt dan denken aan een webpagina met de mededeling dat het formulier succesvol is verzonden. Hier kunt u opgeven in welk venster teruggestuurde data moeten verschijnen. Method hier kunt u kiezen uit Default, GET of POST. Dit is de wijze waarop de data van het formulier worden doorgestuurd naar de URL die u in het vak Action hebt gedefinieerd. De maker van de applicatie of de systeembeheerder kan u vertellen welke methode u moet kiezen. GET voegt de data van het formulier toe aan de URL van het vak Action. De webserver krijgt een GET-verzoek. Omdat URL's maximaal 8192 tekens mogen bevatten, kunt u deze methode in ieder geval niet gebruiken voor formulieren met veel data. POST de data van het formulier worden in de body van een message opgenomen en meegestuurd naar de URL die u in het vak Action hebt gedefinieerd. De webserver krijgt een POST-verzoek. Dit is de meest gebruikelijke methode. Default gebruikt de methode die als standaard in de browser is gedefinieerd (meestal GET). Enctype indien nodig kiest u uit de lijst het type MIME-encoding van de data die door het formulier worden doorgestuurd naar de URL die u in het vak Action hebt gedefinieerd. De standaardkeuze voor de POST-methode is: application/x-www-form-urlencoded. Class kies een van de door u gedefinieerde CSS-stijlen voor de opmaak van het formulier. Een leeg formulier op de pagina Nu kunt u formulierelementen toevoegen aan het formulier: 1. Zet de tekstcursor in het rechthoekige roodgestreepte kader van het formulier. Dit zorgt ervoor dat de formulierelementen terechtkomen in de <form>-tag. 2. Klik op een van de knoppen in de categorie Forms van het paneel Insert. Of maak een keuze uit de lijst bij het menu Insert > Form. Tip: Om tekst en formulierelementen in het formulier netjes uit te lijnen, gebruikt u in het formulier meestal een tabel zonder randen. In de cellen van de tabel zet u de formulierelementen. Let op: Gebruik geen spaties en leestekens in de namen van formulierelementen en gebruik bij voorkeur alleen kleine letters. Formulieren in Dreamweaver - 2 -

3 Een overzicht van de belangrijkste formulierelementen Text Field Dit formulierelement gebruikt u als u de bezoeker informatie wilt laten intypen in tekstvelden. Een tekstveld en de Properties-inspector In de Properties-inspector kunt u de volgende kenmerken van een geselecteerd tekstveld veranderen: TextField typ de naam van het tekstveld. Deze naam is het label voor de informatie die de bezoeker intypt. Elk tekstveld moet een unieke naam hebben. Char width het maximum aantal tekens dat wordt getoond in het tekstveld. Hoe groter de waarde, des te breder het tekstveld. Max chars/num lines het maximum aantal tekens dat kan worden ingetypt in een tekstveld van het type Single line. Voor een tekstveld van het type Multi line bepaalt u het maximum aantal regels. Type heeft het tekstveld een enkele regel (Single line) of meerdere regels (Multi line)? Of is het tekstveld bedoeld om een wachtwoord in te typen (Password) en moeten de ingetypte tekens worden getoond als bullets? Init val deze tekst verschijnt in het tekstveld als de pagina in de browser wordt geopend. Wrap deze optie wordt actief als u Type: Multi line hebt gekozen. Hier kunt u aangeven of de ingetypte tekst wel of niet automatisch naar de volgende regel moet doorschuiven. Class kies een van de door u gedefinieerde CSS-stijlen voor de opmaak van het tekstveld. Tip: Gebruik de knop Text Area in het paneel Insert (categorie Forms) of het menu Insert > Forms > Text Area om gelijk een tekstveld van het type Multi line te maken. Hidden Field Hidden fields zijn niet zichtbaar in het formulier, maar bevatten vaak noodzakelijke informatie voor de applicatie die de data van het formulier ontvangt en verder afhandelt. Informeer bij de programmeur, systeembeheerder of Internet Provider welke hidden fields u kunt of moet gebruiken! Hidden fields verschijnen met gele pictogrammen in het documentvenster als er een vinkje staat bij het menu View > Visual Aids > Invisible Elements. Een Hidden Field en de Properties-inspector In de Properties-inspector kunt u de volgende kenmerken van een geselecteerd hidden field veranderen: HiddenField typ de naam van het hidden field. Value de waarde van het hidden field. Een voorbeeld: u hebt bij het vak Action in de Properties-inspector van het formulier een CGI-script opgegeven. Dit CGI-script ontvangt de data van het formulier en zal deze opmaken en versturen naar een adres. In ieder geval moet het CGI-script weten naar welk adres de informatie moet worden gestuurd. Van de programmeur hebt u te horen gekregen dat dit het gegeven mailadres is met Formulieren in Dreamweaver - 3 -

4 als waarde het adres. Dus, u maakt een hidden field en in het vak HiddenField typt u mailadres en in het vak Value typt u het adres, bijvoorbeeld info@promate.nl. Checkbox Dit formulierelement gebruikt u bij een vraag waarop meerdere antwoorden gegeven kunnen worden door vinkjes te plaatsen in selectievakjes. Een checkbox en de Properties-inspector In de Properties-inspector kunt u de volgende kenmerken van een geselecteerde checkbox veranderen: CheckBox name typ de naam van de checkbox. Checked value als het formulier wordt verzonden en de bezoeker heeft een vinkje geplaatst in de checkbox, wordt deze waarde meegestuurd. Geef elke checkbox een unieke Checked value. Initial State hier kunt u aangeven of de checkbox wel of niet een vinkje heeft, als de pagina met het formulier wordt geopend in de browser. Class kies een van de door u gedefinieerde CSS-stijlen voor opmaak van de checkbox. Radio Button Dit formulierelement gebruikt u bij een vraag waarop een antwoord gegeven wordt door een radio button te activeren. Er kan slechts één radio button actief zijn. In de Properties-inspector kunt u de volgende kenmerken van een geselecteerde radio button veranderen: Radio Button typ de naam van de radio button. Om ervoor te zorgen dat er slechts één radio button kan worden geactiveerd, moeten alle radio buttons die bij elkaar horen exact dezelfde naam hebben. Als u één teken verschillend opgeeft bij de naam, dan kan de bezoeker meerdere radio buttons activeren. Checked Value als het formulier wordt verzonden en de bezoeker heeft de radio button geactiveerd, dan wordt deze waarde meegestuurd. Geef elke radio button een unieke Checked Value. Initial state hier bepaalt u of de radio button wel of niet is geactiveerd als het formulier in de browser wordt geopend. Slechts voor één radio button in een groep kunt u Initial state: Checked activeren. Class kies een van de door u gedefinieerde CSS-stijlen voor de opmaak van de radio button. Tip: Met de knop Radio Group in het paneel Insert of het menu Insert > Form > Radio Group kunt u in één keer een groep bij elkaar horende radio buttons maken, inclusief labels en netjes opgemaakt in een tabel. Superhandig! Maak een Radio Group Formulieren in Dreamweaver - 4 -

5 List/Menu Dit formulierelement gebruikt u als de bezoeker een keuze kan maken uit een lijst. U kunt er bij dit element voor kiezen om een selectielijst te laten verschijnen, of een tekstkader waarin opties kunnen worden aangeklikt/geselecteerd. List/Menu In de Properties-inspector kunt u de volgende kenmerken van een geselecteerd List/Menu veranderen: List/Menu typ de naam van het formulierelement. Deze naam is verplicht en moet uniek zijn. Type kies Menu voor een selectielijst die uitklapt. Kies List voor een lijst waarbij de opties verschijnen in een tekstkader. Als u List hebt geselecteerd, kunt u bij Height aangeven hoeveel regels van de lijst zichtbaar zijn. Bovendien kunt u bij een List aangeven dat de gebruiker meerdere items mag selecteren. Plaats dan een vinkje bij Allow multiple. List Values als u op deze knop klikt, opent zich het venster List Values, waar u de items in de selectielijst definieert. Elk item heeft een Item Label en een Value. Het Item Label is de tekst die verschijnt in de lijst en de Value is de waarde die met de formulierdata wordt verzonden als de gebruiker die optie selecteert. Als u geen Value definieert, wordt het Item Label meegezonden met de formulierdata. Gebruik de knoppen met het plus- en minteken linksboven in dit venster om items te verwijderen en toe te voegen. Gebruik de knoppen met de driehoekjes om de volgorde van de items te veranderen. Initially Selected hier kunt u het item selecteren dat in de lijst verschijnt als de pagina met het formulier in de browser wordt geopend. Class kies een van de door u gedefinieerde CSS-stijlen voor de opmaak van de lijst. Button Dit formulierelement kunt u gebruiken voor de Submit- ofwel zenden-button. U kunt dit formulierelement nogmaals gebruiken voor een Reset- ofwel wis-alles-en-begin-opnieuw-button. Een Button en de Properties-inspector Formulieren in Dreamweaver - 5 -

6 In de Properties-inspector kunt u de volgende kenmerken veranderen: Button hier kunt u de button een naam geven. Label typ de tekst die op de button moet verschijnen. Action hier geeft u aan wat er moet gebeuren als op de button wordt geklikt. Kies Submit form als de inhoud van het formulier wordt verzonden naar de URL die u bij Action hebt opgegeven in de Properties-inspector van het formulier. Als het formulier moet worden leeggemaakt wanneer de gebruiker op deze button klikt, kiest u Reset form. De keuze None heeft tot effect dat de data niet worden verzonden en het formulier ook niet wordt leeggemaakt. Class kies een van de door u gedefinieerde CSS-stijlen voor de opmaak van de button. Image Field Met dit formulierelement kunt u een andere afbeelding gebruiken als vervanger voor de zenden- of wissen-button. Image Field en Properties-inspector In de Properties-inspector kunt u de volgende kenmerken veranderen: ImageField typ Submit als u een afbeelding wilt gebruiken als zenden-button. Typ Reset om een afbeelding te gebruiken om het formulier leeg te maken (wissen-button). Src het bestand van de afbeelding. Alt geef hier de alternatieve tekst in, de alt-tekst. Align kies voor de uitlijning van de afbeelding en andere informatie in dezelfde alinea. Edit Image klik op deze knop om de afbeelding te veranderen in een extern programma zoals Fireworks. Class kies een van de door u gedefinieerde CSS-stijlen voor de opmaak van de afbeelding. Een aantal tips en dingen om op te letten: Er zijn grote verschillen in de wijze waarop verschillende browsers formulieren en formulierelementen laten zien. Definieer CSS-stijlen voor de uiterlijke kenmerken zoals kleuren, lettertype en lettergrootte. Gebruik de lijst Class om gedefinieerde CSS-stijlen te koppelen aan de formulierelementen. U moet er wel op letten dat dit in de verschillende browsers tot verschillend eindresultaat leidt. Standaard kent Dreamweaver de behavior Validate Form om formulieren te valideren. U kunt dan bijvoorbeeld controleren of alle verplichte velden wel zijn ingevuld voordat de data worden verzonden. Op de Exchange-site van Adobe kunt u meer geavanceerde behaviors vinden voor formuliervalidatie. Met de knop Jump Menu in de categorie Forms van het paneel Insert of het menu Insert > Form > Jump Menu kunt u een selectielijst pop-upmenu maken en voor iedere keuze in de selectielijst kunt u een link en target definiëren. Als de gebruiker een keuze maakt uit de selectielijst, wordt de gekoppelde webpagina geopend. Formulieren in Dreamweaver - 6 -