Een formulier ontwerpen

Transcriptie

1 Een formulier ontwerpen Op iedere professionele website is tegenwoordig wel een formulier te vinden, dat door de bezoeker van de website kan worden ingevuld. Formulieren op websites worden voor verschillende doeleinden gebruikt. De bezoeker van de website kan met behulp van het formulier bijvoorbeeld extra informatie aanvragen. De eigenaar van de website kan met behulp van het formulier extra informatie over de bezoeker van de website verkrijgen. Op de cd-rom staat een voorbeeld van een formulier: Formulieren op websites zijn opgebouwd uit verschillende elementen zoals tekstvakken, keuzelijsten, knoppen, enz. Achtereenvolgens zijn in dit formulier de volgende elementen opgenomen: Een tekstveld, waarin de bezoeker van de website zijn naam kan invullen. In dit tekstveld passen maximaal 35 tekens. Er bestaan ook tekstvakken, waarin grote hoeveelheden tekst kunnen worden ingevuld. Tekstvakken zijn voorzien van scroll-bars. Een keuzelijst, waarbij de bezoeker kan kiezen uit de leeftijden 14 t/m 17. Een aantal keuzerondjes, waarbij de bezoeker precies één rondje kan selecteren. Een aantal aankruisvakjes, waarbij de bezoeker meerdere mogelijkheden kan aanvinken Edu Actief

2 Een wisknop, waarmee de bezoeker het formulier kan leegmaken. Een verzendknop, waarmee de bezoeker het formulier kan versturen. Een formulier herken je aan de tag <form>. Het element <form> Voor het weergeven van een formulier op een webpagina wordt het element <form> <form action = "... " method = "... " name = "... ">..... </form> Bij het form-element worden de volgende attributen action Waar moet het formulier naar toe? In het voorbeeld wordt de inhoud van het formulier verzonden naar een site, waarop een gratis cgi-script de inhoud verwerkt. method Op welke manier moet het formulier verzonden worden? In het voorbeeld wordt de methode 'post' gebruikt. Een andere methode voor het verzenden van de inhoud is 'get'. name Wat is de naam van het formulier? Wanneer je een formulier een naam geeft, dan kun je elders op je webpagina naar het formulier verwijzen. Tussen <form> en </form> worden alle onderdelen van het formulier geplaatst. Je kunt het formulier een verzorgd uiterlijk geven door gebruik te maken van een tabel Edu Actief

3 Het element <input type="text"> Voor het weergeven van een tekstvak in een formulier wordt het element <input> <input type = "... " name = "... " size = "... " maxlength = "... " / > Bij het input-element worden de volgende attributen type name size Welk type input moet er op het formulier komen? Een tekstvak is type 'text'. Welke naam heeft het tekstvak? De naam van het tekstvak wordt gebruikt tijdens het verwerken van het formulier. Hoe breed moet het tekstvak worden? In het voorbeeld wordt het tekstvak 50 karakters breed. maxlength Hoeveel tekst mag er door de bezoeker worden ingevuld in het tekstvak? In het voorbeeld mag de gebruiker maximaal 35 karakters invullen. Het element <select> Voor het weergeven van een keuzelijst in een formulier wordt het element <select> <select name = "... " >..... </select> Bij het select-element worden de volgende attributen name Welke naam heeft de keuzelijst? De naam van de keuzelijst wordt gebruikt tijdens het verwerken van het formulier. Voor het vullen van de keuzelijst met verschillende opties wordt het element <option> <option>..... </option> Edu Actief

4 Het element <input type="radio"> Voor het weergeven van een keuzerondje in een formulier wordt het element <input> <input type = "... " name = "... " value = "... " checked = "... " / > Bij het input-element worden de volgende attributen type name value Welk type input moet er op het formulier komen? Een keuzerondje is type 'radio'. Welke naam heeft het keuzerondje? De naam van het keuzerondje wordt gebruikt tijdens het verwerken van het formulier. Welke waarde heeft het keuzerondje? De waarde van het keuzerondje wordt gebruikt tijdens het verwerken van het formulier. checked Moet er al een keuzerondje aangevinkt staan? In het voorbeeld staat het keuzerondje met de waarde 'h4a' aangevinkt. Het element <input type="checkbox"> Voor het weergeven van een aankruisvakje in een formulier wordt het element <input> <input type = "... " name = "... " value = "... " checked = "... " / > Bij het input-element worden de volgende attributen type name value Welk type input moet er op het formulier komen? Een aankruisvakje is type 'checkbox'. Welke naam heeft het aankruisvakje? De naam van het aankruisvakje wordt gebruikt tijdens het verwerken van het formulier. Welke waarde heeft het aankruisvakje? De waarde van het aankruisvakje wordt gebruikt tijdens het verwerken van het formulier. checked Moeten er al een aankruisvakjes aangevinkt staan? In het voorbeeld staat er geen enkel aankruisvakje aangevinkt Edu Actief

5 Het element <button> Voor het weergeven van een knop in een formulier wordt het element <button> <input type = "... " / > Bij het button-element worden de volgende attributen type Welk type button moet er op het formulier komen? Een knop waarmee je een ingevuld formulier weer kunt leegmaken is van het type 'reset'. Een knop waarmee je de inhoud van een formulier kunt versturen is van het type 'submit'. Een formulier laten verwerken De fraaiste (en meest gebruikelijke) manier om een formulier te verwerken, is het opnemen van de door de bezoeker ingevulde gegevens in een database. Zo'n database bevindt zich op de server van de provider, waar de website is ondergebracht. Om de ingevulde gegevens te kunnen onderbrengen in een database moet je op de hoogte zijn van: PHP: een scripttaal waarmee de ingevulde gegevens kunnen worden doorgegeven aan de server van de provider. Ook kun je met PHP gegevens uit de database doorgeven aan een HTML-pagina. MySQL: een database-taal waarmee de ingevulde gegevens worden opgeslagen in de database, en vervolgens kunnen worden bewerkt. Het behandelen van PHP en MySQL valt buiten deze practica. In Informatica Deel 2 komen we daar uitgebreid op terug. Op Internet zijn een aantal websites te vinden, die 'gratis' de inhoud van een formulier omzetten naar een -bericht. Dit -bericht kun je vervolgens laten doorsturen naar een zelf gekozen -adres. Helaas moet je dan wel enige reclameboodschappen voor lief nemen. Een uitgebreid overzicht van alle websites, die deze 'gratis' dienst aanbieden, kun je vinden op: In het voorbeeld wordt gebruik gemaakt van de diensten van Response-O-Matic. Response-O-Matic verwerkt het door de bezoeker ingevulde formulier, en stuurt jou een . De bezoeker van jouw website krijgt een webpagina te zien, waarin hij/zij bedankt wordt voor het invullen. In het formulier, dat verzonden wordt naar Edu Actief

6 Response-O-Matic, moet een aantal extra gegevens worden opgenomen. Deze gegevens staan 'onzichtbaar' in het formulier: Een ingevuld formulier verwerken Om het formulier te laten verwerken, moet het eerst verzonden worden naar Response-O-Matic: <form action=" method="post" name="form1"> De inhoud van het formulier moet door Response-O-Matic worden verzonden naar een geldig -adres: <input type="hidden" name="your_ _address" value="..... " /> De naam van de eigenaar van het formulier (eventueel een bedrijfsnaam) moet worden vermeld. Deze naam wordt afgedrukt op de verzendbevestiging, die de bezoeker van de website te zien krijgt, nadat hij het formulier heeft verzonden: <input type="hidden" name="your_name" value="..... " /> Het onderwerp van het formulier moet worden vermeld. Ook deze tekst krijgen de bezoekers van de website te zien, nadat het formulier is verzonden: <input type="hidden" name=" _subject_line" value="..... " /> Van deze regel moet je afblijven: <input type="hidden" name="required_fields" value="your_ _address" /> Edu Actief

7 Dit wordt de titel, die bovenaan de verzendbevestiging komt te staan: <input type="hidden" name="thank_you_title" value="..... " /> Nadat de bezoeker de verzendbevestiging heeft gelezen, kan hij weer terug naar jouw website, door op deze link te klikken: <input type="hidden" name="return_link_url" value="..... " /> Dit is de tekst van de return-link: <input type="hidden" name="return_link_name" value="..... " /> De achtergrondkleur, tekstkleur en hyperlinkkleuren kunnen worden ingesteld: <input type="hidden" name="background_color" value="#ffffff" /> <input type="hidden" name="text_color" value="#000000" /> <input type="hidden" name="link_color" value="#0000ff" /> <input type="hidden" name="visited_link_color" value="#8000ff" /> <input type="hidden" name="active_link_color" value="#0000ff" /> Wanneer de inhoud van het formulier door Response-O-Maticj moet worden verzonden naar een -adres bij Hotmail, dan moet je een wijziging aanbrengen in de instellingen van het filter van Hotmail. Hotmail houdt namelijk automatisch ongewenste met reclameboodschappen zoveel mogelijk tegen. Aangezien de van Response-O-matic voorzien is van reclame, moet je in het filter aangeven, dat de ongewenste wordt geplaatst in de map 'Ongewenste post' Edu Actief

8 De met de inhoud van het formulier wordt geplaatst in de map 'Ongewenste post', en kan vandaar verplaatst worden naar het 'Postvak IN': Edu Actief