Hur man validerar radioknappar på en webbsida

Installation och validering av radioknappar verkar vara det formulärfält som ger många webbansvariga de svåraste att installera. I själva verket är installationen av dessa fält den enklaste av alla formulärfält att validera som radioknappar ställer ett värde som bara behöver testas när formuläret skickas in.

Svårigheten med radioknapparna är att det finns minst två och vanligtvis fler fält som måste placeras på formuläret, relaterade tillsammans och testas som en grupp. Förutsatt att du använder rätt namnkonventioner och layout för dina knappar kommer du inte att ha några problem.

Ställ in radioknappgruppen

Det första man ska titta på när man använder radioknappar i vårt formulär är hur knapparna måste kodas för att de ska fungera som radioknappar. Det önskade beteendet vi vill ha är att endast en knapp väljs åt gången; när en knapp väljs kommer alla tidigare valda knappar att avmarkeras automatiskt.

Lösningen här är att ge alla radioknappar inom gruppen samma namn men olika värden. Här är koden som används för själva radioknappen.

Skapandet av flera grupper av radioknappar för den ena formen är också enkelt. Allt du behöver göra är att förse den andra gruppen med radioknappar med ett annat namn än det som användes för den första gruppen.

Namnfältet avgör vilken grupp som en viss knapp tillhör. Värdet som kommer att skickas för en specifik grupp när formuläret skickas in är värdet på knappen inom gruppen som väljs vid tidpunkten då formuläret skickas in.

Beskriv varje knapp

För att personen som fyller i formuläret ska förstå vad varje radioknapp i vår grupp gör, måste vi ange beskrivningar för varje knapp. Det enklaste sättet att göra detta är att tillhandahålla en beskrivning som text direkt efter knappen.

Det finns ett par problem med att bara använda vanlig text:

1. Texten kan vara visuellt associerad med alternativknappen, men det kanske inte är klart för vissa som till exempel använder skärmläsare. 
2. I de flesta användargränssnitt med radioknappar är texten associerad med knappen klickbar och kan välja den associerade alternativknappen. I vårt fall här kommer texten inte att fungera på detta sätt om inte texten är specifikt associerad med knappen.

Associera text med en radioknapp

För att associera texten med motsvarande alternativknapp så att genom att klicka på texten kommer att välja den knappen måste vi göra ytterligare ett tillägg till koden för varje knapp genom att omge hela knappen och dess tillhörande text i en etikett.

Så här ser HTML-kod för en av knapparna ut:

 knapp en

Som radioknapp med ID-namnet som anges i för parametern för etiketttaggen finns faktiskt i själva taggen, för och id parametrar är överflödiga i vissa webbläsare. Deras webbläsare är dock ofta inte tillräckligt smarta för att känna igen boet, så det är värt att lägga in dem för att maximera antalet webbläsare där koden kommer att fungera.

Det slutför kodningen av själva radioknapparna. Det sista steget är att ställa in validering av alternativknappen med JavaScript.