Keuzerondje
Home

Keuzerondje

Keuzerondje

Met keuzerondjes kunnen gebruikers slechts één optie uit een aantal mogelijkheden kiezen.

HTML

input

HTML attributen

type="radio"

Met keuzerondjes kunnen gebruikers slechts één optie uit een aantal mogelijkheden kiezen.

name

Dit attribuut wordt met de waarde van de optie die de gebruiker selecteert naar de server verzonden.

Wanneer de gebruiker opties in de vorm van keuzerondjes heeft dan moet de waarde van het attribuut name dezelfde zijn voor alle keuzerondjes die voor een vraag gebruikt worden. Je kan dus keuzen groeperen. Als verschillende keuzerondjes dezelfde name attribuut hebben worden ze als één vraag beschouwd.

value

Het attribuut value geeft de waarde die voor de geselecteerde optie naar de server wordt verzonden. De value van elk van de keuzerondjes in een groep moet verschillend zijn zodat de server weet welke keuze de gebruiker heeft geselecteerd.

checked

Het attribuut checked gebruik je om aan te geven welke waarde van de keuzenrondjes met dezelfde naam geselecteerd moet zijn wanneer de pagina laadt. De waarde van dit attribuut is checked. Slechts één keuzerondje in een groep mag dit attribuut gebruiken.

Let op: zodra een keuzerondje geselecteerd is kan het niet worden gedeselecteerd. De gebruiker kan dan alleen een andere optie selecteren. Je kan er altijd een optie bijzetten 'geen' of 'ik weet het niet'.

Voorbeeld

Code

<div>
    <input type="radio" name="sex" value="man" id="male">
    <label for="male">Man</label>
    <input type="radio" name="sex" value="vrouw" id="female">
    <label for="female">Vrouw</label>
    <input type="radio" name="sex" value="noch man noch vrouw" id="unknown">
    <label for="unknown">Onbekend</label>
</div>

Resultaat:

input radio
input radio

Open onderstaand voorbeeld in CodePen en klik op de submit knop om na te gaan welke waarde er naar de server wordt gestuurd.

JI
2016-11-13 15:57:03