Lesweek 7: XHTML formulieren en CSS formulieropmaak

Leerdoelen

Je begrijpt de functie van formulieren in webapplicaties
Je begrijpt het request-response model en kent het verschil tussen post en get
Je kent de verschillende XHTML formulier elementen en hun attributen en kunt een XHTML formulier bouwen
Je kunt met JavaScript de waarde van formulier elementen uitlezen of deze veranderen
Je begrijpt waarom het zinvol is een formulier al client-side te valideren en kunt met JavaScript - unobtrusive - controleren of een formulier volledig en correct is ingevuld

Voor achtergrond bij de inhoud van deze lesbrief kun je de boeken uit blok 1 bestuderen: HTML, XHTML en CSS van Elizabeth Castro hoofdstuk 17 en CSS mastery van Andy Budd hoofdstuk 6.

Formulieren

Formulieren (forms) zijn zeer belangrijk bij het interactief maken van een webpagina. Ze worden gebruikt om de bezoeker van een site de mogelijkheid te bieden informatie in te voeren en te verzenden. Voorbeelden hiervan zijn het geven van feedback en plaatsen van een bestelling. Een formulier bestaat uit een verzameling velden, labels en knoppen. De bezoeker van de site kan hier gegevens invoeren en selecties maken. Deze informatie kan vervolgens naar de server verzonden worden waar hij verder verwerkt kan worden. Hiervoor zijn talen als php en java geschikt. Dit valt buiten de stof van deze cursus. We leren wel hoe formulieren gemaakt kunnen worden, hoe de layout met CSS gedaan kan worden en hoe de gegevens gevalideerd kunnen worden met JavaScript aan de client-side.

een voorbeeld formulier:

voorbeeld form

een formulier bestaat uit drie belangrijke onderdelen: de form-tag, de formulieronderdelen en de submitknop.

De form-tag bevat de url (op de server) van het script dat het formulier zal verwerken.
De formulier-elementen zijn de plaatsen waar de gebruiker informatie kan invoeren, zoals in een tekstveld, top-down menu, radio-button en checkbox.
Met de submitknop wordt de informatie verzonden naar de server. Dit wordt ook het request-response principe genoemd: door de submitknop gaat er een request met de informatie in het formulier van de client naar de server, deze verwerkt de request en stuurt afhankelijk van de script die de informatie verwerkt een response terug. De submitknop kun je met het value-attribuut een willekeurige naam geven.

Er zijn twee methoden om de informatie, die in een formulier is verzameld, te verwerken en te versturen naar de server: get en post.

De get-methode. Hierbij wordt de informatie uit het formulier naar de server gestuurd als extra informatie achteraan de http-link. De link die dan op de server aankomt ziet er eruit als: http://server.com/pagina.php?item1=waarde1&item2=waarde2. De get-methode wordt ook gebruikt door de browser bij het binnenhalen van html-bestanden en figuren. Bij formulieren wordt het ook veel gebruikt als er niet teveel data is. De http-link is zichtbaar op het internet, daarom is het niet verstandig om login-gegevens (zoals password) via de get-methode te versturen naar de server.
De post-methode. Hierbij word de informatie uit het formulier onzichtbaar naar de server gestuurd. De post-methode is geschikt bij grotere hoeveelheden data en bij vertrouwelijke informatie.

Een form-tag ziet er bijvoorbeeld uit als:

	< form method="post" action='showform.php'>

Hierbij is aangegeven dat de post-methode wordt gebruikt en de script 'showform.php' op de server zal de gegevens verwerken.

Om duidelijk te maken wat er gebeurt bij het versturen van de formuliergegevens is er op onze server een eenvoudig php-script geplaatst dat de weergeeft welke informatie is ontvangen. Kijk hiervoor naar entree.html, vul je gegevens in, stuur het formulier op en analyseer wat er gebeurt. Als je andere formulieren wil testen kun je ze opsturen naar http://vakgroep.cmd.hro.nl/2007_2008/mme/cmd1/lente/wk1/docs/form_verwerking_algmeen.php. Dit is een algemeen script dat aangeeft wat je verstuurd hebt.

De belangrijkste onderdelen van een form:

< form > ... < /form > : de form tag waarmee het formulier begint en eindigt.
< input type = "..." name = "...." > : een control zoals textfield of radiobutton toevoegen.
< fieldset > ... < /fieldset > : maakt het mogelijk een form-elementen samen te voegen.
< legend > ... < /legend > : geeft een label aan de fieldset.
< label > ... < /label > : verbindt een tekst met een formulier element.

De meest gebruikte form-elementen zijn een textfield, radio buttons, checkboxes en textarea. Ze worden simpel uitgelegd op w3schools-forms met voorbeelden.

Het maken van een uitgebreid formulier met bijbehorende css is te vinden in het boek van E. Castro in hoofdstuk 17. De voorbeelden zijn hier te vinden. De code van het uitgebreide voorbeeld in de figuur boven aan deze pagina is hier te vinden, compleet met bijbehorende css.

Client-side valideren van formulier elementen

We hebben in les 4 gezien hoe je met JavaScript html-code kunt uitlezen en veranderen. Dit gaat evenzo met formulier elementen. Hiermee komen we aan een krachtige toepassing van JavaScript: client-side validatie. We kunnen voordat de formuliergegevens naar de server verzonden worden controleren of de gegevens kloppen. Uiteraard is dit slechts beperkt mogelijk. Veel gebruikte toepassingen zijn het controleren of een emailadres correct is (geen spaties, een @ teken) en of verplichte velden zijn ingevuld. Het voordeel is dat we de server niet onnodig belasten.

Opdracht

Maak een simpel formulier waarbij een naam en login wordt gevraagd. Test met JavaScript (met if .. else .. en enkele login's) of de login juist is. Uiteraard is dit niet geschikt voor de praktijk omdat iedereen in de code de juiste login kan uitlezen. Het gaat om de oefening.

Workshop

Maak een formulier waarbij gevraagd wordt om naam, adres, woonplaats en email-adres. Valideer met behulp van JavaScript of ieder veld is ingevuld en of het emailadres correct is (d.w.z. geen spaties bevat en wel het @ teken bevat).