Een formulier ontwerpen

Een website bouwen met HTML en CSS practicum 7

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. -1-

© Edu’Actief

Een website bouwen met HTML en CSS practicum 7 ·

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

.

Het element Voor het weergeven van een formulier op een webpagina wordt het element gebruikt: .....

Bij het form-element worden de volgende attributen gebruikt: 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

en

worden alle onderdelen van het formulier geplaatst. Je kunt het formulier een verzorgd uiterlijk geven door gebruik te maken van een tabel.

-2-

© Edu’Actief

Een website bouwen met HTML en CSS practicum 7

Het element Voor het weergeven van een tekstvak in een formulier wordt het element gebruikt:

Bij het input-element worden de volgende attributen gebruikt: 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> gebruikt: <select name = " . . . " > .....

Bij het select-element worden de volgende attributen gebruikt: 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 gebruikt: . . . . .

-3-

© Edu’Actief

Een website bouwen met HTML en CSS practicum 7

Het element Voor het weergeven van een keuzerondje in een formulier wordt het element gebruikt:

Bij het input-element worden de volgende attributen gebruikt: 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 Voor het weergeven van een aankruisvakje in een formulier wordt het element gebruikt:

Bij het input-element worden de volgende attributen gebruikt: 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.

-4-

© Edu’Actief

Een website bouwen met HTML en CSS practicum 7

Het element Voor het weergeven van een knop in een formulier wordt het element gebruikt:

Bij het button-element worden de volgende attributen gebruikt: 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 email-bericht. Dit email-bericht kun je vervolgens laten doorsturen naar een zelf gekozen email-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: http://cgi.resourceindex.com/Remotely_Hosted/Form_Processing/ In het voorbeeld wordt gebruik gemaakt van de diensten van Response-O-Matic. http://www.response-o-matic.com Response-O-Matic verwerkt het door de bezoeker ingevulde formulier, en stuurt jou een email. 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 -5-

© Edu’Actief

Een website bouwen met HTML en CSS practicum 7 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:

De inhoud van het formulier moet door Response-O-Matic worden verzonden naar een geldig email-adres:

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:

Het onderwerp van het formulier moet worden vermeld. Ook deze tekst krijgen de bezoekers van de website te zien, nadat het formulier is verzonden:

Van deze regel moet je afblijven:

-6-

© Edu’Actief

Een website bouwen met HTML en CSS practicum 7 Dit wordt de titel, die bovenaan de verzendbevestiging komt te staan:

Nadat de bezoeker de verzendbevestiging heeft gelezen, kan hij weer terug naar jouw website, door op deze link te klikken:

Dit is de tekst van de return-link:

De achtergrondkleur, tekstkleur en hyperlinkkleuren kunnen worden ingesteld:

Wanneer de inhoud van het formulier door Response-O-Maticj moet worden verzonden naar een email-adres bij Hotmail, dan moet je een wijziging aanbrengen in de instellingen van het filter van Hotmail. Hotmail houdt namelijk automatisch ongewenste email met reclameboodschappen zoveel mogelijk tegen. Aangezien de email van Response-O-matic voorzien is van reclame, moet je in het filter aangeven, dat de ongewenste email wordt geplaatst in de map 'Ongewenste post'.

-7-

© Edu’Actief

Een website bouwen met HTML en CSS practicum 7

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

-8-

© Edu’Actief