Attributen
Dit element bevat de globale attributen.
disabled | Als dit Booleaanse attribuut is ingesteld, worden alle formulierbesturingselementen die afstammelingen zijn van de <fieldset> uitgeschakeld, wat betekent dat ze niet bewerkbaar zijn en niet worden meegestuurd bij het versturen van het <form>. Ze ontvangen geen enkele browse-gebeurtenis, zoals muisklikken of focusgerelateerde gebeurtenissen. Standaard geven browsers zulke besturingselementen grijs weer. Merk op dat formulierelementen binnen het <legend>-element niet worden uitgeschakeld. |
|---|---|
form | Dit attribuut neemt de waarde over van het id-attribuut van een <form>-element waar je de <fieldset> deel van wilt laten uitmaken, ook als het zich niet binnen het formulier bevindt. Let op dat het gebruik hiervan verwarrend is — als je wilt dat de <input>-elementen binnen de <fieldset> geassocieerd worden met het formulier, moet je het form-attribuut rechtstreeks op die elementen gebruiken. Je kunt via JavaScript controleren welke elementen met een formulier zijn geassocieerd, met behulp van HTMLFormElement.elements. |
name |
De naam die aan de groep is gekoppeld. Opmerking
Het onderschrift voor de fieldset wordt bepaald door het eerste |
Styling met CSS
Er zijn verschillende speciale stylingoverwegingen voor <fieldset>.
De display-waarde is standaard block, en het element vormt een block formatting context. Als de <fieldset> gestyled is met een inline-niveau display-waarde, gedraagt het zich als inline-block, anders gedraagt het zich als block. Standaard is er een 2px groove-rand rondom de inhoud, en een kleine hoeveelheid standaard-padding. Het element heeft standaard min-inline-size: min-content.
Als er een <legend> aanwezig is, wordt deze over de block-start-rand geplaatst. De <legend> past zich strak aan de inhoud aan (shrink-wrapt), en vormt ook een formatting context. De display-waarde wordt geblokifieerd. (Bijvoorbeeld, display: inline gedraagt zich als block.)
Er is een anonieme box die de inhoud van de <fieldset> bevat, die bepaalde eigenschappen van de <fieldset> overerft. Als de <fieldset> gestyled is met display: grid of display: inline-grid, dan is de anonieme box een grid formatting context. Als de <fieldset> gestyled is met display: flex of display: inline-flex, dan is de anonieme box een flex formatting context. Anders vormt het een block formatting context.
Je kunt de <fieldset> en <legend> naar wens stylen om aan te sluiten bij het ontwerp van je pagina.
Voorbeelden
Eenvoudige fieldset
Dit voorbeeld bevat een <fieldset> met een <legend>, met daarbinnen één besturingselement.
<form action="#">
<fieldset>
<legend>Do you agree?</legend>
<input type="checkbox" id="chbx" name="agree" value="Yes!" />
<label for="chbx">I agree</label>
</fieldset>
</form>Resultaat
Uitgeschakelde fieldset
Dit voorbeeld toont een uitgeschakelde <fieldset> met daarin twee besturingselementen. Merk op hoe beide besturingselementen zijn uitgeschakeld doordat ze zich binnen een uitgeschakelde <fieldset> bevinden.
<form action="#">
<fieldset disabled>
<legend>Disabled login fieldset</legend>
<div>
<label for="name">Name: </label>
<input type="text" id="name" value="Chris" />
</div>
<div>
<label for="pwd">Archetype: </label>
<input type="password" id="pwd" value="Wookie" />
</div>
</fieldset>
</form>Resultaat
Technische samenvatting
| Inhoudscategorieën | Flow-inhoud, sectioning root, listed, form-associated element, palpabele inhoud. |
|---|---|
| Toegestane inhoud |
Een optioneel <legend>-element, gevolgd door
flow-inhoud.
|
| Weglaten van tags | Geen, zowel de begin- als de eindtag zijn verplicht. |
| Toegestane ouders | Elk element dat flow-inhoud accepteert. |
| Impliciete ARIA-rol | group |
| Toegestane ARIA-rollen |
radiogroup,
presentation, none
|
| DOM-interface | HTMLFieldSetElement |