WEBAPPLICATIES. Toegankelijke gebruikersinterfaces bouwen voor het web KRIS MERCKX

Transcriptie

1 WEBAPPLICATIES Toegankelijke gebruikersinterfaces bouwen voor het web KRIS MERCKX

2 Webapplicaties Kris Merckx

3 Meer informatie over deze en andere uitgaven kunt u verkrijgen bij: Sdu Klantenservice Postbus EA Den Haag tel.: fax: sdu@sdu.nl web: Omslagontwerp: Bureau MMX, Bergambacht Druk- en bindwerk: drukkerij Bariet, Ruinen Vormgeving binnenwerk en zetwerk: Fritschy opmaak & redactie ISBN: NUR: 980 Kris Merkckx / Sdu Uitgevers bv, Den Haag, 2011 Alle rechten voorbehouden. Behalve de door de Auteurswet gestelde uitzonderingen, mag niets uit deze uitgave worden verveelvoudigd (waaronder begrepen het opslaan in een geautomatiseerd gegevensbestand) en/of openbaar gemaakt door middel van druk, fotokopie, microfilm of op welke andere wijze dan ook, zonder voorafgaande schriftelijke toestemming van de uitgever. De bij toepassing van art. 16b en 17 Auteurswet wettelijk verschuldigde vergoedingen wegens kopiëren dienen te worden voldaan aan de Stichting Reprorecht, Postbus 3060, 2130 KB Hoofddorp, tel.: (023) Voor het overnemen van een gedeelte van deze uitgave in bloemlezingen, readers en andere compilatiewerken op grond van art. 16 Auteurswet 1912 dient men zich te wenden tot de stichting PRO, Postbus 3060, 2130 KB Hoofddorp, tel.: (023) Voor het overnemen van een gedeelte van deze uitgave ten behoeve van commerciële doeleinden dient men zich te wenden tot de uitgever. Hoewel aan de totstandkoming van deze uitgave de uiterste zorg is besteed, kan voor de afwezigheid van eventuele (druk)fouten en onvolledigheden niet worden ingestaan en aanvaarden auteur(s), redacteur(en) en uitgever deswege geen aansprakelijkheid voor de gevolgen van eventueel voorkomende fouten en onvolledigheden. All rights reserved. No part of this publication may be reproduced, stored in a retrieval system of any nature, or transmitted in any form or by any means, electronic, mechanical, photocopying, recording or otherwise, without the prior written permission of the publisher. While every effort has been made to ensure the reliability of the information presented in this publication, Sdu Uitgevers neither guarantees the accuracy of the data contained herein nor accepts responsibility for errors or omissions or their consequences.

4 Inhoud Voorwoord 9 1 De basisingrediënten van een online GUI Voordelen van een webapplicatie Applicaties en webapplicaties Programma s bouwen Werking van een webapplicatie HTML als GUI-taal Invoerformulieren in HTML Nieuwe elementen in HTML DOM Browsers en hun kuren Modernizr Frameworks brengen browsers dichter bij elkaar Elementen selecteren met jquery Javascript User Interfaces Interactiviteit en UI Management Mobiele interfaces in de lift XUL in elke browser met Ample SDK Een bos van libraries Voorbeelden 41 2 Kantoorapplicaties en bestandsbeheer Tekst manipuleren en tekstverwerking Rekenbladen Presenteren Bestandsbeheer Voorbeelden 65 3 Audio en video Flash Video De HTML5 video-tag Online video-editing Webcambeelden met Flash 79

5 6 inhoud 3.5 Audio Voorbeelden 81 4 De browser als tekentafel Tekenen in XML met Scalable Vector Graphics Schilderen op virtueel canvas Canvas of SVG? CSS Lettertypes D in de browser Voorbeelden Animaties in de browser Animeren met jquery Gevanceerde animaties met jquery Animatiebibliotheken CSS 3-transitions en -animations SVG-animaties Canvasanimaties Canvasanimatie voor Flash-adepten Processing.js Een GUI voor een animatie-webapp Software voor HTML5-animaties Een huiseigen animatieframework Voorbeelden Games en 3D in HTML Een potje fysica Een tile-based speelbord Een speler op het speelveld Toetsenbordbediening Collision detection Pseudo-3D en raycasting HTML5 game libraries GameQuery voor jquery-adepten Voorbeelden Geolokalisatie en kaarten De geolocation-api in HTML5 173

6 inhoud Browser-ondersteuning Libraries voor lokalisatie Google Maps en aanverwanten Kaarten in de browser Voorbeelden 179 Register 185

7 Voorwoord HTML ontstond ooit als een opmaaktaal voor het uitwisselen van wetenschappelijke informatie. Later ontwikkelde het zich tot een digitaal presentatiekaartje voor bedrijven en organisaties of een middel om via internet geld te verdienen. Intussen is het web enorm veranderd. Vele miljoenen gebruikers brengen het grootste deel van hun computertijd door op het internet. Webmail, sociale netwerksites, zoekmachines, ze zijn vaak beter ingeburgerd dan klassieke desktopprogramma s. De leercurve is minder hoog en de interfaces zijn gebruiksvriendelijk. Computerprogramma s verhuizen stilaan naar webservers waarop gebruikers inloggen en hun informatie delen en uitwisselen. Het klassieke HTML en zijn opvolger XHTML voldeden niet meer aan de eisen die een moderne webapplicatie stelt. Ook javascript, dat lange tijd enkel werd gebruikt voor rollovereffecten bij afbeeldingen of eenvoudige formuliervalidaties, voldeed niet meer aan de wensen van webontwikkelaars. Naast het W3C (het world wide web consortium) dat al jaren de ontwikkeling van webgerichte talen als HTML en CSS leidt, ontstond het WHATWG (Web Hypertext Application Technology Working Group). Onder hun impuls verscheen HTML5, eigenlijk een verzamelnaam voor een uitbreiding op de (X)HTML-standaard, CSS en nieuwe API s voor en versies van javascript. HTML5 moet het ontwikkelen van webapplicaties vereenvoudigen en brengt de webapp veel dichter bij het klassieke computerprogramma. Het succes van mobiele apparaten zoals de iphone, ipod touch, ipad en Android-gebaseerde toestellen gaf een boost aan HTML5. De hegemonie van de Microsoft-browser Internet Explorer werd doorbroken door een nieuwe generatie snelle en vernieuwende browsers zoals Firefox, (Mobile)Safari en Chrome die de nieuwigheden met open armen omsluiten. De nieuwste versie van Internet Explorer kon op dit vlak niet achter blijven. Het resultaat is een explosief groeiend aantal verbazingwekkende webapplicaties die vaak niet meer te onderscheiden zijn van hun desktop-tegenhangers. HTML5, CSS3 en javascript en de webbrowsers bevinden zich voortaan in een chronisch betastadium, en dat is maar goed ook. Nieuwe ontwikkelingen en voorstellen zetten een constante druk op de browserontwikkelaars en de concurrentie leidt tot de snellere integratie van nieuwe technologieën. Webontwikkelaars kunnen meer dan ooit terugvallen op fantastische open source frameworks zoals jquery, Ample SDK, RaphaëlJS, Three.js enz. die verschillen tussen browsers en platformen nivelleren en de webapp-ontwikkeling versnellen. In dit boek geven we een overzicht van de belangrijkste en interessantste frameworks en libraries voor het ontwikkelen van webapplicaties. We focussen vooral op de nieuwe

8 10 voorwoord technologieën en hoe we die ook backwards-compatible kunnen maken. De codevoorbeelden zijn als basis te gebruiken voor je eigen webapplicaties en websites en naar wens uit te breiden en aan te vullen. De voorbeelden, links, extra informatie en frameworks vind je ook op de website bij dit boek:

9 1 De basisingrediënten van een online GUI Nog niet zo heel lang geleden installeerde een computergebruiker voor elke taak een apart programma. Dit kan uiteraard nog steeds. Door de opkomst van de snelle internetverbindingen en nieuwe technieken zoals AJAX en HTML5 is het doordeweekse computergebruik echter enorm veranderd. Heel wat taken kunnen we nu rechtstreeks in de browser afhandelen via een webapplicatie. Een webapplicatie is een programma dat op een webserver draait en via een webbrowser gebruikt kan worden. Webapplicaties zijn er in allerlei soorten en maten. Via online bankieren kunnen we onze financiële rompslomp van thuis uit regelen. We nemen contact op met vrienden en kennissen via Facebook, een film van een verjaardagsfeest uploaden we naar YouTube. Op de werkvloer staat geen klassieke radio meer, maar luisteren we uiterst persoonlijk naar ons favoriete muziekstation via internet radio of een Last FM-account. In Wikipedia maak je naar wens je eigen encyclopedie en je kunt hem drukklaar downloaden in PDF-formaat. Webmailapplicaties zoals Gmail zijn voorzien van een ingebouwde virusscanner, een file viewer enzovoort. Je kunt het niet bedenken of er bestaat wel een of andere (vaak gratis) webapplicatie voor. De opkomst van het mobiele internet en het succes van de iphone en mobiele apparaten met Google Android, vergroten het succes van webapplicaties. 1.1 Voordelen van een webapplicatie Een webapplicatie is zeker niet zonder gevaren, maar toch biedt het tal van voordelen in vergelijking met een klassiek computerprogramma. De online encyclopedie Wikipedia ziet als belangrijkste voordelen: 1 Webapplicaties vereisen geen ingewikkelde installatieprocedure bij het uitrollen in een grote organisatie. Alleen een webbrowser is vereist. 2 Webapplicaties hebben geen schijfruimte op de clientcomputer nodig. 3 Voor een update in de webapplicatie hoeven er geen wijzigingen op de werkplek gedaan te worden. 4 Webapplicaties zijn makkelijk te integreren met andere websites of webservices. 5 Webapplicaties zijn in de basis platformonafhankelijk (Windows, Mac, Linux, enz.) doordat ze in een webbrowser draaien. 1.2 Applicaties en webapplicaties Een webapplicatie doet in wezen niets anders dan een klassiek desktopprogramma. Het kan bestanden maken, openen, bewerken en weer opslaan. Om bestanden te maken of te

10 12 hoofdstuk 1 bewerken beschikt de gebruiker over een aantal bedieningselementen vaak in de vorm van knoppen of menu s. Een van de belangrijkste verschilpunten is dat de webapplicatie een lijst moet bijhouden van alle gebruikers en hun respectievelijke bestanden. 1.3 Programma s bouwen Niet alleen voor doordeweekse computergebruikers, maar ook voor webdesigners en webontwikkelaars hangt er een zweem van geheimzinnigheid rond programmeren. Klassieke desktopprogramma bestaan vaak uit duizenden, zo niet honderdduizenden regels code. Voordat die code door een computer kan uitgevoerd worden, moet ze gecompileerd worden. Dit wil zeggen dat de code door een stuk software (de compiler) in machinetaal wordt omgezet. De gecompileerde code kan rechtstreeks door de processor worden uitgevoerd. Het zal je ongetwijfeld al zijn opgevallen dat de meeste programma s die je gebruikt, dezelfde dialoogvensters en gelijkaardige knoppenbalken bevatten. Programmeurs maken namelijk gebruik van de API s die het besturingssysteem biedt. Een API of Application Programming Interface maakt het mogelijk om op eenvoudige wijze systeemtaken (bestanden openen, opslaan, afdrukken) uit te voeren. De programmeur schrijft bijvoorbeeld een stuk code dat het print-dialoogvenster van Windows opent. Omdat niet alleen de processor, maar ook het besturingssysteem en de corresponderende API s verschillen, is het hierdoor niet zonder meer mogelijk om een Windowsprogramma op pakweg een Mac OS X- of Linuxmachine te installeren en omgekeerd. Weinig programmeurs werken puur in code. Over het algemeen gebruiken ze een visuele IDE (Integrated Development Environment). Daarin kunnen ze grafisch aan de slag volgens het WYSIWYG-principe. In zo n omgeving kan de ontwikkelaar bedieningselementen zoals vensters, knoppen, menubalken enz. naar zijn ontwerpvenster slepen en de nodige functionaliteit programmeren. Naast de GUI (Graphical User Interface) moet de ontwikkelaar er ook voor zorgen dat de bedieningselementen samenwerken met achterliggende verwerkings- en opslagfuncties. Een programma leest gegevens uit een databank of bestand in en kan nieuwe gegevens opslaan. Voor Windows en Mac OS X bestaan IDE s die standaard voorzien zijn van toegang tot de API-functies van het besturingssysteem en de standaard GUI-elementen (knoppen, vensters, menu s). Een programmeur kan ook gebruikmaken van een platformonhankelijke IDE zoals bijvoorbeeld Qt (zie figuur 1), waarin hij code kan schrijven voor meerdere besturingssystemen. De IDE neemt in dat geval de vertaalslag voor de verschillende systemen voor zijn eigen rekening. Daarnaast kan een ontwikkelaar zich ook bedienen van een widget toolkit, een widget library of GUI toolkit. Zo n toolkit is een stuk software dat de programmeur eveneens voorziet van de mogelijkheid om vensters, menubalken, knoppen en andere GUI-elementen in zijn code op te nemen. Sommige van deze toolkits (bijvoorbeeld GTK) hebben huiseigen dialoogvensters voor de gecompileerde programma s.

11 de basisingrediënten van een online gui Werking van een webapplicatie Een webapplicatie werkt op een webserver. De door de gebruikers aangemaakte bestanden of ingevoerde informatie wordt in een databank op de server opgeslagen. In principe kan een webapplicatie in om het even welke programmeertaal worden geschreven. De programmeurs kunnen een eigen clientprogramma schrijven dat verbinding maakt met de webserver en daarmee gegevens uitwisselt. Steeds meer maakt men echter gebruik van een website/webpagina om verbinding te maken met de applicatie. Het grote voordeel is dat de gebruiker geen apart programma hoeft te installeren. Hij moet in zijn browser enkel nog de juiste URL invoeren. Voor het bouwen van een webapplicatie ben je dus niets met platformgebonden GUIelementen. De bediening gebeurt volledig via een webbrowser. Daarom moet de ontwikkelaar zich bijscholen in de werking van HTML, CSS en javascript. Een webapplicatie slaat zijn gegevens op in een centrale databank of als meerdere losse bestanden op de webserver. De meeste programmeertalen beschikken over functionaliteit om die informatie om te zetten in webpagina s voor een webbrowser. Omdat de stap van het ontwikkelen van een eenvoudige website naar het programmeren toch wel erg groot is, zijn er allerlei relatief eenvoudig te leren scriptingtalen ontwikkeld waarmee een webontwikkelaar/designer bestanden in een databank kan aanspreken. Zonder twijfel heb je al gehoord van ASP, PHP of JSP. Voor klassieke programmeurs is de drempel verlaagd door in de IDE s ook de ontwikkeling van webapplicaties mogelijk te maken. Server databank, bestanden <> middleware <> output naar HTML+ bedieningslementen (HTML, CSS, javascript) 1.5 HTML als GUI-taal De computergebruiker bedient een webapplicatie via een browservenster. Dit betekent dat de ontwikkelaar zich moet bedienen van de talen die een webbrowser begrijpt. Elk programma-onderdeel dient omgezet te worden in HTML, CSS en javascript. In vergelijking met klassieke programmeertalen en API s zijn de mogelijkheden van HTML voor het bouwen van een GUI erg beperkt. HTML, CSS en javascript vormen de heilige drievuldigheid van webdesign: 1 (X)HTML: een taal die de tekstinhoud van webpagina s kan structureren en documenten aan elkaar kan linken. 2 CSS: de taal die beschrijft hoe elk onderdeel van een webpagina er moet uitzien. 3 javascript (of een javascript-bibliotheek zoals Dojo of jquery): hiermee kun je interactiviteit, effecten, animaties enz. aan je webpagina s toevoegen. Daarnaast zal je al snel in aanraking komen met verwante talen zoals XML, JSON, SVG, XUL enz.

12 14 hoofdstuk 1 HTML beschrijft de onderdelen die in een webpagina worden opgenomen. Dit gebeurt op een compleet andere manier dan in een programmeertaal. Hoe HTML precies werkt, valt buiten het bestek van dit boek. Op internet en in de boekhandel vind je tal van handleidingen waarmee je de taal in een oogwenk onder de knie hebt. Hieronder vind je toch een snelle en korte gids. Ken je HTML reeds voldoende, dan kun je deze paragraaf gerust overslaan. HTML staat voor hypertext markup language. HTML is geen programmeertaal, maar beschrijft enkel de tekststructuur. Het duidt titels, alinea s, lijsten enz. aan in een tekst. HTML is gedefinieerd met SGML (Stardard Generalized Markup Language) waarvoor de omschrijving is bepaald door de ISO-norm SGML is veel uitgebreider dan HTML, maar dient net als HTML voor het structureren van tekstuele informatie. In een webpagina staat in de eerste plaats tekst. Die tekst heeft een bepaalde structuur en kan een of meerdere van de volgende onderdelen bevatten: titels of koppen alinea s citaten tabellen lijsten verwijzingen of referenties (links, hyperlinks) naar andere webpagina s of websites (verwijzingen naar) afbeeldingen Mensen onderscheiden meteen een titel of een alinea. Een computerprogramma daarentegen is dom. Je moet het op een of andere manier vertellen waar de verschillende onderdelen staan. Dit kun je enkel door aan het programma letterlijk te vertellen waar elk onderdeel begint en eindigt. HTML markeert een titel of alinea zoals je dat zelf misschien al eens in een cursus deed met een markeerstift. Met een HTML-markering duid je het begin en het einde van een tekstonderdeel of tekstelement aan. <h1>mijn titel</h1> <ul> <li>eerste opsommingspunt</li> <li>tweede opsommingspunt</li> <li>derde opsommingspunt</li> </ul> Verklaring van de afkortingen in HTML: h = head ul = unordered list (niet-genummerde lijst) li = list item

13 de basisingrediënten van een online gui 15 Webbrowsers lezen de HTML- markeringen uit en zetten de HTML-structuur om in een voor mensen leesbare weergave. Dit proces noemen we renderen of parsen. Door aan te duiden waar een bepaald tekstonderdeel begint en eindigt, herkent de webbrowser (Internet Explorer, Firefox, Safari) de verschillende tekstonderdelen. HTML kan hypertekst bevatten: een document kan verwijzingen bevatten naar andere documenten. Dit kunnen verwijzingen zijn naar documenten als foto s en teksten die zich op dezelfde computer of medium bevinden, maar ook naar documenten die ergens op de wereldwijde locatie van het internet opgeslagen zijn. De gebruiker zal hiervan niets merken. Wanneer we HTML als GUI-taal voor een webapplicatie gaan toepassen, stuiten we al snel op een aantal grondige beperkingen. HTML (tot en met versie 4) en XHTML hebben: weinig of geen interactieve mogelijkheden geen opslag- of verwerkingsfuncties een heel beperkte set aan invoermogelijkheden en interface-elementen. Figuur 1 De visuele IDE van Qt maakt het ontwikkelen van desktopapplicaties eenvoudiger. In een klassiek programma kan een ontwikkelaar gebruik maken van knoppen, menubalken, dialoogvensters, kalenders, selectiegereedschappen, grids enz. De meeste IDE s beschikken over een ruime voorraad aan bedieningselementen die naar believen naar het werkvenster kunnen worden gesleept. HTML is oorspronkelijk niet ontwikkeld om het te gaan gebruiken voor de ontwikkeling van programma s. Toch biedt het enige mogelijkheden voor het opbouwen van invulformulieren.

14 16 hoofdstuk Invoerformulieren in HTML Een invulformulier neem je als volgt op in het <body>-element van een webpagina: <form> </form> Als je de webpagina opvraagt in de browser, zul je nog steeds niets zien veranderen. We hebben immers nog geen knoppen, invulvelden of dergelijke voorzien. We moeten er een goede gewoonte van maken om elk onderdeel van een formulier te benoemen. Dat doen we door de attributen name en id op te nemen in de HTML-tags voor de formulier elementen. Wanneer het formulier wordt verzonden, kan een script op de server de ingevoerde gegevens opvragen op basis van het id van een element. Hoe dit precies in zijn werk gaat, hangt af van de gebruikte scripting- of programmeertaal op de server. We moeten het formulier ook vertellen waar het de ingevulde informatie naartoe moet sturen. <form name="form" id="form" action="bewaar.php"> </form> Vervolgens beslissen we ook welke verzendmethode we hiervoor zullen gebruiken. We kunnen kiezen tussen GET en POST. GET: als we informatie willen opvragen, bijvoorbeeld gegevens uit een bestaande databank POST: informatie verzenden om te bewaren, bijvoorbeeld , toevoegen aan een databank, gastenboek en dergelijke. <form name="form" id="form" action="bewaar.php" method="post"> </form> In moderne webapplicaties is het standaard submitten of verzenden van een formulier vaak vervangen door een javascript-functie die het controleren van de invoer en het verzenden voor zijn rekening neemt. In een volgende stap voegen we de diverse formulierelementen toe. We kunnen kiezen uit: tekstvelden tekstvakken bestandsvelden keuzelijsten keuzerondjes aankruisvakjes verborgen velden knoppen allerlei: tabindex, sneltoetsen etc.

15 de basisingrediënten van een online gui 17 In het formulier plaatsen we de verschillende elementen tussen de begin- en de eindmarkering "form": <form name="form" id="form" action="bewaar.php" method="post"> HIER KOMEN DE FORMULIERELEMENTEN </form> Tekstvelden In een tekstveld kan de gebruiker tekstinformatie invullen. Een tekstveld bestaat uit één regel. Er bestaan twee types tekstvelden: tekst wachtwoord: hierbij verschijnt de ingevoerde informatie als sterretjes of bolletjes. Met het attribuut "value" kun je ook een vooraf gedefinieerde inhoud in het tekstveld plaatsen. <input name="username" id="username" type="text" maxlength="50" value="voer hier je gebruikersnaam in" > In een tekstveld kunnen we uitgebreidere tekstinformatie opnemen. We maken een tekstveld door de tag "textarea" in het formulier in te sluiten. <textarea name="bericht" id="bericht"> </textarea> Tekstvakken In tegenstelling tot een gewoon tekstveld kan een tekstvak meerdere regels weergeven. Het aantal regels stellen we in met het attribuut "rows". Ook kunnen we instellen hoeveel tekens in een regel kunnen weergegeven worden met het attribuut "cols" (=kolommen). Beter is echter de grootte van het tekstvak in te stellen met CSS. Ook bij een tekstvak kunnen we een vooraf gedefinieerde inhoud in het tekstvak opnemen. Dit kunnen we door tekst te typen tussen de begin- en te eindmarkering (=tag) van het element "textarea". <textarea name="bericht" id="bericht" > Tik hier je tekst. </textarea> Bestandsvelden In webmailprogramma s zit vaak een mogelijkheid om via een browse/blader -knop ook een bestand toe te voegen aan je mail. Als je een bestand hebt gekozen, wordt het ge üpload

16 18 hoofdstuk 1 naar de server. HTML voorziet hiervoor een bestandsveld, maar kan zelf geen bestanden uploaden. Immers, HTML is een opmaaktaal, voor het uploaden heb je een programma nodig op de server. In dit voorbeeld wordt het formulier verzonden naar het programma bewaar.php. Dit script zal het uploaden van het bestand voor zijn rekening moeten nemen. Browsers laten uit veiligheidsoverwegingen niet toe dat je hier een voorgedefinieerde waarde ingeeft via het attribuut "value". Als je hier het attribuut "maxlength" opneemt, inter preteert de browser dit als de maximale hoeveelheid bytes die doorgestuurd mogen worden. Via het attribuut "accept" kun je instellen welke mimetypes (bestandstypes) mogen worden geüpload. Ook het jokerteken "*" is toegelaten om subtypes toe te laten. Neem je het attribuut "accept" niet op, dan is het uploaden van alle bestandstypes toegelaten. <input name="file" id="file" type="file" maxlength="100000" accept="text/*"> Als je gebruik wilt maken van een bestandsveld, moet je de "form"-tag uitbreiden met het volgende attribuut: <form name="form" id="form" action="bewaar.php" method="post" enctype="multipart/formdata" > <input name="file" type="file" maxlength="100000" accept="text/*"> </form> Met behulp van het attribuut "readonly" kun je instellen of de gebruiker de inhoud van het tekstveld mag wijzigen of niet. Dit attribuut kun je ook voor de tekstvelden en tekstvakken gebruiken. <input name="file" type="file" maxlength="100000" accept="text/*" readonly="readonly"> In hoofdstuk 2 lees je hoe je het eenvoudige file-veld kunt upgraden naar een uploadveld met drag- en dropmogelijkheden. Keuzelijsten Je kunt een keuzelijst aanbieden waaruit de bezoeker een of meerdere items kan selecteren. Hiervoor maken we gebruik van het formulierelement "select". De diverse items in onze lijst komen tussen de tags "option" te staan. <select name="selectproduct"> <option>hp-scanner</option> <option>kodak-scanner</option> <option>canon-scanner</option> </select>

17 de basisingrediënten van een online gui 19 In het bovenstaande geval is er in de keuzelijst slechts één item te zien. Om de rest te zien moet je het menu openklappen. Je kunt het aantal zichtbare items instellen met behulp van het attribuut "size". Standaard kan er slechts één item geselecteerd worden. Willen we de gebruikers de mogelijkheid bieden om een meervoudige selectie te maken, dan voegen we het volgende attribuut "multiple" toe. <select name="selectproduct" size="3" multiple="multiple">... </select> We kunnen vooraf ook één item selecteren. Dat doen we op de volgende manier: <option selected="selected">agfa-scanner</option> Toch ontbreekt er nog iets essentieels in onze keuzelijst: met het bovenstaande voorbeeld is het onmogelijk om de verzonden gegevens in een andere webpagina (= de bestemming van het formulier) weer op te vragen. We moeten elk item nog een waarde toekennen. De inhoud van de items is op dit moment enkel bedoeld voor de bezoekers. We voegen bij elk item het attribuut "value" toe. <select name="selectproduct" size="3"> <option value="hp">hp-scanner</option> <option value="kodak">kodak-scanner</option> <option value="canon">canon-scanner</option> </select> Je kunt items ook per thema groeperen door de markering "optgroup" op te nemen tussen de "select"-markering. <select name="selectproduct" size="9"> <optgroup label="scanners"> <option value="hp">hp</option> <option value="agfa">agfa</option> <option value="kodak">kodak</option> <option value="canon">canon</option> <option value="trust">trust</option> </optgroup> <optgroup label="printers"> <option value="canonprinter">canon</option> <option value="brother">brother</option> </optgroup> </select>

18 20 hoofdstuk 1 Keuzerondjes Keuzerondjes zijn een reeks ronde aanstipbare knopjes met bijschrift waarvan de bezoeker er één kan selecteren.we nemen steeds de volgende attributen op: type = radio name = vrije keuze (maar alle keuzerondjes moeten dezelfde naam hebben als ze bij dezelfde groep horen) value = per keuzerondje een andere waarde toekennen <label for="vrouw">vrouw</label> <input type="radio" id="vrouw" name="sex" value="vrouw"/> <label for="man">man</label> <input type="radio" id="man" name="sex" value="man"/> <label for="onzijdig">onzijdig</label> <input type="radio" id="onzijdig" name="sex" value="onzijdig"/> De gebruiker kan slechts één van die keuzerondjes selecteren. Bij het laden van de formulierpagina is echter geen enkel rondje geselecteerd. We kunnen vooraf selecteren met behulp van het attribuut "checked". <label for="sex">onzijdig</label> <input type="radio" name="sex" id="sex" value="onzijdig" checked="checked"> Aankruisvakjes Aankruisvakjes zijn een groep vierkantjes met bijschrift waarvan de bezoeker er geen, één of meerdere kan aanvinken. We nemen steeds de volgende attributen op: type: checkbox name: vrije keuze (maar alle keuzerondjes moeten dezelfde naam hebben als ze bij dezelfde groep horen) value: per keuzerondje een andere waarde toekennen <label for="curryworst">curryworst</label> <input type="checkbox" id="curryworst name="friet" value="curryworst"/> <label for="gehaktbal">gehaktbal</label> <input type="checkbox" id="gehaktbal" name="friet" value="gehaktbal"/> <label for="mayonaise">mayonaise</label> <input type="checkbox" id="mayonaise" name="friet" value="mayonaise"/> <label for="ketchup">ketchup</label> <input type="checkbox" id="ketchup" name="friet" value="ketchup"/> <label for="tartaar">tartaart</label> <input type="checkbox" id="tartaar" name="friet" value="tartaar"/>

19 de basisingrediënten van een online gui 21 Verborgen velden Met behulp van een verborgen formulierveld kun je onzichtbaar informatie in velden opslaan. Onzichtbaar is niet helemaal juist, want de informatie is nog steeds te lezen als we de bron van de pagina bekijken. De browser verbergt het veld enkel bij de definitieve weergave van de pagina in het browservenster. In tegenstelling tot wat je misschien denkt, zijn verborgen velden zeer interessant om informatie weg te schrijven zonder dat de bezoeker de inhoud van de velden kan wijzigen. <input type="hidden" name="taal" value="nl"/> Knoppen Om de informatie van het formulier te verzenden, hebben we een knop nodig. Wanneer we op die knop klikken, wordt de informatie gepost. <input type="submit" name="save" value="bewaar"/> of <button type="submit" name="save">ok</button> bewaar Naast een submit-knop kunnen we ook een reset-knop opnemen om het formulier leeg te maken. <input type="reset" name="reset" value="opnieuw"> of <button type="reset" name="reset">opnieuw</button> Uiteraard kunnen we met HTML ook gewone knoppen schrijven. <button type="button" id="text">test</button> Om aan een HTML-knop een zekere functie te koppelen moeten we onze toevlucht nemen tot javascript. Fieldset Met de markering "fieldset" kun je bepaalde onderdelen van het formulier groeperen. De markering "legend" geeft de "fieldset" een opschrift.

20 22 hoofdstuk 1 <fieldset> <legend>gebruiker:</legend><br/> <label for="naam">naam</label>input type="text" name="naam" id="naam"><br/> <label for="tel">telefoon</label><input type="text" name="tel" id="tel"> </fieldset> Labels Net zoals in visuele IDE s van klassieke programmeertalen, kun je bij invoervelden een label ingeven. Met het attribuut "for" kun je een label koppelen aan een bepaald element. De waarde bij "for" verwijst naar het "id" van het corresponderende element. Het gebruik van labels voor invoervelden maakt je webpagina s veel toegankelijker voor schermlezers (voor blinden en slechtzienden). Vermits HTML-code niet gecompileerd wordt, is die code immers uit te lezen. Velden uitschakelen, sneltoetsen en tabs U kunt een veld of formulierelement deactiveren door er het attribuut "disabled" aan toe te kennen. De tekst in het invoerveld wordt lichtgrijs weergegeven en je kunt de inhoud niet wijzigen. De inhoud van dit veld wordt niet mee verstuurd als het formulier gepost wordt. Het heeft dus een andere functie dan het attribuut "readonly". <input type="text" name="website" value="mijn website" disabled="disabled"> Als je de tabtoets gebruikt, verspring je van formulierelement tot formulierelement. Met het attribuut "tabindex" kun je instellen in welke volgorde de diverse elementen bereikbaar moeten zijn. Met sneltoetsen (toetsenbord) kun je de gebruiker naar welbepaalde formulierelementen laten gaan. We kunnen sneltoetsen instellen met het attribuut "accesskey". <input type="text" name="website" id="website" value="mijn website" tabindex="1" accesskey="w"> <input type="text" name=" " id=" " value="mijn adres" tabindex="2" accesskey="e"> In hoofdstuk 6 lees je hoe je sneltoetsen aan bepaalde functies kunt verbinden. We kunnen formulieren opmaken met stijlbladen (CSS). Een volledige uitleg van wat stijlbladen nu eigenlijk zijn, valt buiten het bestek van dit boek. In een stijlblad definieer je hoe elk element van een webpagina er moet uitzien (bijvoorbeeld lettertype, lettergrootte, kleur). Ook formulierelementen zoals knoppen of tekstvelden kunnen op die manier opgemaakt worden zodat hun stijl conform de vormgeving van de hele website loopt. We kunnen een algemene stijl definiëren voor bvijvoorbeeld een tekstveld. Alle tekstvelden zullen er dan gelijkaardig uitzien. Een voorbeeld: