Les Tutos de Gabriel

Choix multiples dans un formulaire

Les "checkbox"

Formulaire et cases à cocher :

Ici on va parler d'un petit problème qu'on trouve quelquefois avec les champs de type "checkbox" ou "cases à cocher"

1 - Recopiez ce code pour le premier formulaire :
/*1*/<form id="fruits" method="post" name="cases_simples">
/*2*/<p><label for="Pommes">Pommes</label><input type="checkbox" name="Pommes" value="Pommes" <?php if (!empty($_POST['Pommes'])){echo 'checked';}?>>
/*3*/<label for="Poires">Poires</label><input type="checkbox" name="Poires" value="Poires"<?php if (!empty($_POST['Poires'])){echo 'checked';}?>>
/*4*/<label for="Pêches">Pêches</label><input type="checkbox" name="Pêches" value="Pêches"<?php if (!empty($_POST['Pêches'])){echo 'checked';}?>>
/*5*/<label for="Abricots">Abricots</label><input type="checkbox" name="Abricots" value="Abricots"<?php if (!empty($_POST['Abricots'])){echo 'checked';}?>>
/*6*/<label for="Cerises">Cerises</label><input type="checkbox" name="Cerises" value="Cerises"<?php if (!empty($_POST['Cerises'])){echo 'checked';}?>></p>
/*7*/<p><input type="submit" name="Fruits" value="Fruits" onClick="cases_simples.submit()" ></p>
/*8*/</form>

1er exemple :

Choisissez vos fruits :

Commentaires :

Lecture des résultats :

3 - En début de page, nous écrivons les codes pour récupérer les noms des fruits choisis.
$Message_fruits = 'Choisissez vos fruits :';
if (isset($_POST['Fruits']))
{
$Message_fruits = 'Votre panier contient : Des ';
$Message_fruits .= (!empty($_POST['Pommes']))? ($_POST['Pommes']).', ' : '';
$Message_fruits .= (!empty($_POST['Poires']))? ($_POST['Poires']).', ' : '';
$Message_fruits .= (!empty($_POST['Pêches']))? ($_POST['Pêches']).', ' : '';
$Message_fruits .= (!empty($_POST['Abricots']))? ($_POST['Abricots']).', ' : '';
$Message_fruits .= (!empty($_POST['Cerises']))? ($_POST['Cerises']): '';
}

4 - On complète sous le formulaire avec la ligne donnant l'affichage des résultats :
<?php echo '<h4 class="rg">'.$Message_fruits.'</h4>'; ?>

Commentaires :

  1. Dans la première ligne on invite le lecteur par le message : "Choisissez vos fruits :"
  2. Si on a cliqué sur le bouton "Fruits", le message commence par "Votre panier contient : Des "
  3. Si le choix "Pommes" est coché, le message est "concaténé" avec la valeur de $_POST['Pommes'] donnée par value="Pommes"
    Sinon (:) c'est égal à '', c'est à dire rien.
  4. Si le choix "Poires" est coché, le message est "concaténé" avec la valeur de $_POST['Poires'] donnée par value="Poires"
    Sinon (:) c'est égal à '', c'est à dire rien.

On fait donc des concaténations successives de chaque résultat :

Choisissez vos fruits :


Dans ce premier exemple, nous écrivons autant de fois la formule qu'il y a de fruits.
Ça va bien quand il n'y en a pas beaucoup.
Nous allons donc voir une autre façon de faire quand le choix est plus grand !


Réinitialiser

2ème exemple : une équipe de foot

Pour cet exercice, je prends une liste de 25 prénoms sur ce site : top-1000-des-prenoms-de-garcons :
Gabriel - Alexandre - Arthur - Adam - Raphaël - Louis - Paul - Antoine - Maxime - Thomas - Victor - Lucas - Jules - Nathan - Hugo - Sacha - Mohamed - Enzo - Gaspard - Clement - Samuel - Ethan - Leo - Adrien - Martin
que l'on va transformer en tableau :

Pas fait exprès, mais c'est plaisant de figurer en tête de liste des prénoms préférés dans cette statistique !

5 - Ecrivons-les en array :
$equipe = array('Gabriel','Alexandre','Arthur','Adam','Raphaël', 'Louis','Paul',
'Antoine','Maxime','Thomas','Victor','Lucas ','Jules','Nathan','Hugo',
'Sacha','Mohamed','Enzo','Gaspard ','Clement','Samuel','Ethan','Leo',
'Adrien','Martin ');
$nbequipe = count($equipe);
echo '<p>Nombre d\'équipiers : '.$nbequipe.'</p>';
?>
<p id="joueurfoot">Sur ces 25 joueurs nous allons en sélectionner 11 :</p>

Nombre d'équipiers : 25

Sur ces 25 joueurs nous allons en sélectionner 11 :

6 - Créons la liste de choix des joueurs :
/*1*/<form method="post" action="index.php?md="informatique&amp;ac=formulairechoixmultiples#joueurfoot" >
/*2*/<?php
/*3*/echo '<ul style="list-style-type: none;">';
/*4*/for ($n = 0; $n <$nbequipe; $n++){
/*5*/$check = (in_array($equipe[$n],$joueur))? 'checked':'';
/*6*/echo '<li><input type="checkbox" name="Joueur[]" value=" '.$equipe[$n].'" '.$check.'>'.$equipe[$n].'</li>';
/*7*/}
/*8*/echo '</ul>';
/*9*/?>
/*10*/<p class="dessous"><input type="submit" name="envoyer" value="envoyer"></p>
/*11*/</form>

  • Gabriel
  • Alexandre
  • Arthur
  • Adam
  • Raphaël
  • Louis
  • Paul
  • Antoine
  • Maxime
  • Thomas
  • Victor
  • Lucas
  • Jules
  • Nathan
  • Hugo
  • Sacha
  • Mohamed
  • Enzo
  • Gaspard
  • Clement
  • Samuel
  • Ethan
  • Leo
  • Adrien
  • Martin

Dans cette liste, nous devons sélectionner 11 joueurs.
Nous allons donc en tenir compte dans la lecture du formulaire.

Résultat :

Sélectionnez 11 joueurs !

Réinitialiser

Explications :

Où se situe la particularité de cette deuxième solution ?

- Dans la liste des fruits :
Chaque ligne "input" concernant 1 fruit possède 1 attribut "name= le nom du fruit"

- Dans la liste de l'équipe de foot :
Toutes les lignes "input" concernant 1 joueur possèdent 1 seul même attribut "name= Joueur[]".
Le fait de mettre la paire de crochets [] fait comprendre au programme que l'on remplit un tableau (array) que nous appelons "$joueur".

Lecture de ce 2ème formulaire :

7 - En haut de votre page Php, écrivez ce code d'initialisation :
$message = '<p class="rg">Sélectionnez 11 joueurs !</p>';
$joueur = array();

On initialise notre tableau $joueur, ce qui évite d'avoir un message d'erreur tant que ce tableau est vide.

On écrit ensuite le code pour le cas où on a commencé à cocher des joueurs.

8 - Ecrivez :
/*1*/<?php
/*2*/if (isset($_POST['envoyer']))
/*3*/{
/*4*/$joueur=$_POST['Joueur']; // récupère le tableau des joueurs cochés
/*5*/$nbjoueurs = sizeof($joueur); // nombre des joueurs cochés
/*6*///pour les exploiter on fait une boucle sur l'array:
/*7*/for($i=0;$i<$nbjoueurs;$i++)
/*8*/{
/*9*/$message.="<span class='rg'> $joueur[$i]
</span> est sélectionné <br />"; // crée le message pour chaque joueur sélectionné avec concaténation et retour à la ligne
/*10*/}
/*11*/$message.= '<p class="souligne">Nombre de joueurs sélectionnés : <span class="rg gras">'.$nbjoueurs.'</span></p>';
/*12*/if ($nbjoueurs < 11)
/*13*/{
/*14*/$Manque = (11 - $nbjoueurs) ;
/*15*/$message .= '<p class="rg">Le nombre de joueurs est insuffisant, vous devez encore en sélectionner '.$Manque.'</p>';
/*16*/}
/*17*/else if ($nbjoueurs > 11)
/*18*/{
/*19*/$Trop = ($nbjoueurs - 11) ;
/*20*/$message .= '<p class="rg">Le nombre de joueurs est trop grand, vous devez en éliminer '.$Trop.'</p>';
/*21*/}
/*22*/}
/*23*/?>

Explications :


Et si notre liste est plus longue, de 100 ou 1000 noms ?

On va avoir une longueur de page impossible à gérer. Il est possible de s'organiser avec des catégories pour nos choix.

On va prendre un exemple avec la liste des 101 départements. Dans celle-ci on pourra, par exemple, faire un classement par "Régions".

Commençons en récupérant cette liste, et créons notre table dans la BDD.

Vous pouvez télécharger cette table ici

Nous pouvons commencer à écrire notre formulaire, pour sélectionner en premier la région.

9 - Les premières lignes :
/*1*/<form name="depregions" id="depregions" method="post" action="index.php?md=informatique&ac=formulairechoixmultiples#region" >
/*2*/<?php
/*3*/$regions = $bdd->prepare("SELECT DISTINCT `region` FROM `departements` WHERE `region` IS NOT NULL ");
/*4*/$regions->execute();
/*5*/echo '<label for="regions">Nom de la région :</label>
/*6*/<select name="regions">
/*7*/<option>Choisissez :';
/*8*/while ($donnees = $regions->fetch())
/*9*/{
echo '<option value="'.$donnees[0].'">'.$donnees[0].'</option><br />';
/*10*/}
/*11*/echo '</select>
/*12*/<input type="submit" value="Choix_region" name="Choix_region">';
/*13 en attente */
/*33*/</form>
/*34*/<h4 id="region">Explications</h4>

Explications

Lecture de ce choix de région :

En début de page, après les lignes concernant les joueurs de foot, nous insérons les lignes suivantes :

10 - Lecture des régions :
///////////////////////////////////////////////////////////////
$message_region = '<p>Faux</p>';
if ((isset($_POST['Choix_region'])))
{
$message_region = "<p>Vrai</p>";
$region = $_SESSION['region'];
$message_region = '<p class="rg">La région choisie est : '.$region.'</p>';
}

Faites votre choix et cliquez sur le bouton.

11 - Voici les lignes concernant la partie formulaire pour les départements. On insère ces lignes à la place de la ligne 13 indiquée plus haut :
/*13*////////// Choix multiple des départements ////////////////
/*14*/if (isset($region))
/*15*/{
/*16*/echo $message_region = ($message_region)? $message_region : '';
/*17*/echo '<p>Dans la liste des départements, vous pouvez en choisir plusieurs, en maintenant la touche "Ctrl" appuyée et en cliquant.
/*18*/<br />Quand votre sélection est faite, cliquez sur le bouton "Choix_departements".</p>';
/*19*/$departements = $bdd->prepare("SELECT `depart` FROM `departements` WHERE `region` LIKE ? ");
/*20*/$departements->execute(array($region));
/*21*/$nbdeps = ($departements->rowCount())+1;
/*22*/echo '<label for="deps">Nom des départements :</label>
<select name="deps[]" size='.$nbdeps.' multiple >';
/*24*/echo '<option>Choisissez :';
/*25*/while ($don = $departements->fetch())
/*26*/{
/*27*/echo '<option value="'.$don[0].'">'.$don[0].'</option><br />';
/*28*/}
/*29*/echo '</select>';
/*30*/echo '<input type="hidden" name="region" value="'.$region.'" >';
/*31*/echo '<input type="submit" value="Choix_departements" name="Choix_departements" >';
/*32*/}
?>
<!--33--></form>
<?php
/*34*/$message = (isset($messagedeps)) ? $messagedeps : '';
/*35*/echo '<h5>'.$message.'</h5>';
/*36*/?>

Explications :

Lecture des départements ;

12 - En haut de la page, après la partie concernant le choix de la région, écrivez :
if (isset($_POST['Choix_departements'])) // si on a cliqué sur le bouton "Choix_departements"
{
$deps=$_POST['deps']; // on récupère le contenu de $_POST['deps']
$nbdeps = sizeof($deps); // nombre de départements dans $deps
$messagedeps = 'Pour la région : <span class="rg">'.$_POST['region'].'</span><br />'; // rappel du nom de la région
//pour les exploiter on fait une boucle sur l'array :
for($i=0;$i<$nbdeps;$i++)
{
$messagedeps.="<span class='rg'> $deps[$i] </span>est sélectionné <br />"; // on concatène les lignes
}
$messagedeps.= '<p class="souligne">Nombre de départements sélectionnés : <span class="rg gras">'.$nbdeps.'</span></p>';
}

Copie des résultats :



Conlusion :

Vous pouvez constater la présence de 3 formulaires différents :

  • Un formulaire simple : les fruits. Un fruit = une réponse.
  • Un formulaire avec choix d'une équipe de 11 joueurs sous forme de tableau.
  • Un formulaire double, avec 2 choix interdépendants.

Je vous laisse le soin de créer vos propres styles css.

Dans un prochain chapitre, nous utiliserons plusieurs pages pour composer un "caddy", à l'aide des sessions et des cookies.