Opbouw Formulier: checkbox/algemene label?
Nu heb ik hierover veel gelezen op internet en ik heb besloten dat dit mijn standaard opmaak van HTML-tags word
Voorbeeld 1:
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
<form>
<fieldset>
<legend>Formulier</legend>
<div>
<label for="input">Vul uw e-mail adres in.</label>
<input type="text" name="email" id="input" />
</div>
</fieldset>
</form>
<fieldset>
<legend>Formulier</legend>
<div>
<label for="input">Vul uw e-mail adres in.</label>
<input type="text" name="email" id="input" />
</div>
</fieldset>
</form>
Dit lukt me allemaal wel.
Maar nu wil je ook wel eens een set Checkboxjes gebruiken. Na een checkbox wil ik een label doen
Voorbeeld 2:
Code (php)
1
2
2
<input type="checkbox" id="check1" ... /><label for="check1">Nummer #1</label>
<input type="checkbox" id="check2" ... /><label for="check2">Nummer #2</label>
<input type="checkbox" id="check2" ... /><label for="check2">Nummer #2</label>
Nu staan deze labels aangesloten met de juiste checkboxen. Maar als ik bijvoorbeeld eerst een "vraag" wil stellen, zoals bij voorbeeld 1 'Vul uw e-mail adres in.', hoe link ik deze dan met alle checkboxen? Want een screenreader moet ook de link leggen tussen de "vraag" en de checkboxen.
Onderstaande kan in ieder geval niet, want dan zou je de algemene label 'Click de checkboxen.' koppelen aan één checkbox, terwijl deze aan een rij checkboxen gekoppeld moet worden.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
<form>
<fieldset>
<legend>Formulier</legend>
<div>
<label>Click de checkboxen.</label>
<input type="checkbox" id="check1" ... /><label for="check1">Nummer #1</label>
<input type="checkbox" id="check2" ... /><label for="check2">Nummer #2</label>
</div>
</fieldset>
</form>
<fieldset>
<legend>Formulier</legend>
<div>
<label>Click de checkboxen.</label>
<input type="checkbox" id="check1" ... /><label for="check1">Nummer #1</label>
<input type="checkbox" id="check2" ... /><label for="check2">Nummer #2</label>
</div>
</fieldset>
</form>
Wat is hier een goede oplossing voor? Een fieldset in de fieldset, waarbij de legend de "vraag" is?
Ik hoop dat mijn vraag een beetje duidelijk is.
Alvast bedankt voor het antwoord,
Mark L.
Gewijzigd op 13/07/2010 19:37:40 door Mark L
Code (php)
1
<label><input type="checkbox" name="check1" ... /> Beschrijving 1</label>
Nu weet ik hoe ik de link leg tussen één checkbox en één stukje tekst. Maar nu wil ik dus één tekst hebben die een connectie heeft met een groep checkboxen. Zoiets bijvoorbeeld:
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
Welk van het onderstaande kleuren vind je mooi?
[ ] Rood
[ ] Oranje
[x] Geel
[ ] Bruin
[x] Blauw
[x] Groen
[ ] Paars
[ ] Roze
[ ] Rood
[ ] Oranje
[x] Geel
[ ] Bruin
[x] Blauw
[x] Groen
[ ] Paars
[ ] Roze
Hoe kan ik dan zorgen dat de checkboxen van toepassing zijn op de tekst 'Welk van het onderstaande kleuren vind je mooi?', zodat dit door screenreaders (en andere software) begrepen word.
Edit:
De software moet dus begrijpen dat de vraag bij die mogelijke antwoorden hoort.
Gewijzigd op 13/07/2010 21:55:55 door Mark L
Maar als er software mee moet kunnen werken, zou ik eerst eens kijken wat die software precies ondersteund. Dus hoe de software wil dat jij het maakt.
Nu had ik nog een laatste vraag:
Soms heb je ook wel eens meerdere input-velden naast elkaar nodig.
Voorbeeld:
Code (php)
1
Naam: [voornaam][tussenvoegsel][achternaam]
Nu is dit dus niet via een label te regelen, omdat een label maar voor één element gebruikt kan worden en we hebben er hier 3.
Nu denk ik automatisch - met de kennis over de checkboxen - dan gebruiken we hier ook een fieldset voor.
Het probleem is echter dat het stylen van een fieldset (met een legend) moeilijk is in Internet Explorer (het zal eens niet). Maar ik ben bang dat ik dit maar voor lief moet nemen (en misschien kom ik nog wel een manier tegen waardoor je ook in IE een element NAAST een legend kan zetten.)
@ Iedereen bedankt voor het meedenken,
Hier kan ik wat mee :)
Mark L.