28.8 Traiter les boutons radio

Lorsqu'un formulaire contient des boutons radio, tous les boutons qui partagent le même attribut name généreront au maximum un élément dans l'objet $request.

Ceci est logique puisque les boutons radio sont mutuellement exclusifs. On ne retiendra la valeur que de celui qui est sélectionné.

Attention : il est important de spécifier l'attribut value pour chacun des boutons radio. Si l'usager choisit un bouton qui n'a pas d'attribut value, l'objet $request contiendra la valeur 'on' pour cet élément du formulaire, ce qui n'est pas très utile.

Comment éviter le cas où aucun bouton radio n'est sélectionné

Dans le cas où aucun bouton n'est sélectionné, il n'y aura pas d'élément pour ce groupe de boutons dans l'objet $request, comme s'il n'avait pas fait partie du formulaire.

Si vous souhaitez éviter le cas où aucun bouton radio n'est sélectionné, vous avez différentes options :

• Préciser dans le formulaire HTML celui qui sera sélectionné par défaut. Comme il n'est pas possible de désélectionner un groupe de boutons radio, on sera assurés qu'un bouton est sélectionné.
  HTML

  <label class="form-check-label" for="facebook">

      <input class="form-check-input" type="radio" id="facebook" name="contact" value="facebook" checked>

      Facebook

  </label>

  <label class="form-check-label" for="courriel">

      <input class="form-check-input" type="radio" id="courriel" name="contact" value="courriel">

      Courriel

  </label>

  <label class="form-check-label" for="telephone">

      <input class="form-check-input" type="radio" id="telephone" name="contact" value="telephone">

      Téléphone

  </label>

  Attention : lorsque les règles de validation seront mises en place, il faudra ajuster notre code pour réafficher la valeur qui avait été sélectionnée avant qu'une erreur de validation ne force le réaffichage du formulaire. Nous y reviendrons.

• Ne rien sélectionner par défaut mais rendre la sélection d'un bouton radio obligatoire. Ceci sera fait à l'aide de l'attribut required placé sur au moins un des boutons du groupe. L'attribut s'appliquera à l'ensemble du groupe.
  HTML

  <label class="form-check-label" for="facebook">

      <input class="form-check-input" type="radio" id="facebook" name="contact" value="facebook" required>

      Facebook

  </label>

  <label class="form-check-label" for="courriel">

      <input class="form-check-input" type="radio" id="courriel" name="contact" value="courriel">

      Courriel

  </label>

  <label class="form-check-label" for="telephone">

      <input class="form-check-input" type="radio" id="telephone" name="contact" value="telephone">

      Téléphone

  </label>