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

index

page précédente

page suivante

imprimer

envoyer

marquer

<input type="checkbox">: zone de saisie avec des cases à cocher

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

Plusieurs cases peuvent être cochées simultanément, contrairement aux boutons radios.

Exemple de cases à cocher

Code de cet exemple

<input type="checkbox" cols="1">
   <nom>langue</nom>
   <libellé>Quelles langues parles-vous ?</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="checkbox">

L'élément <input type="checkbox"> 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 cases à cocher, parmi lesquelles l'utilisateur devra faire un choix La syntaxe de ces éléments <option> dans un ensemble de cases à cocher est la même que celle utilisée dans des listes déroulantes ou des boutons radios.
<valeur>	sélectionne les cases à 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 chaque élément <option> concerné
<p>	permet d'ajouter un commentaire en dessous des cases à cocher
<obligatoire/>	impose à l'utilisateur de faire un choix parmi les cases à cocher

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 cases à cocher.

L'élément <input type="checkbox"> 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 cases à cocher

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 cases à cocher.

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, le paramètre envoyé s'appelera images[], les options papier et dia seront présectionnées et un commentaire est ajouté en-dessous des boutons.

Exemple

			
<input type="checkbox">
   <nom>images[]</nom>
   <libellé>support actuel de vos images</libellé>
   <valeur>papier|dia</valeur>
   <option valeur="papier">photo papier</option>
   <option valeur="dia">diapositives</option>
   <option valeur="numeriques">images numériques</option>
   <p>n'indiquez que les formats les plus fréquents.</p>
</input>

Paramètre envoyé à l'application

Mode de fonctionnement normal

Le fonctionnement normal est de n'utiliser qu'un seul nom de paramètre pour toutes les cases à cocher. Ce nom est ici donné par l'élément <nom> (dans l'exemple ci-dessus, le nom sera images[], cf remarque ci-contre).

Le paramètre sera envoyé plusieurs fois, et ce pour chaque case cochée. Il contiendra à chaque fois la valeur de l'option correspondante.

Vous pouvez changer ce mode de fonctionnement par défaut de deux manières:

en donnant un nom de paramètre individuel à chaque option
en indiquant d'envoyer un seul paramètre avec plusieurs valeurs

Si votre application est écrite en PHP et qu'un même paramètre est envoyé plusieurs fois, il faut ajouter "[]" au nom de ce paramètre afin de récupérer la liste des options sélectionnées sous la forme d'une Array (un tableau).

Si aucune case n'est cochée, ou si les options sélectionnées ne sont pas associées à des paramètres, aucun paramètre ne sera envoyé concernant cette question (pour éviter cela, vous pouvez rendre le choix obligatoire).

Dans cet exemple, un paramètre choix[], donné par l'élément <nom>, sera envoyé pour chaque option sélectionnée.

Exemple

<input type="checkbox">
   <nom>choix[]</nom>
   <libellé>Vous préférez le</libellé>
   <option valeur="lundi">lundi</option>
   <option valeur="mardi">mardi</option>
   <option valeur="mercredi">mercredi</option>
   <option valeur="jeudi">jeudi</option>
   <option valeur="vendredi">vendredi</option>
</input>

Donner un nom de paramètre à une option en particulier

Par défaut, le nom du paramètre associé à chaque option est donné par l'élément <nom> placé dans l'élément <input type="checkbox">.

Vous pouvez remplacer ce nom individuellement pour chaque option, en placant un attribut nom="..." (ou name="...") sur l'élément <option> concerné (ce n'est pas nécessaire de le faire pour tous les éléments <option>: si l'attribut n'est pas présent, on prendra le nom donné par <nom>).

On pourra ainsi envoyer plusieurs paramètres différents en fonction des options sélectionnées.

Ici, cinq paramètres seront utilisés: lundi="oui", mardi="oui", mercredi="oui", jeudi="oui" et vendredi="oui".

Exemple

<input type="checkbox">
   <libellé>Vous préférez le</libellé>
   <option nom="lundi" valeur="oui">lundi</option>
   <option nom="mardi" valeur="oui">mardi</option>
   <option nom="mercredi" valeur="oui">mercredi</option>
   <option nom="jeudi" valeur="oui">jeudi</option>
   <option nom="vendredi" valeur="oui">vendredi</option>
</input>

Dans cet exemple, les cinq premières options sont associées au paramètre semaine[], les deux suivantes le sont au paramètre jour[].

Exemple

<input type="checkbox">
   <libellé>Vous préférez le</libellé>
   <option nom="semaine[]" valeur="lundi">lundi</option>
   <option nom="semaine[]" valeur="mardi">mardi</option>
   <option nom="semaine[]" valeur="mercredi">mercredi</option>
   <option nom="semaine[]" valeur="jeudi">jeudi</option>
   <option nom="semaine[]" valeur="vendredi">vendredi</option>
   <option nom="jour[]" valeur="am">matin</option>
   <option nom="jour[]" valeur="pm">après-midi</option>
</input>

Envoyer un seul paramètre avec plusieurs valeurs

Vous pouvez également décider de n'envoyer qu'un seul paramètre, sous la forme d'une chaîne de caractères contenant toutes les valeurs des options sélectionnées séparées par le caractère |.

Le nom de ce paramètre est donné par l'élément <nom>. Il suffit d'ajouter à cet élément un attribut type="string" pour indiquer de n'envoyer qu'un seul paramètre avec plusieurs valeurs.

Dans cet exemple, un seul paramètre jour sera envoyé, contenant plusieurs valeurs séparées par le caractère |.

Exemple

<input type="checkbox">
   <nom type="string">jour</nom>
   <libellé>Vous préférez le</libellé>
   <option valeur="lundi">lundi</option>
   <option valeur="mardi">mardi</option>
   <option valeur="mercredi">mercredi</option>
   <option valeur="jeudi">jeudi</option>
   <option valeur="vendredi">vendredi</option>
</input>

Cases cochées 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, les deux premières options "papier" et "dia" seront cochées par défaut.

Exemple

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

Une autre façon de procéder et d'utiliser un ou plusieurs éléments <valeur> (ou <value>) qui contiendront les valeurs des options à cocher par défaut.

Dans cet autre exemple, c'est les options "dia" et "numeriques" qui seront cochées par défaut.

Exemple

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

Modification de l'apparance de la zone de cases à cocher

Style de la zone de cases à cocher

Un élément <input type="checkbox"> 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="checkbox" 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="checkbox">
   <nom>images[]</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>

Par défaut, au minimum une case doit être cochée et autant qu'on veut. Vous pouvez changer cela grâce aux attributs minimum et maximum.

Exemple

		
<input type="checkbox">
   <nom>destination[]</nom>
   <libellé>sélectionnez deux ou trois destinations</libellé>
   <obligatoire minimum="2" maximum="3"/>
   <option valeur="amsterdam">Amsterdam</option>
   <option valeur="paris">Paris</option>
   <option valeur="berlin">Berlin</option>
   <option valeur="brussels">Bruxelles</option>
   <option valeur="budapest">Budapest</option>
   <option valeur="london">Londres</option>
   <option valeur="madrid">Madrid</option>
   <option valeur="paris">Paris</option>
   <option valeur="roma">Rome</option>
</input>