Bouton radio dans HTML 4 et 5

Une liste d'options peut être représentée dans un formulaire par des boutons radio, un groupe de cases à cocher de forme rondes.
Il n'y a pas de différence entre la version 4 et 5 de HTML quand à cet objet de formulaire.

Pour créer un groupe de boutons radio, on assigne le même nom à l'attribut name de toutes les boutons faisant partie du groupe.
L'attribut checked à un état "vrai" quand un des boutons est coché ou quand le mot clé checked sans valeur est inséré dans le code source.

L'évènement change est reconnu pour un bouton radio et peut être utilisé en JavaScript pour connaître son état.

Exemple de code du groupe de boutons radios "x":

<input type="radio" name="x" value="" checked > 
<input type="radio" name="x" value="" >

Comment passer la valeur de formulaire d'un bouton radio

Le contenu de l'attribut value est passé avec les données de formulaire uniquement quand la case est cochée ou que la balise à l'attribut checked prédéfini et que l'utilisateur ne modifie pas sont état.

Quand l'utilisateur coche sur une autre case, l'attribut checked est dynamiquement attribué à cette autre case.

Exemple de groupe de boutons radio inclus dans un formulaire avec un bouton d'envoi:

<form name="form1" method="post" action="script.php">
  <input type="radio" name="x" value="un" checked > 
  <input type="radio" name="x" value="deux" >
  <input type="submit" value="Envoyer">
</form>

La navigateur se charge de récupérer et transmettre les données automatiquement quand on clique sur ce bouton d'envoi.

Comment récupérer l'état d'un bouton radio parmi les valeurs de formulaire

On assigne une valeur à l'attribut value de sorte qu'elle soit est associée au nom du groupe radio dans les données de formulaire lors de l'envoi.

Si on assigne par exemple à la première case à cocher la valeur "un", on enverra parmi les données de formulaire:

x="un"

Dans un script PHP, la valeur se retrouvera dans le tableau $_POST:

$x = $_POST['x'];

$x aura la valeur "un".

Pour récupérer les valeurs dans une page HTML, sans script coté serveur, c'est plus compliqué. Voir comment passer des données à une page Web.

Comment savoir quel bouton radio est coché dans la page

Si l'on veut passer les valeurs de formulaire à un script sur le serveur de façon asynchrone grâce à Ajax, il faut pouvoir les lire d'abord dans la page.

Dans le cas d'un groupe de boutons radio, le code suivant permet de déterminer quelle case est cochée.

Code HTML

<form name="form1">
Apple <input type="radio" name="fruit" checked value="apple" >
Orange <input type="radio" name="fruit" value="orange" >
Apricot <input type="radio" name="fruit" value="apricot" >
</form>

<input type="button" onclick="whichFruit()" value="Choisir un fruit">

La dernière ligne permet d'utiliser les données directement dans la page, la fonction ci-dessous sera appelée quand on clique sur le bouton.

Code JavaScript

function wichFruit()
{
  var element = document.form1.fruit;
  for (var i=0; i < element.length; i++)
  {
    if (element[i].checked)
    {
      var fruit = element[i].value;
      break;
    }
  }
}

Code Ajax

Pour utiliser les données dans un script sur le serveur, le bouton va appeler une fonction (en l'occurence ajaxFun) pour récupérer les données dans la page et les passer au serveur grâce à Ajax. 

<input type="button" onclick="ajaxFun()" value="Envoyer">

Au lieu d'envoyer le formulaire avec un bouton submit, un clic sur le bouton appelle le script JavaScript, qui détermine quelle case est cochée grâce à la fonction whichFruit() précédente, puis construit un paramètre pour la fonction Ajax. 


function ajaxFun()
{
  var data = "fruit=" + whichFruit();
  AAWrite("script.php", data, unefonction);
}

La fonction AAWrite (du framework Anaa) exécute le script sur le serveur.

Démonstration

Apple Orange Apricot

Plus d'information

© 2011 Xul.fr