:checked :disabled en pseudos voor formulierstatussen
Geef formulierelementen vorm op basis van hun interactieve status, zoals checked, disabled en required.
:checked :disabled en pseudos voor formulierstatussen is een gratis CSS Academy-les op CoddyKit. Dit is les 4 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject CSS Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus CSS Academy bevat in totaal 4 lessen.
Overzicht van pseudoklassen voor formulierstatussen
CSS biedt pseudoklassen die de statussen van HTML-formulierelementen weerspiegelen. Hiermee kun je formulierbesturingselementen zonder JavaScript volledig met CSS opmaken.
:checked
:checked wordt toegepast op selectievakjes en keuzerondjes wanneer ze zijn geselecteerd, en op <option>-elementen binnen selectielijsten wanneer ze zijn gekozen.
<input type="checkbox" id="c1" checked /><label for="c1">Checked (bold blue)</label><br/><input type="checkbox" id="c2" /><label for="c2">Unchecked</label>
:checked voor aangepaste selectievakjes
De :checked-truc: verberg het ingebouwde invoerveld en maak een aangepast vakje op met de selector voor een aangrenzend element, geactiveerd door :checked:
<label><input type="checkbox" checked /><span class="checkbox-box"></span> Custom checkbox (checked)</label>
:disabled en :enabled
:disabled selecteert formulierelementen met het attribuut disabled. :enabled selecteert elementen waarmee interactie mogelijk is.
<input type="text" value="Disabled input" disabled />
<button>Enabled button</button>
:required en :optional
:required selecteert invoervelden met het attribuut required. :optional selecteert invoervelden zonder dit attribuut.
<input type="text" placeholder="Required field" required />
<input type="text" placeholder="Optional field" />
:valid en :invalid
:valid en :invalid weerspiegelen de ingebouwde formulierstatus voor validatie van de browser, op basis van type, pattern, min/max en required-beperkingen.
<input type="email" value="not-an-email" />
<input type="email" value="valid@example.com" />
:user-valid en :user-invalid
De browser voert validatie onmiddellijk uit bij het laden van de pagina, zelfs voordat de gebruiker interactie heeft gehad. :user-valid en :user-invalid worden pas toegepast nadat de gebruiker met het veld heeft geïnterageerd — dat zorgt voor een veel betere gebruikerservaring.
<input type="email" value="not-an-email" required />
:placeholder-shown
:placeholder-shown wordt toegepast wanneer een invoerveld de tijdelijke aanduidingstekst weergeeft — het veld is dan momenteel leeg. Gebruik deze pseudoklasse om lege invoervelden zonder JavaScript te detecteren.
<input type="text" placeholder="Type your name" />
<span class="input-label">Floats when empty</span>
:read-only en :read-write
:read-only selecteert invoervelden met het attribuut readonly. :read-write selecteert bewerkbare invoervelden.
<input type="text" value="Read-only field" readonly />
:indeterminate
:indeterminate wordt toegepast op selectievakjes met een tussenstatus (niet geselecteerd en ook niet gedeselecteerd — ingesteld via JavaScript), en op keuzerondjes wanneer er geen selectie in de groep is gemaakt.
<input type="checkbox" id="ind1" />
<script>document.getElementById('ind1').indeterminate = true;</script>
:in-range en :out-of-range
Bij invoervelden met type="number" of type="range" en min/max weerspiegelen :in-range en :out-of-range de geldigheid van de huidige waarde ten opzichte van deze grenzen.
<input type="number" min="1" max="10" value="15" />
Korte controle
Welke pseudoklasse past formulierstijlen voor validatie pas toe nadat de gebruiker met een invoerveld heeft geïnterageerd?
Samenvatting
De pseudoklassen voor formulierstatussen in CSS weerspiegelen ingebouwde validatie en interactiestatussen van formulieren zonder JavaScript: :checked, :disabled, :required, :valid, :invalid en meer. Gebruik bij voorkeur :user-invalid in plaats van :invalid voor een betere gebruikerservaring. Gebruik :placeholder-shown om lege velden te detecteren.
Leer CSS met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 40
- Lessen
- 159
Veelgestelde vragen
Is de les “:checked :disabled en pseudos voor formulierstatussen” gratis?
Ja — de volledige tekst van “:checked :disabled en pseudos voor formulierstatussen” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus CSS Academy wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus CSS Academy bevat in totaal 4 lessen.
Wat leer ik in “:checked :disabled en pseudos voor formulierstatussen”?
Geef formulierelementen vorm op basis van hun interactieve status, zoals checked, disabled en required. Je oefent met CSS Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met CSS Academy te beginnen?
Ervaring vooraf is niet nodig. CSS Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 4 van 4.
Hoe lang duurt de les “:checked :disabled en pseudos voor formulierstatussen”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over CSS Academy?
Ja. Elke les over CSS Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- :hover :focus :active en :visited
- :nth-child en :nth-of-type
- :not() :is() en :where()
- :checked :disabled en pseudos voor formulierstatussen