Uitleg toegankelijk formulier met allerlei soorten invoervelden

fieldset

Wordt gebruikt om bij elkaar horende onderdelen in een formulier logisch te groeperen. Het is ook handig voor 'gewone' bezoekers. In het voorbeeld is bijvoorbeeld 'Bezorgadres' een fieldset, met als onderdelen Naam, Adres en de vraag waar bezorgd moet worden.

Door er een kadertje omheen te zetten en de achtergrond te kleuren wordt nog duidelijker zichtbaar wat bij elkaar hoort.

legend

Dit wordt gebruikt om een kopje op te geven bij de fieldset. Hier zijn dat de kopjes 'Bezorgadres', 'Account' en 'Quiz met drie supermoeilijke vragen'. Deze worden automatisch bovenaan de fieldset neergezet. Met css heb ik ze iets beter op hun plaats gezet.

Deze kopjes worden ook door een screenreader gezien en aan het begin van de fieldset weergegeven. Hierdoor weet ook een blinde, maar ook de zoekmachine dus, dat het om het bezorgadres gaat en niet om bijvoorbeeld het woonadres.

Voor een ziende gebruiker is door de plaatsing gelijk duidelijk dat 'Man' en 'Vrouw' bij 'Sekse' horen, dus een bij elkaar horende groep vormen. Om dat ook voor 'n screenreader duidelijk te maken, heb ik ook dit groepje (en andere soortgelijke groepjes) in een fieldset opgenomen met als legend 'Sekse'.

Omdat dit voor een ziende gebruiker niet nodig is, heb ik vervolgens met behulp van css de fieldset verstopt en de legend omgetoverd tot 'n normale tekst. Maar voor de screenreader (en de spider van 'n zoekmachine!) is het gewoon nog steeds 'n fieldset: het hoort bij elkaar.

ol

Bij de drie belangrijkste fieldsets (te herkennen aan het kadertje eromheen) zet ik de inhoud daarvan in een geordende lijst. Afhankelijk van programma en instellingen wordt door screenreaders en dergelijke aan het begin van de lijst aangegeven hoeveel onderdelen de lijst heeft. Hierdoor is duidelijker waar je precies zit in het formulier. Ook het eind van de lijst kan worden aangegeven. Bovendien kan dit soort programma's vaak van <ol> naar <ol> springen.

Ook voor mensen die om een of andere reden css uit hebben staan maakt dit het formulier 'n stuk duidelijker, want ook hier worden de onderdelen nu genummerd.

li

In elk lijst-item komt 'n invoerveld met bijbehorende tekst te staan. Radioknoppen en checkboxen die bij elkaar horen, komen in hetzelfde lijst-item te staan.

label for

Hiermee wordt de tekst die bij het invoerveld hoort weergegeven. Het kan op twee manieren worden gebruikt:

Zonder verdere opmaak ziet dit eruit als:

Omdat <input> tussen <label> en </label> staat, is duidelijk dat 'Gebruikersnaam' bij dit invoerveld hoort.

Toch heb ik gebruik gemaakt van de tweede manier:

Op het scherm ziet dit er precies hetzelfde uit als de eerste manier. De koppeling vindt hier plaats met behulp van for en id: achter for wordt de id van het veld waar het label bijhoort opgegeven.

Ik gebruik deze manier omdat niet alle screenreaders en dergelijke overweg kunnen met de eerste manier. En omdat dit peperdure programma's zijn (tot vele duizenden euro's), zal niet iedereen altijd met de laatste versie werken.

Een groot bijkomend voordeel is dat het gebruik van for het vak waarop geklikt kan worden veel groter maakt. Dat is vooral bij checkboxen en radioknoppen handig als je wat moeite hebt met precies klikken. Je kunt daar ook op de tekst van het label klikken om ze te activeren, en vaak zelfs nog buiten die tekst.

Bij Geboortedatum is door de opmaak gelijk duidelijk dat dag, maand en jaar moeten worden ingevuld. Maar als je de opmaak niet kunt zien, is dat 'n stuk lastiger. Daarom heb ik bij maand en jaar 'n extra label toegevoegd, dat met behulp van css wordt verborgen. Hierdoor wordt opmaak niet verstoord door overbodige labels, maar screenreaders en dergelijke zien de extra labels wel.

Het label, en dus de daarin staande tekst, hoort altijd vóór het bijbehorende invoerveld te worden gezet. Als je op het voorbeeld kijkt, zie je dat dit ook het meest intuïtieve is.

Alleen bij keuzevelden (radioknoppen en checkboxen) wordt de tekst áchter de knop gezet. Ook dit is logisch: als de tekst voor de knop zou worden gezet, kun je de knoppen niet goed uitlijnen.

Deze volgorde spreekt eigenlijk vanzelf. Screenreaders en dergelijke gaan er vanuit, dat deze volgorde wordt aangehouden.

optgroup

Een <select> met bijbehorende listbox kan met behulp van optgroup worden opgedeeld. Dat kan ook voor goed ziende bezoekers erg handig zijn bij 'n lange lijst. Ik heb dat hier gedaan bij het geboortejaar, hoewel dat natuurlijk nergens op slaat. Maar als je bijvoorbeeld 'n heel lange lijst met groenten en fruit hebt om uit te kiezen, dan kan 'n indeling in groepen wél handig zijn. Afhankelijk van programma en instellingen kan 'n screenreader optgroup weergeven.

textarea

Bij textarea heb ik ook het aantal kolommen (60) en het aantal regels (8) opgegeven. Als je dit niet doet, krijg je zonder css 'n heel klein tekstveld, wat niet erg prettig werkt. In de css heb ik echter ook een breedte opgegeven, en deze 'wint' van het aantal kolommen in de html.

Als je dat wilt, kun je in de css ook 'n hoogte opgeven. Die overrulet dan eveneens het aantal regels in de html.

Overigens zijn kolommen (cols) en regels (rows) ook gewoon verplichte eigenschappen, dus je moet ze sowieso gebruiken.

Het element waarbinnen de hele pagina staat. Veel instellingen die hier worden opgegeven, worden geërfd door de kinderen van <body>. Ze gelden voor de hele pagina, tenzij ze later worden gewijzigd. Dit geldt bijvoorbeeld voor de lettersoort, de lettergrootte en de voorgrondkleur.

Slim om te doen, is soms wat afwijkend in verschillende browsers.

Lettersoort. Als er geen Arial is, wordt gezocht naar Helvetica. Als dat er ook niet is in ieder geval 'n lettersoort zonder schreef (dwarsstreepjes).

Iets groter dan standaard. 't Zal de leeftijd zijn, maar ik vind de standaardgrootte wat te klein.

Ik gebruik hier % als eenheid, en voor alle andere lettergroottes gebruik ik em. Dat komt door Internet Explorer. Als ik als maateenheid iets als px neem, kunnen gebruikers van Internet Explorer de lettergrootte niet veranderen.

Maar als ik overal em neem als maateenheid, wat dan voor de hand zou liggen, kom ik in de problemen met versies van Internet Explorer ouder dan versie 8. De stappen van de verkleining of vergroting zijn in die browsers zo groot, dat 't gelijk onleesbaar klein of absurd groot is.

Als je nou echter bij body geen em gebruikt (font-size: 1.1em; zou hetzelfde moeten zijn als font-size: 110%;), dan is de lettergrootte in Internet Explorer te veranderen, en in oudere versies dan versie 8 zijn de tussenstappen teruggebracht tot normale grootte.

Dit werkt ook als je als lettergrootte 100% invult. Dat heeft geen enkele invloed op de lettergrootte, behalve dus dat de tussenstappen in oudere versies nu normaal werken.

In Internet Explorer 8 is deze bug eindelijk gerepareerd. Aangezien we waarschijnlijk nog vele jaren met oudere versies dan Internet Explorer 8 zitten opgescheept, zal deze truc ook nog jaren moeten worden toegepast.

Voorgrondkleur zwart. Dit is onder andere de kleur van de tekst.

Hoewel dit de standaardkleur is, geef ik de kleur toch op. Hieronder geef ik een achtergrondkleur op. Sommige mensen hebben zelf de voorgrond- en/of achtergrondkleur veranderd, bijvoorbeeld omdat ze slecht kleuren kunnen onderscheiden. Als ik nu de achtergrondkleur verander, maar niet de voorgrondkleur, loop ik het risico dat tekstkleur en achtergrondkleur te veel op elkaar gaan lijken.

Door beide op te geven, weet ik redelijk zeker dat achtergrond- en tekstkleur genoeg van elkaar blijven verschillen. Als de gebruiker !important heeft gebruikt, is er nog niets aan de hand, want dan veranderen achtergrond- en voorgrondkleur geen van beide.

Achtergrondkleurtje.

Hierin staat het hele formulier.

Om een aantal onderdelen van het formulier op de goede plaats te krijgen, moet ik die absoluut positioneren. Dat doe ik ten opzichte van <form>. Om dat te kunnen doen, moet <form> zelf een positie hebben, ook al vul ik daar verder niets bij in. Nu kan ik de kinderen van <form> positioneren ten opzichte van <form>.

Omdat alleen voor boven en rechts waarden zijn ingevuld, krijgen onder en links automatisch dezelfde waarden. Hier staat dus eigenlijk 0 auto 0 auto in de volgorde boven - rechts - onder - links. Boven en onder geen marge, links en rechts auto oftewel: evenveel. Het formulier staat nu dus altijd horizontaal in het midden, ongeacht de breedte van het venster van de browser.

Deze manier van centreren van een blok-element werkt alleen maar als het te centreren blok-element een breedte heeft.

Breedte. Ik neem als eenheid em, zodat de breedte mee verandert met de lettergrootte. Als ik px als eenheid neem, blijft de breedte bij 'n andere lettergrootte gelijk en is de opmaak gelijk helemaal kapot. Bij zoomen maakt de eenheid niet uit, want dan verandert de breedte sowieso mee, ongeacht welke eenheid wordt gebruikt.

Randje rondom het hele formulier.

Omdat voor links geen waarde is opgegeven, krijgt links automatisch dezelfde waarde als rechts. Hier staat dus eigenlijk 5px 5px 8px 5px in de volgorde boven - rechts - onder - links.

Overal 'n kleine afstand tussen de buitenkant van het formulier en de inhoud van het formulier.

Kleinere letter omdat het formulier anders heel erg groot gaat worden. Als eenheid neem ik em, zodat ook gebruikers van Internet Explorer de lettergrootte kunnen veranderen.

Voorgrondkleur zwart. Dit is onder andere de kleur van de tekst.

Hoewel dit de standaardkleur is, geef ik de kleur toch op. Hieronder geef ik een achtergrondkleur op. Sommige mensen hebben zelf de voorgrond- en/of achtergrondkleur veranderd, bijvoorbeeld omdat ze slecht kleuren kunnen onderscheiden. Als ik nu de achtergrondkleur verander, maar niet de voorgrondkleur, loop ik het risico dat tekstkleur en achtergrondkleur te veel op elkaar gaan lijken.

Door beide op te geven, weet ik redelijk zeker dat achtergrond- en tekstkleur genoeg van elkaar blijven verschillen. Als de gebruiker !important heeft gebruikt, is er nog niets aan de hand, want dan veranderen achtergrond- en voorgrondkleur geen van beide.

Ik heb dit ook al bij de body opgegeven, maar sommige mensen hebben bij álle elementen de kleuren veranderd. Het heeft immers weinig zin als ze dat alleen bij de body doen, terwijl de sitebouwer de kleuren ook bij bijvoorbeeld de paragrafen heeft aangepast.

Formulier witte achtergrond geven.

De paragrafen met id="kopje" en id="verzend". Hierin staan de tekst helemaal bovenaan over verplichte velden en de verzendknop helemaal onderaan.

Zet alle inline-elementen zoals tekst en knoppen horizontaal in het midden.

Een paragraaf is een blok-element en krijgt normaal genomen daardoor automatisch de breedte van zijn ouder. Dat is hier <form>. Als ik dus de inhoud van deze paragrafen in het midden van de paragraaf zet, staan ze automatisch ook in het midden van het formulier, want paragraaf en formulier zijn even breed.

Een paragraaf heeft van zichzelf een marge aan boven- en onderkant. Die kan ik hier niet gebruiken en die worden er dus genadeloos uit geschopt. (Sorry, maar m'n Mars staat in de ascendant van de Maan en daar knalt Venus op en dan word ik altijd wat agressief. Je zou me met Internet Explorer 6 bezig moeten zien als Venus samen met Jupiter m'n Mars heeft opgevreten...)

Bij de velden die verplicht ingevuld moeten worden staat een sterretje. Dit sterretje staat binnen een <strong>. Hierdoor valt het beter op, omdat het vet wordt weergegeven. Veel spraakbrowsers en dergelijke leggen ook de nadruk op iets wat binnen <strong> staat, wat hier goed uitkomt.

In plaats van <strong> had ik ook 'n span kunnen nemen, maar omdat ik dit element verder toch niet gebruik in dit voorbeeld, kan ik het in dit geval prima hiervoor gebruiken.

'n Beetje listig is dit wel, want als ik nou ergens anders ook nog <strong> zou gebruiken, zoek ik me ongans waarom dat hardnekkig rood wordt. Veiliger zou dus zijn om hier 'n class te gebruiken, of 'n selector als form strong, zodat de werking in ieder geval beperkt blijft tot binnen het formulier.

Sterretje iets omlaag zetten, zodat het precies halverwege de regel komt te staan.

En rood kleuren.

Alle fieldsets. Voor het nut van een fieldset voor toegankelijkheid zie fieldset.

Een fieldset bestaat uit een aantal bij elkaar horende elementen. Door een kleine marge aan de onderkant te geven komt de fieldset iets meer apart te staan van niet bij de fieldset horende elementen.

Firefox, Opera, Safari en Google Chrome voegen heel behulpzaam padding toe. Dat is weliswaar heel lief en ongetwijfeld goedbedoeld, maar ik kan 't hier niet gebruiken, dus weg ermee.

Achtergrond-afbeelding bij de fieldset. Dit is een plaatje van 1 px breed en 300 px hoog. Onderaan is het blauw en naar boven toe wordt het steeds lichter.

Ik zet het plaatje aan de onderkant van de fieldset neer. Hierdoor is het eind van de fieldset, de onderkant, duidelijk te zien.

Omdat sommige fieldsets hoger zijn dan 300 px, laat ik het plaatje zich alleen in horizontale richting herhalen. Anders zou bij de hogere fieldsets een tweede afbeelding in verticale richting worden neergezet, en dat is foeilelijk. Bovendien is het dan niet meer duidelijk waar de fieldset eindigt.

In sommige browsers wordt de achtergrond-afbeelding ook herhaald als de lettergrootte zo groot wordt, dat daardoor de fieldset hoger dan 300 px wordt. Ook dat voorkom ik met repeat-x.

De fieldsets die zelf binnen 'n fieldset staat: alle geneste fieldsets.

De css die ik heb opgegeven bij fieldset geldt ook voor deze fieldsets.

Een fieldset krijgt automatisch een border. Het formulier is in drie grote groepen (fieldsets) verdeeld. Rondom die fieldsets staat een border. Prima, dat verduidelijkt dat de inhoud uit bij elkaar horende elementen bestaat.

Als ik ook nog om de geneste fieldsets een border neer zou zetten, wordt het alleen maar erg onduidelijk: veel te veel lijnen. Dus bij 'n geneste fieldset haal ik de border weg.

Bij fieldset heb ik een achtergrond aan elke fieldset gegeven. Hiervoor geldt hetzelfde verhaal als bij de border hierboven: 'n achtergrond bij geneste fieldsets maakt het geheel volstrekt chaotisch (en foeilelijk). Dus geen achtergrond.

Alle <legend>'s. Voor het nut van legend voor toegankelijkheid zie legend.

Een legend is tekst die automatisch linksboven in de border van de fieldset wordt gezet. Met behulp van css kan ik deze plaats veranderen.

Zonder marge.

Met kleine marge.

Links 'n marge van 5 px. De legend wordt linksboven in de border van de fieldset neergezet. Maar wel héél erg linksboven: er is vrijwel geen horizontale border links van de legend. Door links 'n kleine marge te geven krijg ik aan de linkerkant van de tekst 'n klein horizontaal streepje, en dat vind ik mooier.

Vette letter, vind ik duidelijker.

Waren andere browsers eerst opdringerig behulpzaam door ongevraagd 'n padding aan te brengen, Internet Explorer 7 en 8 zetten de legend in knalblauw neer. Nou is blauw mijn lievelingskleur, maar hoe ze hier knalblauw hebben kunnen kiezen... Brrr, weg ermee, gewoon zwart.

Alle <legend>'s binnen een fieldset die weer binnen een fieldset ligt. De legends die bij de geneste fieldsets horen.

De css die ik heb opgegeven bij legend geldt ook voor deze legends.

Bij legend heb ik gezorgd dat de legend eruit zag als 'n kopje, dat hij opviel. Dat is leuk voor de drie grote fieldsets, maar niet voor de geneste fieldsets, want dan wordt het 'n bonte kermis.

Hier geef ik de legend weer als gewone tekst. Voor spraakbrowsers en dergelijke maakt dat niets uit, want die zien nog steeds 'n volwaardige <legend>. Aan wat ik verder sleutel aan het uiterlijk van de legend hebben die geen boodschap.

Ik kan, door verschillen tussen browsers, niet alleen met deze selector alles helemaal goed krijgen. Daarom moet dit eigenlijk in samenhang met de hieronder staande legend span worden gezien.

De tekst in deze legend staat in een span, die absoluut is gepositioneerd. Daarom moet ik hier zelf voor padding zorgen, anders staat de legend te dicht op de invoervelden.

Omdat voor links geen waarde is opgegeven, krijgt links automatisch dezelfde waarde als rechts. Hier staat dus eigenlijk 0 0 5px 0 in de volgorde boven - rechts - onder - links. Alleen aan de onderkant 'n kleine padding. Dit zorgt voor wat afstand tussen de legend en de keuzevelden.

Deze padding levert, gecombineerd met die bij legend span, de juiste afstanden op. Door verschillen tussen browsers kan ik dat niet hier in één keer doen.

Ik gebruik de legend hier als gewone tekst. Bij legend heb ik de tekst vet gemaakt, hier maak ik hem voor deze legends weer normaal.

De spans binnen 'n legend. Ik gebruik hier geen class, want in dit voorbeeld staan in de legends alleen spans die onderstaande css nodig hebben. Zouden er ook nog andere spans staan, dan zou ik met 'n class of zo moeten werken.

Alle tekst die binnen een legend in een geneste fieldset staat, staat binnen 'n span. Dus alle legends van de geneste fieldsets vallen binnen deze selector. Ik heb dit gedaan omdat het onmogelijk was, door verschillen tussen browsers, deze legends in één keer goed te krijgen. Het gebruik van 'n span geeft nog 'n tweede aanknopingspunt voor css. Daarom moet deze selector eigenlijk in samenhang met de hierboven staande fieldset fieldset legend worden bekeken.

Absoluut positioneren. Omdat het onmogelijk was, door verschillen tussen browsers, deze legends netjes uit te lijnen, heb ik uiteindelijk maar 'n span gefabriekt, daar de tekst van de legend in gezet en vervolgens die span absoluut gepositioneerd. Daarmee omzeilde ik de verschillen in marge en padding tussen browsers.

Er wordt gepositioneerd ten opzichte van de eerste ouder die zelf een positie heeft. Dat is hier form.

Een span is een inline-element. Door hem absoluut te positioneren, verandert hij in een blok-element. Daardoor kan ik eigenschappen als padding gebruiken.

Hiermee staat de tekst in de legend netjes rechts uitgelijnd.

Kleine padding aan de bovenkant, anders komt de tekst te dicht op z'n bovenbuur te staan.

Deze padding levert, gecombineerd met die bij fieldset fieldset legend, de juiste afstanden op. Door verschillen tussen browsers kan ik dat niet hier in één keer doen.

De elementen met class="keuze". Dat zijn hier de labels met 'Ja' en 'Man'. Er zijn twee setjes met radioknoppen, en deze labels horen bij de eerste knop van elk van die setjes.

De radioknoppen staan in een fieldset. Bij legend span is de tekst in de legend bij die fieldset absoluut gepositioneerd. En iets dat absoluut is gepositioneerd, bestaat niet meer voor de andere elementen op de pagina. Daardoor komen deze labels en de bijbehorende radioknoppen over de legend te staan.

Door het eerste label van elke fieldset met radioknoppen een marge aan de bovenkant te geven, komen alle labels en radioknoppen op de juiste plaats te staan.

Je zou verwachten dat ik dit niet bij 'n label, maar bij de radioknop (<input type="radio">) zou neerzetten. Maar dan werkt het om een of andere reden niet bij Opera. Als de marge bij label wordt neergezet, werkt het in alle browsers.

Een scherp waarnemer zal nu nog opmerken, dat dit bij de checkboxen met de kleuren ook speelt. Dat klopt. Maar om een of andere reden werkt daar 'n marge aan de bovenkant niet in Opera, die blijft de checkboxen verkeerd neerzetten. Daarom heb ik 't daar opgelost met 'n <br /> na de legend.

De elementen met class="links". Dit zijn de radioknoppen en checkboxen aan de linkerkant.

Iets meer naar rechts zetten, zodat ze netjes uitgelijnd met de rest van het formulier staan.

De elementen met class="radio-rechts". De radioknoppen aan de rechterkant.

Op zich staan de radioknoppen prima, maar ik wil ze uitlijnen met de rest van het formulier. Daarom 'n stukje naar links neerzetten.

Alle labels. Voor het nut van label voor toegankelijkheid zie label for.

Een label is van zichzelf een inline-element. Als ik er 'n blok-element van maak, komen ze op 'n nieuwe regel te staan, en dat wil ik niet. Dit zit er tussenin: maak het mogelijk om eigenschappen als breedte te gebruiken, maar begin niet op 'n nieuwe regel.

De labels staan overwegend aan de linkerkant. Door de labels allemaal even breed te maken, komen de meeste invoervelden aan de rechterkant netjes uitgelijnd onder elkaar te staan. Waar dat niet gebeurt, zoals bij de checkboxen, geef ik daarvoor elders aparte css.

Als eenheid neem ik em, zodat bij 'n grotere of kleinere lettergrootte de opmaak zo goed mogelijk intact blijft.

De labels in de fieldset met id="kleuren". Dit is de fieldset met de checkboxen met kleuren.

Als ik deze breedte aan de labels aan de linkerkant geef, komen de checkboxen rechts netjes uitgelijnd onder de rest van het formulier te staan. Dat de labels rechts ook deze breedte krijgen, maakt verder niets uit.

De eenheid % blijkt hier het best te werken. Bij een andere lettergrootte en zoomen blijft met deze eenheid de opmaak het best intact.

Het percentage wordt berekend ten opzichte van de ouder van het element, dat is hier fieldset#kleuren. Deze heeft echter geen opgegeven breedte. En omdat 'n fieldset 'n blok-element is, krijgt dat dan normaal genomen automatisch dezelfde breedte als zijn ouder.

Dat is 'n <li>, wat ook weer 'n blok-element is zonder breedte. Dus die wordt ook weer even breed als zijn ouder. Enz. Uiteindelijk blijkt de eerste (voor)ouder met 'n breedte form te zijn. De breedte wordt dus genomen ten opzichte van form.

Omdat labels inline-elementen zijn, wordt de regel gevuld tot deze vol is. Daardoor zouden twee labels en drie checkboxen op één regel komen. Om dat te voorkomen heb ik achter elke rechter checkbox een <br /> gezet.

Als ik de labels rechts 'n percentage geef dat de rest van de regel vult en zo 'n derde checkbox op dezelfde regel voorkomt, gaat 't vreemd genoeg grandioos mis bij zoomen: de opmaak van de checkboxen verandert gelijk in 'n chaos.

De elementen met class="verberg". Hierin staat wat extra informatie voor de geboortedatum, die normaal genomen niet zichtbaar is. Spraakbrowsers en dergelijke zien het echter wel.

Absoluut positioneren. Er wordt gepositioneerd ten opzichte van de eerste ouder die zelf een positie heeft, dat is hier form.

Ver links buiten het scherm parkeren. Hierdoor is dit element normaal genomen niet zichtbaar.

Bij de geboortedatum is gelijk zichtbaar hoe die ingevuld moet worden. Als je echter de opmaak niet kunt zien, is dat veel minder duidelijk. Op het scherm staat alleen maar 'Geboortedatum', gevolgd door drie keuzelijsten: eentje voor de dag, eentje voor de maand en eentje voor het jaar. (Terzijde: in het echt zou ik nooit 'n keuzelijst gebruiken voor de dag en al helemaal niet voor het jaar: je zoekt je 'n ongeluk. Veel beter is gewoon laten invullen en controleren op fouten met JavaScript en PHP.)

Goed, op het scherm staat dus alleen 'Geboortedatum *'.

In de html staat:

Dit levert dus als tekst op: 'Geboortedatum dag *'. Het woord 'dag' wordt links buiten het scherm geparkeerd, maar is wel gewoon zichtbaar voor 'n spraakbrowser en dergelijke.

Voor de keuzelijst met de maand staat een label met 'Geboortedatum maand'. Ook dit wordt links buiten het scherm geparkeerd, maar is gewoon zichtbaar voor spraakbrowsers en dergelijke.

Op dezelfde manier staat voor het jaar een label met 'Geboortedatum jaar'.

Ook iemand die de opmaak niet ziet weet nu precies waar zij of hij mee bezig is.

De geordende lijsten binnen een fieldset. Voor het nut van ol voor toegankelijkheid zie ol.

Geordende lijsten worden genummerd. Dat wil ik hier niet, want ze worden eigenlijk alleen maar gebruikt voor toegankelijkheid. Spraakbrowsers en dergelijke zullen, afhankelijk van programma en instellingen, de nummers nog steeds herkennen en gebruiken.

De lijst-items binnen een fieldset. Voor het nut van li voor toegankelijkheid zie li.

Omdat voor onder en links geen waarde is ingevuld, krijgen die automatisch dezelfde waarde als boven en rechts. Hier staat dus eigenlijk 4px 0 4px 0 in de volgorde boven - rechts - onder - links.

Links en rechts geen padding, boven en onder 4 px. Anders komen de invoervelden wel heel erg dicht tegen elkaar aan te staan.

Door aan de onderkant van het lijst-item 'n lichtgrijze lijn te zetten, krijg je 'n licht lijntje tussen de verschillende labels en bijbehorende invoervelden. Omdat bijvoorbeeld alle checkboxen in hetzelfde lijst-item staan, komt daar maar één lijntje onder te staan.

De fieldset met id="kleuren". Dit is de fieldset waarbinnen de checkboxen voor de kleuren staan.

Bij fieldset li heb ik het lijst-item aan boven- en onderkant 4 px padding gegeven. Die is er dus ook boven het label van deze fieldset (De vraag 'Naar welke kleur ...') en onder de onderste checkbox. Maar deze padding geldt niet voor de ruimte tússen de checkboxen, die daardoor te dicht op elkaar staan.

Door de regelhoogte te vergroten komen ze op de juiste afstand van elkaar te staan.

Alle invoervelden, ongeacht de soort.

De invoervelden hebben in de verschillende browsers een verschillende breedte. In Internet Explorer 6 en 7 zit er zelfs verschil tussen de breedte van 'n invoerveld voor gewone tekst en 'n invoerveld voor 'n wachtwoord. Nu zijn ze allemaal even breed, in alle browsers.

Het percentage wordt berekend ten opzichte van de ouder van het element, dat is bij 'n invoerveld altijd 'n fieldset. Deze heeft echter geen opgegeven breedte. En omdat 'n fieldset 'n blok-element is, krijgt dat dan normaal genomen automatisch dezelfde breedte als zijn ouder.

Dat is 'n <li>, wat ook weer 'n blok-element is zonder breedte. Dus die wordt ook weer even breed als zijn ouder. Enz. Uiteindelijk blijkt de eerste (voor)ouder met 'n breedte form te zijn. De breedte wordt dus genomen ten opzichte van form.

Bij form heb ik 'n tamelijk kleine letter opgegeven, omdat het formulier anders veel te groot wordt. In de invoervelden wil ik 'n iets grotere letter, zodat dit iets beter leesbaar is. Als bijeffect worden hierdoor de invoervelden iets hoger, wat er beter uitziet. Als eenheid neem ik em, zodat ook gebruikers van Intern Explorer de lettergrootte kunnen veranderen.

Helemaal begrijpen doe ik dit trouwens niet. 1em betekent gewoon 'even groot', dus even groot als ik bij form heb opgegeven. Toch krijg ik, in alle browsers, een grotere letter als ik hier 1 em invul. Als ik geen lettergrootte opgeef, krijg ik 'n kleinere letter, dus de grootte wordt wel geërfd.

Verderop bij textarea moet ik ook inderdaad, in precies dezelfde situatie, 1.3 em opgeven om 'n grotere letter te krijgen. De wondere wereld van css en html, zullen we maar zeggen.

Alle invoervelden binnen de fieldsets met class="kiezen". Dit zijn de radioknoppen en checkboxen.

Bij input heb ik de invoervelden 54% breed gemaakt. Dat is leuk voor tekstvelden, maar misschien 'n ietsiepietsie overdreven voor radioknoppen en checkboxen. auto wil hier zeggen dat ze gewoon de standaardbreedte krijgen die bij dit soort invoervelden hoort: 'n rondje voor 'n radioknop en 'n vierkantje voor 'n checkbox.

Alle textarea's. Dat is er hier maar een.

Even breed maken als de andere onderdelen van het formulier.

Het percentage wordt berekend ten opzichte van de ouder van het element, dat is hier een <li>. Deze heeft echter geen opgegeven breedte. En omdat 'n <li> 'n blok-element is, krijgt dat dan normaal genomen automatisch dezelfde breedte als zijn ouder.

Dat is 'n <ol>, wat ook weer 'n blok-element is zonder breedte. Dus die wordt ook weer even breed als zijn ouder. Enz. Uiteindelijk blijkt de eerste (voor)ouder met 'n breedte form te zijn. De breedte wordt dus genomen ten opzichte van form.

Bij form heb ik 'n tamelijk kleine letter opgegeven. Hier wil ik weer 'n iets grotere, omdat dat bij het typen van tekst prettiger is. Als eenheid neem ik em, zodat ook gebruikers van Internet Explorer de lettergrootte kunnen veranderen.

Kleine afstand tussen de tekst boven de textarea en de textarea zelf.

Ook Internet Explorer 9 zet nog steeds een overbodige scrollbalk naast het tekstveld, zelfs als dit helemaal leeg is. Dit voorkomt dat, en andere browsers hebben er geen last van.

Alle keuzelijsten. Dat zijn hier de provincie en geboortedag, -maand en -jaar.

Hier gelijk onder maak ik de keuzelijsten hoger. Ik moet dan ook de letters iets vergroten, anders ziet het er niet netjes uit. Als eenheid neem ik em, zodat ook gebruikers van Internet Explorer de lettergrootte kunnen veranderen.

'n Grotere letter krijgen met 1 em is heel vreemd, zoals omschreven staat bij font-size: 1em.

Deze hoogte van de keuzelijst is 'n compromis. In elke browser ziet deze hoogte er goed uit in verhouding tot de andere invoervelden. Maar als je goed kijkt zie je dat hij in sommige browsers precies even hoog is als de andere velden, in sommige iets lager en in sommige iets hoger.

Door em als eenheid te nemen, past de hoogte zich aan de lettergrootte aan. Als ik als eenheid px zou nemen, kan ik het misschien in alle browsers helemaal goed krijgen. Maar als ik dan de letters vergroot, groeit de hoogte niet mee en vallen delen van de letters weg, dus dat is geen goed idee.

De keuzelijst met id="provincie". De keuzelijst met provincies.

Om een of andere reden staan keuzelijsten iets meer naar rechts dan andere invoervelden, dus iets naar links zetten.

Even breed maken als de andere invoervelden.

De keuzelijst met id="dag". De dagen bij Geboortedatum.

Dag, maand, jaar en de ertussen zittende marges zijn samen even breed als de andere invoervelden. Van deze gezamenlijke breedte krijgt de dag 12 %.

Het percentage wordt berekend ten opzichte van de ouder van het element, dat is hier een <li>. Deze heeft echter geen opgegeven breedte. En omdat 'n <li> 'n blok-element is, krijgt dat dan normaal genomen automatisch dezelfde breedte als zijn ouder.

Dat is 'n <ol>, wat ook weer 'n blok-element is zonder breedte. Dus die wordt ook weer even breed als zijn ouder. Enz. Uiteindelijk blijkt de eerste (voor)ouder met 'n breedte form te zijn. De breedte wordt dus genomen ten opzichte van form.

Boven en onder geen marge. Rechts 'n marge van 6 px voor wat afstand tot de hiernaast staande maand. En om een of andere reden staan keuzelijsten iets meer naar rechts dan andere invoervelden, dus 4 px naar links zetten.

De keuzelijst met id="maand". De maanden bij Geboortedatum.

Dag, maand, jaar en de ertussen zittende marges zijn samen even breed als de andere invoervelden. Van deze gezamenlijke breedte krijgt de dag 24 %.

Het percentage wordt berekend ten opzichte van de ouder van het element, dat is hier een <li>. Deze heeft echter geen opgegeven breedte. En omdat 'n <li> 'n blok-element is, krijgt dat dan normaal genomen automatisch dezelfde breedte als zijn ouder.

Dat is 'n <ol>, wat ook weer 'n blok-element is zonder breedte. Dus die wordt ook weer even breed als zijn ouder. Enz. Uiteindelijk blijkt de eerste (voor)ouder met 'n breedte form te zijn. De breedte wordt dus genomen ten opzichte van form.

Kleine afstand tot de ernaast staande jaren.

De keuzelijst met id="jaar". De jaren bij Geboortedatum.

Dag, maand, jaar en de ertussen zittende marges zijn samen even breed als de andere invoervelden. Van deze gezamenlijke breedte krijgt de dag 15 %.

Het percentage wordt berekend ten opzichte van de ouder van het element, dat is hier een <li>. Deze heeft echter geen opgegeven breedte. En omdat 'n <li> 'n blok-element is, krijgt dat dan normaal genomen automatisch dezelfde breedte als zijn ouder.

Dat is 'n <ol>, wat ook weer 'n blok-element is zonder breedte. Dus die wordt ook weer even breed als zijn ouder. Enz. Uiteindelijk blijkt de eerste (voor)ouder met 'n breedte form te zijn. De breedte wordt dus genomen ten opzichte van form.

19% is tamelijk breed, maar als ik het smaller maak vallen de dubbele jaartallen die in optgroup staan gedeeltelijk weg in de meeste browsers.

Hiermee bestrijk ik alle soorten invoervelden in dit formulier. Als een van die velden focus heeft. Dat wil zeggen dat je er bijvoorbeeld tekst in kunt invoeren.

Zet er 'n blauwe rand omheen. Ik neem outline en geen border, want 'n border neemt ruimte in. Daardoor zouden bij focus de velden iets verschuiven. 'n Outline zie je wel, maar hij neemt geen ruimte in.

Internet Explorer 6 en 7 kennen geen outline, dus daar gebeurt niets en ben je afhankelijk van de (ietwat onduidelijke) standaard-instellingen van die browsers.

Dit zijn 'n paar nieuwe dingen uit css3. Ze hebben hier geen enkel nut, integendeel zou ik haast zeggen, maar ik vond 't leuk om te laten zien.

input: gewoon alle invoervelden.

[type="checkbox"]: dit attribuut moet letterlijk aanwezig zijn. Dit beperkt de werking van deze selector dus tot de checkboxen. Internet Explorer 6 en 7 kennen dit niet, dus die negeren deze regel gewoon helemaal.

:checked: alleen als er een vinkje in de checkbox staat. Dit is een nieuwe pseudo-class uit css3. Internet Explorer 6, 7 en 8 kennen dit niet, dus uiteindelijk werkt deze selector niet in Internet Explorer 6, 7 en 8. In alle andere browsers werkt deze selector wel, ook in Internet Explorer 9.

Op de pagina met links kun je onder css → Bugs en hacks → Dingen mogelijk maken specifiek voor Internet Explorer JavaScript vinden om css3 pseudo-classes werkend te krijgen in Internet Explorer ouder dan versie 9.

Zet een groene outline rondom de checkbox. Maar alleen als er 'n vinkje in staat dus. Dit is redelijk zinloos, maar 't laat zien wat de mogelijkheden zijn als css3 ooit echt geïmplementeerd is in alle browsers.

De ondersteuning voor css in 'n formulier verschilt nogal. Opera heeft hier op dit moment met stip de meest uitgebreide ondersteuning voor. Daarin kun je ook 'n border aanbrengen of de achtergrond veranderen.

'n Outline werkt ook in Firefox, Safari en Google Chrome, daarom heb ik daarvoor gekozen.

Speciaal voor Internet Explorer 6 en 7

Dit eigenaardige stukje code heet een 'conditional comment' en wordt door alle browsers gezien als commentaar, omdat het tussen <!-- en --> staat. Maar Internet Explorer herkent het, door de extra toevoegingen, als speciaal voor Internet Explorer bedoeld en zal het dus uitvoeren. Het is veiliger dan een zogenaamde 'hack', waarbij vaak gebruik wordt gemaakt van 'n fout (bug) in de browser. Dit is opzettelijk aangebracht door Microsoft en zal dus blijven bestaan, terwijl 'n bug gerepareerd kan worden.

De style voor Internet Explorer moet ná de normale komen, omdat de opdrachten voor Internet Explorer dan over de normale heen gaan.

Dit stukje geldt voor Internet Explorer 6 en 7 (het verticale streepje betekent 'of'), maar je kunt het ook voor andere versies aangeven.

In plaats van de style kun je ook 'n normale link naar 'n extern css-bestand aanbrengen:

Op de plaats van "../../css/naam-van-ie-stylesheet.css" vul je pad naar en naam van jouw stylesheet voor Internet Explorer 6 en 7 in. De css voor Internet Explorer 6 en 7 komt dan apart in die stylesheet te staan, zodat het de andere browsers niet stoort.

Het is belangrijk dat de spaties in <!--[if (IE 6) | (IE 7)]> en <![endif]--> precies zo worden overgenomen zoals ze hier staan.

De elementen met class="radio-rechts". De radioknoppen aan de rechterkant.

In Internet Explorer 6 en 7 moeten ze iets meer naar links worden gezet dan in de algemene css is opgegeven.

De labels in de fieldset met id="kleuren". Dit is de fieldset met de checkboxen met kleuren.

In de algemene css is 33% opgegeven, maar hierdoor komt de linkerrij met checkboxen net iets te veel naar rechts te staan.

Speciaal voor Internet Explorer 8

Dit geldt alleen voor Internet Explorer 8. Uitleg bij Speciaal voor Internet Explorer 6 en 7.

De elementen met class="radio-rechts". De radioknoppen aan de rechterkant.

In Internet Explorer 8 moeten ze, net als in Internet Explorer 6 en 7, iets meer naar links worden gezet dan in de algemene css is opgegeven. Ik kan het niet combineren met de css voor Internet Explorer 6 en 7, omdat daar nog 'n correctie in staat die niet nodig is voor Internet Explorer 8.