Hoe keuzerondjes op een webpagina te valideren

Het instellen en valideren van keuzerondjes lijkt het formulierveld te zijn dat veel webmasters de meeste problemen geeft bij het instellen. In feite is de instelling van deze velden de meest eenvoudige van alle formuliervelden om te valideren, aangezien keuzerondjes één waarde instellen die alleen hoeft te worden getest wanneer het formulier wordt verzonden.

Het probleem met keuzerondjes is dat er ten minste twee en meestal meer velden op het formulier moeten worden geplaatst, aan elkaar gerelateerd en als één groep moeten worden getest. Op voorwaarde dat u de juiste naamgevingsconventies en lay-out voor uw knoppen gebruikt, zult u geen problemen ondervinden.

Stel de keuzerondjesgroep in

Het eerste waar we naar moeten kijken bij het gebruik van keuzerondjes op ons formulier, is hoe de knoppen moeten worden gecodeerd om goed te kunnen functioneren als keuzerondjes. Het gewenste gedrag dat we willen is om slechts één knop tegelijk te selecteren; wanneer één knop is geselecteerd, wordt elke eerder geselecteerde knop automatisch gedeselecteerd.

De oplossing hier is om alle keuzerondjes binnen de groep dezelfde naam maar verschillende waarden te geven. Hier is de code die wordt gebruikt voor het keuzerondje zelf.

Het maken van meerdere groepen keuzerondjes voor één formulier is ook eenvoudig. Het enige dat u hoeft te doen, is de tweede groep keuzerondjes een andere naam te geven dan die voor de eerste groep.

Het naamveld bepaalt tot welke groep een bepaalde knop behoort. De waarde die wordt doorgegeven voor een specifieke groep wanneer het formulier wordt verzonden, is de waarde van de knop binnen de groep die is geselecteerd op het moment dat het formulier wordt verzonden.

Beschrijf elke knop

Om de persoon die het formulier invult te laten begrijpen wat elk keuzerondje in onze groep doet, moeten we beschrijvingen voor elke knop opgeven. De eenvoudigste manier om dit te doen is om een ​​beschrijving als tekst te geven direct na de knop.

Er zijn echter een paar problemen met het gebruik van gewone tekst:

1. De tekst kan visueel worden geassocieerd met het keuzerondje, maar het is misschien niet duidelijk voor sommigen die bijvoorbeeld schermlezers gebruiken. 
2. In de meeste gebruikersinterfaces met behulp van keuzerondjes, is de tekst die aan de knop is gekoppeld klikbaar en kan het bijbehorende keuzerondje worden geselecteerd. In ons geval hier zal de tekst niet op deze manier werken tenzij de tekst specifiek aan de knop is gekoppeld.

Tekst koppelen aan een keuzerondje

Om de tekst aan het bijbehorende keuzerondje te koppelen, zodat klikken op de tekst die knop selecteert, moeten we de code voor elke knop verder toevoegen door de hele knop en de bijbehorende tekst binnen een label te omringen.

Dit is hoe de complete HTML voor een van de knoppen eruit zou zien:

 knop een

Als het keuzerondje met de id-naam waarnaar wordt verwezen in de voor parameter van het label tag is eigenlijk opgenomen in de tag zelf, de voor en ID kaart parameters zijn overbodig in sommige browsers. Hun browsers zijn echter vaak niet slim genoeg om het nestelen te herkennen, dus het is de moeite waard om ze in te voeren om het aantal browsers te maximaliseren waarin de code zal werken.

Dat voltooit de codering van de radioknoppen zelf. De laatste stap is het instellen van de validatie van het keuzerondje met behulp van JavaScript.