Kader in een formulier plaatsen
Hieronder zie je twee formulieren, die wel wat op elkaar lijken. Beide formulieren zijn opgemaakt in een table die uit
twee kolommen bestaat.
In het formulier links zijn de twee groepen (kleur en accesoires) apart benoemd. Rechts staan ze elk in een kader, waarbij
de 'naam' onderdeel van het kader is.
| Het gaat op deze bladzijde om de kaders. Hier wordt besproken hoe je ze maakt. Opmerking: De knoppen Tonen staan er alleen voor de sier. Ze hebben geen functie. | |
- Er worden twee items besproken:
- De tags om de kaders mee te maken
- Omzeilen van de browser-afhankelijke eigenaardigheden
- Je maakt een kader met de tag <fieldset>....</fieldset>.
Direct na de openings-tag <fieldset> MOET een legenda komen:
<legend>....</legend>. Deze hoeft echter geen tekst te bevatten. - De structuur is dus:
<fieldset>
<legend>Legenda-tekst en tags</legend>
Tekst en tags die binnen het kader komen
</fieldset>
Zie ok de code onderaan deze bladzijde.
- Om zeker te zijn dat het kader en de legenda er in elke browser (ongeveer) hetzelfde uitzien, moet je zowel het kader
als de legenda apart opmaken met behulp van een style-attribuut (Een class uit een stylesheet kan natuurlijk
ook).
Het gaat hier met name om de randen. - Voor de randen kun je de style-attributen border: en padding: gebruiken. Het gebruik van deze attributen
is gelijk aan het opmaken van tabelranden. Zie het item Tabellen opmaken met style.
- Als je een formulier met een kader er in opneemt in een tabel, zoals op deze bladzijde, is het beter om ook de tabel zelf met style-attributen op te maken.
- Geef bij de LEGEND ook het style-atribuut color: op. Dan weet je zeker dat de legenda-tekst de gewenste kleur heeft. Niet alle browsers nemen de legenda-tekst goed over van de tekstkleur in de BODY.
De code ziet er als volgt uit:
(Code van de rechter table met het formulier er in; de kaders zijn gemaakt met de vetgedrukte tags)
<form name="Demo">
<table border="1" cellspacing="1" cellpadding="5" rules="none" frame="box">
<tr><td align="center" colspan="2" class="Kop2">Mijn ideale auto</td></tr>
<tr valign="top"><td>
<fieldset id="KaderL" style="border: 1px solid Navy; padding:4px">
<legend align="left" style="color:red">
<b>Kleur</b> </legend>
<input type="radio" name="Kleur" value="Rood" checked>Rood<br>
<input type="radio" name="Kleur" value="Groen">Groen<br>
<input type="radio" name="Kleur" value="Blauw">Blauw<br>
<input type="radio" name="Kleur" value="Geel">Geel<br>
<input type="radio" name="Kleur" value="Wit">Wit<br>
<input type="radio" name="Kleur" value="Anders">Andere kleur</fieldset>
</td><td>
<fieldset id="KaderR" style="border: 3px double Maroon; padding:4px">
<legend align="left" style="border: 1px solid Navy; padding:0px">
<b>Accessoires</b> </legend>
<input type="checkbox" name="acc" value="ABS" checked>ABS<br>
<input type="checkbox" name="acc" value="Trekhaak" checked>Trekhaak<br>
<input type="checkbox" name="acc" value="Radio/CD-speler">Radio/CD-speler<br>
<input type="checkbox" name="acc" value="Stuurbekrachtiging">Stuurbekrachtiging</fieldset>
</td></tr>
<tr><td align="center" colspan="2"><input type="button" name="DoeHet" value="Tonen" onclick="DoeIets()">
<input type="reset" name="NietDoen" value="Overnieuw">
</td></tr>
</table></form>
Opmerking:
Deze techniek wordt tot op heden erg weinig toegepast omdat veel browsers niet consequent met <fieldset> omgingen.
Tegenwoordig wordt deze tag ondersteund door alle grote browsers.
