Het element <input type="radio">

Waarde

Het value-attribuut is een tekenreeks die de waarde van de radioknop bevat. De waarde wordt nooit aan de gebruiker getoond door de user agent. In plaats daarvan wordt deze gebruikt om te bepalen welke radioknop in een groep geselecteerd is.

Een radiogroep definiëren

Een radiogroep wordt gedefinieerd door elk van de radioknoppen in de groep dezelfde name te geven. Zodra een radiogroep is vastgesteld, wordt het selecteren van een radioknop in die groep automatisch elke momenteel geselecteerde radioknop in dezelfde groep gedeselecteerd.

Je kunt zoveel radiogroepen op een pagina hebben als je wilt, zolang elke groep zijn eigen unieke name heeft.

Als je formulier bijvoorbeeld de gebruiker moet vragen naar de gewenste contactmethode, zou je drie radioknoppen kunnen maken, elk met de name-eigenschap ingesteld op contact, maar één met de waarde email, één met de waarde phone en één met de waarde mail. De gebruiker ziet nooit de value of de name (tenzij je expliciet code toevoegt om deze weer te geven).

De resulterende HTML ziet er als volgt uit:

<form>
  <fieldset>
    <legend>Please select your preferred contact method:</legend>
    <div>
      <input type="radio" id="contactChoice1" name="contact" value="email" />
      <label for="contactChoice1">Email</label>

      <input type="radio" id="contactChoice2" name="contact" value="phone" />
      <label for="contactChoice2">Phone</label>

      <input type="radio" id="contactChoice3" name="contact" value="mail" />
      <label for="contactChoice3">Mail</label>
    </div>
    <div>
      <button type="submit">Submit</button>
    </div>
  </fieldset>
</form>

Hier zie je de drie radioknoppen, elk met de name ingesteld op contact en elk met een unieke value die die specifieke radioknop binnen de groep uniek identificeert. Ze hebben ook elk een unieke id, die wordt gebruikt door het for-attribuut van het <label>-element om de labels aan de radioknoppen te koppelen.

Je kunt dit voorbeeld hier uitproberen:

Datarepresentatie van een radiogroep

Wanneer het bovenstaande formulier wordt verzonden met een geselecteerde radioknop, bevat de data van het formulier een item in de vorm contact=waarde. Als de gebruiker bijvoorbeeld op de radioknop "Phone" klikt en het formulier verzendt, bevat de data van het formulier de regel contact=phone.

Als je het value-attribuut weglaat in de HTML, kent de verzonden formulierdata de waarde on toe aan de groep. In dit scenario zou, als de gebruiker op de optie "Phone" klikte en het formulier verzond, de resulterende formulierdata contact=on zijn, wat niet nuttig is. Vergeet dus niet je value-attributen in te stellen!

Het is vrij ongebruikelijk om daadwerkelijk te willen toestaan dat het formulier wordt verzonden zonder dat een van de radioknoppen in een groep is geselecteerd, dus is het meestal verstandig om er standaard één op de checked-status te laten staan. Zie Een radioknop standaard selecteren hieronder.

Laten we wat code toevoegen aan ons voorbeeld, zodat we de door dit formulier gegenereerde data kunnen bekijken. De HTML is aangepast om een <pre>-blok toe te voegen waarin de formulierdata wordt uitgevoerd:

<form>
  <fieldset>
    <legend>Please select your preferred contact method:</legend>
    <div>
      <input type="radio" id="contactChoice1" name="contact" value="email" />
      <label for="contactChoice1">Email</label>
      <input type="radio" id="contactChoice2" name="contact" value="phone" />
      <label for="contactChoice2">Phone</label>
      <input type="radio" id="contactChoice3" name="contact" value="mail" />
      <label for="contactChoice3">Mail</label>
    </div>
    <div>
      <button type="submit">Submit</button>
    </div>
  </fieldset>
</form>
<pre id="log"></pre>

Vervolgens voegen we wat JavaScript toe om een event listener in te stellen voor de gebeurtenis submit, die wordt verzonden wanneer de gebruiker op de knop "Submit" klikt:

const form = document.querySelector("form");
const log = document.querySelector("#log");

form.addEventListener("submit", (event) => {
  const data = new FormData(form);
  let output = "";
  for (const entry of data) {
    output = `${output}${entry[0]}=${entry[1]}\r`;
  }
  log.innerText = output;
  event.preventDefault();
});

Probeer dit voorbeeld uit en kijk hoe er nooit meer dan één resultaat is voor de groep contact.

Aanvullende attributen

Naast de gemeenschappelijke attributen die door alle <input>-elementen worden gedeeld, ondersteunen radio-inputs de volgende attributen.

Radio-inputs gebruiken

We hebben de basisprincipes van radioknoppen hierboven al behandeld. Laten we nu kijken naar andere veelvoorkomende functies en technieken met betrekking tot radioknoppen die je moet kennen.

Een radioknop standaard selecteren

Om een radioknop standaard geselecteerd te maken, voeg je het checked-attribuut toe, zoals te zien is in deze aangepaste versie van het vorige voorbeeld:

<form>
  <fieldset>
    <legend>Please select your preferred contact method:</legend>
    <div>
      <input
        type="radio"
        id="contactChoice1"
        name="contact"
        value="email"
        checked />
      <label for="contactChoice1">Email</label>

      <input type="radio" id="contactChoice2" name="contact" value="phone" />
      <label for="contactChoice2">Phone</label>

      <input type="radio" id="contactChoice3" name="contact" value="mail" />
      <label for="contactChoice3">Mail</label>
    </div>
    <div>
      <button type="submit">Submit</button>
    </div>
  </fieldset>
</form>

In dit geval is de eerste radioknop nu standaard geselecteerd.

Een groter klikgebied bieden voor je radioknoppen

In de bovenstaande voorbeelden heb je misschien gemerkt dat je een radioknop kunt selecteren door te klikken op het bijbehorende <label>-element, evenals op de radioknop zelf. Dit is een erg nuttige functie van HTML-formulierlabels waardoor het voor gebruikers makkelijker wordt om de gewenste optie aan te klikken, vooral op apparaten met een klein scherm zoals smartphones.

Naast toegankelijkheid is dit nog een goede reden om <label>-elementen correct in te stellen in je formulieren.

Validatie

In het geval van een radioknop met het required-attribuut ingesteld, of een gelijknamige groep radioknoppen waarin ten minste één lid required heeft ingesteld, moet er een radioknop geselecteerd zijn om het besturingselement als geldig te beschouwen. Als er geen radioknop aangevinkt is, retourneert de eigenschap valueMissing van een ValidityState-object true tijdens validatie, en zal de browser de gebruiker vragen een optie te selecteren.

Radio-inputs stylen

Het volgende voorbeeld toont een iets uitgebreidere versie van het voorbeeld dat we in dit artikel hebben gezien, met wat extra styling en met betere semantiek, tot stand gebracht door het gebruik van gespecialiseerde elementen. De HTML ziet er als volgt uit:

<form>
  <fieldset>
    <legend>Please select your preferred contact method:</legend>
    <div>
      <input
        type="radio"
        id="contactChoice1"
        name="contact"
        value="email"
        checked />
      <label for="contactChoice1">Email</label>

      <input type="radio" id="contactChoice2" name="contact" value="phone" />
      <label for="contactChoice2">Phone</label>

      <input type="radio" id="contactChoice3" name="contact" value="mail" />
      <label for="contactChoice3">Mail</label>
    </div>
    <div>
      <button type="submit">Submit</button>
    </div>
  </fieldset>
</form>

De CSS in dit voorbeeld is iets omvangrijker:

html {
  font-family: sans-serif;
}

div:first-of-type {
  display: flex;
  align-items: flex-start;
  margin-bottom: 5px;
}

label {
  margin-right: 15px;
  line-height: 32px;
}

input {
  appearance: none;

  border-radius: 50%;
  width: 16px;
  height: 16px;

  border: 2px solid #999999;
  transition: 0.2s all linear;
  margin-right: 5px;

  position: relative;
  top: 4px;
}

input:checked {
  border: 6px solid black;
}

button,
legend {
  color: white;
  background-color: black;
  padding: 5px 10px;
  border-radius: 0;
  border: 0;
  font-size: 14px;
}

button:hover,
button:focus {
  color: #999999;
}

button:active {
  background-color: white;
  color: black;
  outline: 1px solid black;
}

Het meest opvallend hier is het gebruik van de eigenschap appearance (met voorvoegsels die nodig zijn om bepaalde browsers te ondersteunen). Standaard worden radioknoppen (en checkboxes) gestyled met de systeemeigen stijlen van het besturingssysteem voor die besturingselementen. Door appearance: none op te geven, kun je de systeemeigen styling volledig verwijderen en je eigen stijlen ervoor maken. Hier hebben we een border gebruikt, samen met border-radius en een transition, om een mooie geanimeerde radioselectie te maken. Let ook op hoe de pseudo-klasse :checked wordt gebruikt om de stijlen voor de weergave van de radioknop bij selectie te specificeren.

Merk op dat er bij het klikken op een radioknop een mooi, vloeiend uitdoof-/opkomeffect optreedt terwijl de twee knoppen van status veranderen. Daarnaast zijn de stijl en kleurstelling van de legenda en de verzendknop aangepast om een sterk contrast te hebben. Dit is misschien geen uiterlijk dat je in een echte webtoepassing zou willen, maar het laat wel duidelijk de mogelijkheden zien.

Technische samenvatting

Zie ook

• <input>