Skip links en inhoudsopgave

Laatst aangepast: .

Toegankelijk formulier met allerlei soorten invoervelden

Korte omschrijving

Toegankelijk formulier met voorbeelden van allerlei soorten invoervelden. Ook zonder css is dit formulier goed toegankelijk.

BELANGRIJK

Alles op deze site kan vrij worden gebruikt, met twee beperkingen:

* Je gebruikt het materiaal op deze site volledig op eigen risico. Het kan prima zijn dat er fouten in de hier verstrekte info zitten. Voor eventuele schade die door gebruik van materiaal van deze site ontstaat, in welke vorm dan ook, zijn www.css-voorbeelden.nl en medewerkers daarvan op geen enkele manier verantwoordelijk.

* Deze uitleg wordt regelmatig bijgewerkt. Het is daarom niet toegestaan deze uitleg op welke manier dan ook te verspreiden, zonder daarbij duidelijk te vermelden dat de uitleg afkomstig is van www.css-voorbeelden.nl en dat daar altijd de nieuwste versie is te vinden. Dit is om te voorkomen dat er verouderde versies worden verspreid.

Een link naar www.css-voorbeelden.nl wordt trouwens altijd op prijs gesteld.

Opmerkingen

Links in deze uitleg, vooral links naar andere sites, kunnen verouderd zijn. Op de pagina met links vind je steeds de meest recente links.

Alles op deze site is gemaakt op een systeem met Linux. Daarbij is vooral gebruik gemaakt van Quanta Plus, GIMP en Firefox met extensies. De pdf-bestanden zijn gemaakt met LibreOffice.

Vragen of opmerkingen? Fout gevonden? Ga naar het forum.

Iets gevonden waar je wat aan hebt? Mooi. Als je je waardering wilt uiten, maak dan een donatie over aan War Child Nederland, een organisatie die kinderen uit oorlogsgebieden helpt hun trauma's te verwerken. Of - nog beter - wordt donateur:
War Child Nederland

Achterliggend idee

Formulieren zijn vaak (bijzonder) slecht toegankelijk voor mensen die bijvoorbeeld een spraakbrowser gebruiken. Terwijl html 'n aantal codes heeft die, met betrekkelijk weinig moeite, het verschil tussen goed toegankelijk en ontoegankelijk uitmaken.

Bijkomend voordeel is dat 'n deel van deze codes ook gebruikt kan worden om in gewone browsers de opmaak te verbeteren. Bovendien is de opbouw van het formulier beter te begrijpen door de spider van 'n zoekmachine.

De aanpassingen in de html staan apart bij Toegankelijkheid van een <form> verhogen met behulp van html.

Voor gewone browsers wordt css gebruikt voor de opmaak van het formulier. Daardoor is het in een gewone browser duidelijk en overzichtelijk. Maar omdat de basis van het formulier alleen uit html bestaat en de css alleen voor opmaak wordt gebruikt, blijft het formulier ook in screenreaders, tekstbrowsers, en dergelijke goed toegankelijk.

Het formulier is met behulp van css uitgelijnd in twee verticale rijen. Voor de verschillende soorten invoervelden waren hier nogal wat aanpassingen voor nodig. Deze worden in de beschrijving van de code en css besproken.

Het formulier valt in drie grote delen uiteen. Door het gebruik van een verlopende achtergrondkleur en randjes zijn deze drie delen makkelijk van elkaar te onderscheiden, waardoor het formulier (hopelijk) overzichtelijker wordt.

Toegankelijkheid van een <form> verhogen met behulp van html

Zie ook de algemene tips over toegankelijkheid bij Toegankelijkheid en zoekmachines.

In een formulier kan een hele reeks invoer- en keuzevelden voorkomen. In de regel staat bij elk invoerveld en bij elke groep keuzevelden een tekst. Deze tekst hoort bij alle invoervelden vóór het 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.

Een tabel is bedoeld voor gegevens die in een tabel thuishoren, zoals reeksen met cijfers, statistieken en 'n kalender. 'n Tabel is niet bedoeld voor opmaak. Ooit kon dat niet anders, maar tegenwoordig zijn er veel betere, simpeler en makkelijker te onderhouden methoden. 'n Tabel die voor opmaak wordt gebruikt, is vaak ook bijzonder slecht toegankelijk voor screenreaders en dergelijke.

Bij 'n tabel kunnen ook dit soort dingen gebeuren:

Klein stukje van tabel

Iedereen zal gelijk begrijpen dat in de eerste kolom de achternaam moet worden ingevuld, in de tweede het eventuele tussenvoegsel en in de derde de voornaam. Ja, als je de opmaak kunt zien. Want wat staat er in de code?

<table> <tr><td>Achternaam</td><td>Tussenvoegsel</td><td>Voornaam</td></tr> <tr><td><input type="text" /></td><td><input type="text" /></td><td><input type="text" /></td></td> </table>

Daar wordt door een screenreader het volgende van gemaakt:

Foutieve weergave van tabel door Fangs

Waarmee dus volstrekt onduidelijk is welk invoerveld (Edit) bij welke tekst hoort. Dit is niet alleen onduidelijk voor 'n screenreader en dergelijke, maar ook voor Google, Bing en Yahoo, dus je benadeelt ook jezelf als je deze werkwijze toepast. (In bovenstaand simpele voorbeeld maakt het voor 'n zoekmachine niet zo veel uit, maar er zijn heel veel dingen te bedenken waar de volgorde wel van groot belang is om het te kunnen begrijpen.)

Los van dit soort algemene dingen kent html een aantal tags die speciaal gebruikt kunnen worden om de toegankelijkheid van een formulier te vergroten.

Hieronder staan drie scherm-afbeeldingen.

De bovenste laat zien hoe Fangs Screen Reader Emulator het formulier ziet als gebruik wordt gemaakt van een tabel voor de opmaak.

De middelste laat zien hoe Fangs het ziet als geen gebruik wordt gemaakt van een tabel, maar ook niet van de mogelijkheden die html heeft om een formulier toegankelijk te maken.

De onderste laat zien hoe Fangs het ziet als het formulier zo toegankelijk mogelijk is gemaakt. Dit is ook hoe een spraakbrowser en dergelijke het voorlezen.

De door Fangs aangemaakte tekst is Engelstalig, omdat er (nog) geen Nederlandstalige uitvoering van bestaat.

Formulier in een tabel zoals gezien door Fangs Screen Reader Emulator
Formulier in een tabel zoals gezien door Fangs Screen Reader Emulator.

Formulier niet in een tabel, maar ook zonder html om het toegankelijk te maken, zoals gezien door Fangs Screen Reader Emulator
Formulier niet in een tabel, maar ook zonder html om het toegankelijk te maken, zoals gezien door Fangs Screen Reader Emulator.

Formulier met gebruik van html om het toegankelijker te maken, zoals gezien door Fangs Screen Reader Emulator
Formulier met gebruik van html om het toegankelijker te maken, zoals gezien door Fangs Screen Reader Emulator.

In de loop der jaren heb ik gemerkt dat het jammer genoeg veel mensen worst zal wezen of iemand met 'n handicap hun pagina kan bezoeken of niet. Voor die mensen is dan misschien het volgende meer egoïstische motief van belang: een spider van een zoekmachine is uitstekend te vergelijken met een blinde. Je kunt grofweg zeggen dat alles wat toegankelijkheid bevordert, ook goed is voor een hogere plaats in de zoekindex.

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 elke lijst-ingang komt 'n invoerveld met bijbehorende tekst te staan. Radioknoppen en checkboxen die bij elkaar horen, komen in dezelfde lijst-ingang te staan.

label for

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

<label>Gebruikersnaam <input /></label>

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:

<label for="gebruikersnaam">Gebruikersnaam </label><input id="gebruikersnaam" />

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.

Beschrijving van code en css

Anders dan bij andere voorbeelden is hier niet goed onderscheid te maken tussen essentiële en niet-essentiële code. Daarom is maar weinig essentiële code te herkennen aan de rode kleur. Vrijwel alle code is gewoon bruin.

Deze uitleg hoort bij het voorbeeld dat in de download zit. Het voorbeeld uit de download verschilt iets van het voorbeeld hier op de site. In de download ontbreken bijvoorbeeld de witte vlakken met de links. Ook in de kopregels zit vaak wat verschil. Daarnaast kunnen er nog andere (meestal kleine) verschillen zijn.

Als je deze uitleg leest naast de broncode van het voorbeeld op de site, kan het dus bijvoorbeeld zijn dat 'n h1 uit de css bij 'n <h2> uit de html hoort. Maar het gaat niet om hele grote, fundamentele afwijkingen.

Als je dit lastig vindt, downloadt dan de hele handel (ga terug naar het voorbeeld en kies daar voor downloaden). In de download zit 'n voorbeeld dat wel naadloos aansluit op de uitleg in de download.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">

Een document moet met een doctype beginnen om weergaveverschillen tussen browsers te voorkomen. Zonder doctype is de kans op verschillende (en soms volkomen verkeerde) weergave tussen verschillende browsers heel erg groot.

Geldige doctypes vind je op www.w3.org/QA/2002/04/valid-dtd-list.

Gebruik het volledige doctype, inclusief de url, anders werkt het niet goed.

De toevoeging achter <html hierboven hoort bij het gekozen doctype.

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Zorgt dat de browser letters met accenten en dergelijke goed kan weergeven. Als je als doctype html hebt gekozen, moet je niet eindigen op />, maar op > (dit geldt voor alles in de head wat eindigt op />).

utf-8 is de beste charset (tekenset), omdat deze alle talen van de wereld (en nog heel veel andere extra tekens) bestrijkt, maar toch niet meer ruimte inneemt voor de code dan nodig is. Als je utf-8 gebruikt, hoef je veel minder entiteiten (&auml; en dergelijke) te gebruiken, maar kun je bijvoorbeeld gewoon ä gebruiken.

Deze regel moet zo hoog mogelijk komen te staan, als eerste regel binnen de head, omdat hij anders door sommige browsers niet wordt gelezen.

<link rel="stylesheet" type="text/css" href="../../css/naam-van-stylesheet.css" /> <!--Instellingen voor Internet Explorer --> <!--[if IE]> <link rel="stylesheet" type="text/css" href="../../css/naam-van-ie-stylesheet.css"> <![endif]-->

Dit stukje code heeft in dit voorbeeldbestand geen enkel nut. Normaal genomen is het een verwijzing naar een extern stylesheet, waarin de style staat. In dit voorbeeld verwijst de href naar een niet bestaand bestand.

De bedoeling is dat je bovenstaande regels aanpast voor je eigen bestand. De hele style, die onder deze regels in de <head> staat, wordt dan in het externe bestand geplaatst waar de href naar verwijst. In dat bestand komt de style precies zo te staan zoals die nu in de <head> staat. Het bestand moet eindigen op .css.

Voordeel van een externe stylesheet is onder andere, dat deze geldig is voor alle pagina's waaraan deze is gelinkt. 'n Verandering in de lay-out hoef je dan maar op één enkele centrale plek te aan te brengen.

In die externe stylesheet zet je alles wat in dit voorbeeld tussen <style type="text/css"> en </style> staat (zonder deze begin- en eindregel).

De bovenste regel is voor de algemene stylesheet, geldig voor alle browsers. Dit is gewoon 'n link die naar 'n bestand elders verwijst, waar de css in staat. Op de plaats van "../../css/naam-van-stylesheet.css" moet je pad naar en naam van jouw stylesheet invullen.

Het eigenaardige stukje code daaronder 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. Op deze manier kun je 'n stylesheet alleen voor Internet Explorer opnemen.

Dit stukje geldt voor alle versies van Internet Explorer, maar je kunt het ook per versie aangeven.

De link verwijst naar een aparte stylesheet voor Internet Explorer, waarin je css speciaal voor die browser zet. Op de plaats van "../../css-naam-van-ie-stylesheet.css" moet je pad naar en naam van je stylesheet voor Internet Explorer invullen.

De link naar het aparte stylesheet voor Internet Explorer moet ná de link naar het algemene stylesheet komen, omdat de opdrachten voor Internet Explorer dan over die uit het algemene stylesheet heen gaan.

<style type="text/css">

Voor de duidelijkheid staat de style hier in het bestand zelf, maar het is beter deze in een apart stylesheet te zetten, zoals hierboven beschreven. In die stylesheet komt alles wat tussen bovenstaande regel en </style> staat.

Technisch gezien is er geen enkel bezwaar om het in die stylesheet te zetten met dezelfde vreselijke lay-out als die ik in dit voorbeeld gebruik. Maar als je dat doet, garandeer ik je hele grote problemen omdat het volstrekt onoverzichtelijk is. Ik gebruik alleen deze lay-out omdat het anders veel te veel regels worden.

Voorbeeld van 'n goede lay-out in je css:


	div#header-buiten
	{
	    position: absolute;
	    right: 16px;
	    width: 100%;
	    height: 120px;
	    background: yellow;
	}

	div#header-binnen
	{
	    margin-left: 16px;
	    height: 120px;
	    text-align: center;
	}
body

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.

margin: 0; padding: 0;

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

font-family: Arial, Helvetica, sans-serif;

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

font-size: 110%;

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.

color: black;

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.

background: #ff9;

Achtergrondkleurtje.

form

Hierin staat het hele formulier.

position: relative;

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

margin: 0 auto;

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.

width: 38em;

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.

border: black solid 1px;

Randje rondom het hele formulier.

padding: 5px 5px 8px;

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.

font-size: 0.8em;

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.

color: black;

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.

background: white;

Formulier witte achtergrond geven.

p#kopje, p#verzend

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

text-align: center;

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.

margin: 0;

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

strong

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.

vertical-align: -15%;

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

color: red;

En rood kleuren.

fieldset

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

margin-bottom: 8px;

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.

padding: 0;

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.

background: url(079-pics/achtergrond.jpg) bottom repeat-x;}

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.

fieldset fieldset

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

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

border: 0;

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.

background: none;

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.

legend

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.

margin-left: 5px;

Met kleine 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.

font-weight: bold;

Vette letter, vind ik duidelijker.

color: black;

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.

fieldset fieldset legend

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.

padding: 0 0 5px;

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.

font-weight: normal;

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.

legend span

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.

position: absolute;

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.

left: 49px;

Hiermee staat de tekst in de legend netjes rechts uitgelijnd.

padding-top: 4px;

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.

.keuze

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.

margin-top: 24px;

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.

.radio-rechts

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

margin-left: -23px;

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

label

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

display: inline-block;

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.

width: 13em;

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.

fieldset#kleuren label

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

width: 33%;

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.

.verberg

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.

position: absolute;

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

left: -2000px;

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:

<label for="dag">Geboortedatum <span class="verberg">dag</span> <strong>*</strong></label>

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.

fieldset ol

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

list-style: none;

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.

fieldset li

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

padding: 4px 0;

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.

border-bottom: solid 1px #ddd;

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

fieldset#kleuren

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

line-height: 20px;

Bij fieldset li heb ik de lijst-ingang 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.

input

Alle invoervelden, ongeacht de soort.

width: 54%;

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.

font-size: 1em;

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.

fieldset.kiezen input

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

width: auto;

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.

textarea

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

width: 91.5%;

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.

font-size: 1.3em;

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.

margin-top: 10px;

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

overflow: auto;

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.

select

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

font-size: 1em;

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.

height: 1.5em;

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.

select#provincie

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

margin-left: -4px;

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

width: 55%;

Even breed maken als de andere invoervelden.

select#dag

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

width: 12%;

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.

margin: 0 6px 0 -4px;

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.

select#maand

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

width: 20%;

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.

margin-right: 6px;

Kleine afstand tot de ernaast staande jaren.

select#jaar

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

width: 19%;

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.

input:focus, select:focus, textarea:focus

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.

outline: blue solid 1px;

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.

input[type="checkbox"]:checked

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.

outline: green solid 3px;

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

<!--[if (IE 6) | (IE 7)]> <style type="text/css"> div#buitenste {position: relative;} fieldset#kleuren label {width: 32%;} </style> <![endif]-->

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:

<!--[if (IE 6) | (IE 7)]> <link rel="stylesheet" type="text/css" href="../../css/naam-van-ie-stylesheet.css"> <![endif]-->

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.

.radio-rechts

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

margin-left: -30px;

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

fieldset#kleuren label

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

width: 32%;

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

<!--[if IE 8]> <style type="text/css"> .radio-rechts {margin-left: -30px;} </style> <![endif]-->

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

.radio-rechts

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

margin-left: -30px;

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.

De code aanpassen aan je eigen ontwerp

Toegankelijkheid en zoekmachines

Zie bij dit voorbeeld ook Toegankelijkheid van een <form> verhogen met behulp van html.

Toegankelijkheid (accessibility in het Engels) is belangrijk voor bijvoorbeeld blinden die een spraakbrowser gebruiken, of voor motorisch gehandicapte mensen die moeite hebben met het bedienen van een muis. Een spider van een zoekmachine (dat is het programmaatje wat de site indexeert voor de zoekmachine) is te vergelijken met een blinde. Als je je site goed toegankelijk maakt voor gehandicapten, is dat dus gelijk goed voor een hogere plaats in een zoekmachine. Dus als je 't niet uit sociale motieven wilt doen, kun je 't uit egoïstische motieven doen.

(Op die plaats in de zoekmachine heb je maar beperkt invloed. De toegankelijkheid van je site is maar één van de factoren, maar zeker niet onbelangrijk.)

Als je bij het maken van je site al rekening houdt met toegankelijkheid, is dat nauwelijks extra werk. 't Is ongeveer te vergelijken met inbraakbescherming: doe dat bij 'n nieuw huis en 't is nauwelijks extra werk, doe 't bij 'n bestaand huis en 't is al snel 'n enorme klus.

Enkele tips die helpen bij toegankelijkheid:

Getest in

Laatst gecontroleerd op 13 maart 2012.

(Internet Explorer 6 is voor het laatst gecontroleerd op 9 februari 2010. Op deze browser test ik niet meer. Maar omdat de code nauwelijks is veranderd, neem ik aan dat dit voorbeeld ook nog werkt in Internet Explorer 6.)

Dit voorbeeld is getest in Firefox, Opera, Safari, Google Chrome, Internet Explorer 6, 7, 8 en 9 in de resoluties 800x600, 1024x768, 1280x1024 en 1440x900. Steeds met de laatste versie van die browsers, omdat ik geen zin heb om rekening te houden met mensen die met zwaar verouderde browsers surfen. Dat is trouwens vragen om ellende, want updates van browsers hebben heel vaak met beveiligingsproblemen te maken. In de resoluties 1024x768, 1280x1024 en 1440x900 is ook in- en uitzoomen en een kleinere en grotere letter getest. Er is ingezoomd en vergroot tot zover de browser kan, maar niet verder dan tot 200%.

Eventuele problemen met betrekking tot zoomen en lettergrootte staan bij Bekende problemen.

Er is getest met behulp van muis en toetsenbord.

Naast deze 'gewone' browsers is ook getest in Lynx, WebbIE, NVDA en Fangs Screen Reader Emulator. Lynx is een browser die alleen tekst laat zien en geen css gebruikt. WebbIE is een browser die gericht is op mensen met een handicap. NVDA is een screenreader, zoals die door blinden wordt gebruikt. Fangs Screen Reader Emulator is een extensie bij Firefox, die de pagina laat zien zoals een screenreader hem ziet.

Als het voorbeeld in deze vier programma's toegankelijk is, zou het in principe toegankelijk moeten zijn in alle aangepaste browsers en dergelijke. En dus ook voor zoekmachines, want een zoekmachine is redelijk vergelijkbaar met een blinde.

Alleen op de hierboven genoemde systemen en browsers is getest. Er is dus niet getest op bijvoorbeeld mobiele systemen als iOS of Android, en ook niet op apparaten als smartphones, iPad, enz. De kans is heel erg groot dat dit voorbeeld niet (volledig) werkt op dat soort systemen en apparaten. Om het wel (volledig) werkend te krijgen, zul je vaak wijzigingen en/of aanvullingen moeten aanbrengen.

De html is gevalideerd met de validator van w3c, de css ook. Als om een of andere reden niet volledig gevalideerd kon worden, wordt dat bij Bekende problemen vermeld.

Nieuwe browsers test ik pas als ze uit het bèta-stadium zijn, omdat er anders 'n redelijke kans is dat ik 'n bug zit te omzeilen, die voor de uiteindelijke versie nog gerepareerd wordt. Dit voorbeeld is alleen getest in de hierboven met name genoemde browsers. Vragen over niet-geteste browsers kan ik niet beantwoorden, en het melden van fouten in niet-geteste browsers heeft ook geen enkel nut. (Melden van fouten, problemen, enz. in wel geteste browsers: graag!)

Wijzigingen

Alleen grotere wijzigingen worden hier vermeld, geen dingen als een link die is geüpdatet.

:

Nieuw opgenomen.

6 april 2011:

29 april 2011:

Voor elkaar gekregen bij alle radioknoppen de 'value' te vergeten. Niet gemerkt, omdat het hier om lay-out en toegankelijkheid gaat. Maar bij verzenden merk je dat gelijk, omdat de knoppen hierdoor onbruikbaar waren.

7 oktober 2011:

overflow: auto; toegevoegd aan de css voor textarea. Dit voorkomt een overbodige scrollbalk in Internet Explorer.

Bekende problemen

Alle browsers

Het formulier is uitgelijnd in twee kolommen. Bij zoomen en/of een andere lettergrootte ontstaan er (hele) kleine afwijkingen in de uitlijning.

Internet Explorer 6 en 7

Omdat Internet Explorer 6 en 7 geen outline kennen, wordt er geen kadertje getrokken rondom het veld dat focus heeft.

Firefox

Bij uitzoomen (verkleinen) valt het kadertje rondom de fieldset weg.

Opera en Internet Explorer 8

Bij uitzoomen (verkleinen) vallen sommige lijntjes rondom de fieldset weg.

Internet Explorer 6, 7 en 8

Als een checkbox bij de kleuren is gecheckt, krijgt deze een groene outline. Omdat Internet Explorer 6, 7 en 8 de pseudo-class :checked niet kennen, krijgen deze browsers niet zo'n outline.

In Internet Explorer 9 werkt dit wel.