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:
Open onderstaand voorbeeld in CodePen en klik op de submit knop om na te gaan welke waarde er naar de server wordt gestuurd.