Génération du site web de l'ULB - format xml

index

page précédente

page suivante

imprimer

envoyer

marquer

<input type="radio">: zone de saisie avec des boutons de type radio

Un ensemble de boutons du type "radio" se définit à l'aide d'un élément <input type="radio"> contenant plusieurs éléments <option>. Ces derniers vont définir des boutons radio qui pourront être cochés par l'utilisateur.

Un seul bouton peut être coché à la fois (si vous en cochez un, celui qui était précédemment coché est décoché).

Exemple de boutons radios

Code de cet exemple

<input type="radio" cols="1">
   <nom>langue</nom>
   <libellé>Quelle est votre langue marternelle ?</libellé>
   <option valeur="fr">Français</option>
   <option valeur="nl">Néerlandais</option>
   <option valeur="en">Anglais</option>
   <option valeur="other">Autre</option>
</input>

Contenu de l'élément <input type="radio">

L'élément <input type="radio"> peut posséder les sous-éléments suivants (ils ne sont pas obligatoires):

<nom>	donne le nom du paramètre à envoyer avec les données du formulaire ou à utiliser dans le reste de la page (ce nom sera utilisé pour toutes les options, mais vous pouvez le remplacer par un nom individuel, propre à chaque option).
<libellé>	donne le libellé à afficher dans le formulaire (visible par l'utilisateur, mais qui ne sera pas envoyé avec les données du formulaire)
<option>	un ou plusieurs éléments qui créent les boutons radios, parmi lesquels l'utilisateur devra faire un choix La syntaxe de ces éléments <option> dans un ensemble de boutons radio est la même que celle utilisée dans des listes déroulantes ou des cases à cocher.
<valeur>	sélectionne le bouton radio à cocher par défaut. Une autre façon de procéder est de placer un attribut sélectionnée="oui" ou cochée="oui" sur l'élément <option> concerné
<p>	permet d'ajouter un commentaire en dessous des boutons radios
<obligatoire/>	impose à l'utilisateur de faire un choix parmi les boutons radios

Ces sous-éléments peuvent être complétés par tous les éléments communs aux blocs, une question dans un formulaire étant considérée comme un bloc. Ceux-ci permettent de mettre en page la zone de boutons radio.

L'élément <input type="radio"> peut posséder les attributs suivants (ils ne sont pas obligatoires):

envoyer="..."	précise s'il faut envoyer ou non un paramètre à l'application distante
nombre-colonnes="..."	précise le nombre de colonnes à utiliser pour afficher les boutons radios

Ces attributs peuvent être complétés par tous les attributs communs aux blocs, une question dans un formulaire étant considérée comme un bloc. Ceux-ci permettent de mettre en page la zone de boutons radio.

Il est également possible d'utiliser les synonymes suivants:

<name>	synonyme de <nom>
<label>	synonyme de <libellé>
<title>	synonyme de <libellé>
<value>	synonyme de <valeur>
<mandatory/>	synonyme de <obligatoire>
cols="..."	synonyme de nombre-colonnes="..."

Dans cet exemple, on affiche un ensemble de trois boutons de type "radio".

Exemple

			
<input type="radio">
   <nom>images-type</nom>
   <libellé>support actuel de vos images</libellé>
   <option valeur="papier">photo papier</option>
   <option valeur="dia">diapositives</option>
   <option valeur="numeriques">images numériques</option>
   <p>Si vous utilisez plusieurs formats, cochez celui qui est le plus fréquent.</p>
</input>

Paramètre envoyé à l'application

Lorsque les données du formulaire seront envoyées à l'application distante, celles-ci contiendront un paramètre dont la valeur sera égale à celle de l'option sélectionnée. Le nom de ce paramètre peut être donné de deux manières:

à l'aide d'un élément <nom> dans l'élément <input>;
à l'aide d'un attribut nom="..." sur les éléments <option>.

C'est généralement de la première manière qu'on déclare le paramètre. La deuxième manière possède l'avantage - très relatif - de changer le nom du paramètre en fonction des options. Si les deux manières sont utilisés conjointement, l'attribut nom="..." sera préféré à l'élément <nom>.

Si aucune option n'est sélectionnée, ou si l'option sélectionnée n'est pas associé à un paramètre, aucun paramètre ne sera envoyé concernant cette question (pour éviter cela, vous pouvez rendre le choix obligatoire).

Dans cet exemple, un paramètre type, donné par l'élément <nom>, sera envoyé si une des options est sélectionnée.

Exemple

<input type="radio">
   <nom>type</nom>
   <libellé>je suis</libellé>
   <option valeur="petit">petit</option>
   <option valeur="moyen">moyen</option>
   <option valeur="grand">grand</option>
</input>

Dans cet exemple, un paramètre taille, donné par l'attribut nom="taille", sera envoyé si une des options est sélectionnée (l'élément <nom>, bien que présent, est ignoré).

Exemple

<input type="radio">
   <nom>type</nom>
   <libellé>je suis</libellé>
   <option nom="taille" valeur="petit">petit</option>
   <option nom="taille" valeur="moyen">moyen</option>
   <option nom="taille" valeur="grand">grand</option>
</input>

Les boutons ne seront mutuellement exclusifs que parmi ceux associés au même paramètre.

Dans cet exemple, les trois premières options sont associées au paramètre taille, les quatres suivantes le sont au paramètre cheveux. Une seule option parmi les trois premières pourra être sélectionnée, ainsi qu'une seule option parmi les quatres dernières.

Exemple

<input type="radio">
   <libellé>je suis</libellé>
   <option nom="taille" valeur="petit">petit</option>
   <option nom="taille" valeur="moyen">moyen</option>
   <option nom="taille" valeur="grand">grand</option>
   <option nom="cheveux" valeur="blond">blond</option>
   <option nom="cheveux" valeur="brun">brun</option>
   <option nom="cheveux" valeur="noir">noir</option>
   <option nom="cheveux" valeur="roux">roux</option>
</input>

Bouton coché par défaut

Comme en html, si vous ne précisez rien, aucune option ne sera cochée par défaut.

Vous pouvez indiquer quelle option sera cochée par défaut grâce à un attribut cochée="oui" (ou checked="yes") à placer sur l'élément <option> correspondant. sélectionnée="oui" (ou selected="yes") aura le même effet.

Dans cet exemple, la troisième option "numeriques" sera cochée par défaut.

Exemple

			
<input type="radio">
   <nom>images-type</nom>
   <libellé>support actuel de vos images</libellé>
   <option valeur="papier">photo papier</option>
   <option valeur="dia">diapositives</option>
   <option valeur="numeriques" cochée="oui">images numériques</option>
</input>

Une autre façon de procéder et d'utiliser un élément <valeur> (ou <value>) qui contiendra la valeur de l'option à sélectionner par défaut.

Dans cet autre exemple, c'est l'option "dia" qui sera cochée par défaut.

Exemple

			
<input type="radio">
   <nom>images-type</nom>
   <libellé>support actuel de vos images</libellé>
   <valeur>dia</valeur>
   <option valeur="papier">photo papier</option>
   <option valeur="dia">diapositives</option>
   <option valeur="numeriques">images numériques</option>
</input>

Mentionner plusieurs valeurs par défaut

Vous pouvez mentionner plusieurs valeurs par défaut, soit en utilisant plusieurs attributs cochée="oui", soit en utilisant plusieurs éléments <valeur>, soit en utilisant un seul élément <valeur> contenant plusieurs options séparées par des caractères '|'.

Si tous les boutons radio sont associés à un seul et même paramètre, ces boutons seront mutuellement exclusifs. Dans ce cas, seule la dernière option mentionnée sera pré-sélectionnée.

Dans cet exemple toutes les options sont associées à un même paramètre images-type. C'est l'option "numeriques" qui sera cochée par défaut, car elle est la dernière option à être pré-sélectionnée.

Exemple

			
<input type="radio">
   <nom>images-type</nom>
   <libellé>support actuel de vos images</libellé>
   <valeur>papier|dia|numeriques</valeur>
   <option valeur="papier">photo papier</option>
   <option valeur="dia">diapositives</option>
   <option valeur="numeriques">images numériques</option>
</input>

Par contre, si plusieurs paramètres différents sont utilisés, plusieurs boutons radio pourront être cochés: un pour chaque paramètre différent, avec à chaque fois la dernière option à être pré-sélectionnée qui sera cochée.

Dans cet exemple, deux paramètres taille et cheveux sont utilisés. Pour le paramètre taille, c'est l'option "grand" qui sera cochée (la dernière à être pré-sélectionnée parmi toutes celles concernant ce paramètre), et pour le paramètre cheveux, c'est l'option "noir" qui sera cochée (la dernière à être pré-sélectionnée parmi toutes celles concernant ce paramètre).

Exemple

<input type="radio">
   <libellé>je suis</libellé>
   <valeur>moyen|brun|grand|noir|blond</valeur>
   <option nom="taille" valeur="petit">petit</option>
   <option nom="taille" valeur="moyen">moyen</option>
   <option nom="taille" valeur="grand">grand</option>
   <option nom="cheveux" valeur="blond">blond</option>
   <option nom="cheveux" valeur="brun">brun</option>
   <option nom="cheveux" valeur="noir">noir</option>
   <option nom="cheveux" valeur="roux">roux</option>
</input>

Modification de l'apparance de la zone de boutons radio

Style de la zone de boutons radio

Un élément <input type="radio"> est considéré comme un bloc. Tous les attributs (style, bords et ses variantes) définis pour les blocs peuvent être utilisés (l'élément <titre>, ici, n'a pas lieu d'être).

Si vous n'utilisez pas d'attribut style, la zone sera affiché sans mise en page particulière (identique à style="transparent"). Dans le cas contraire c'est un bloc dont la mise en page est définie par cet attribut style qui sera affiché.

Exemple

<input type="radio" style="colorBar4" bords="arrondis">
   <nom>typeImages</nom>
   <libellé>support de vos images</libellé>
   <option valeur="papier">photo papier</option>
   <option valeur="dia">diapositives</option>
   <option valeur="numeriques">images numériques</option>
</input>

Exemple

		
<input type="radio">
   <nom>typeImages</nom>
   <libellé>support actuel de vos images</libellé>
   <obligatoire/>
   <option valeur="papier">photo papier</option>
   <option valeur="dia">diapositives</option>
   <option valeur="numeriques">images numériques</option>
</input>