| Accueil | table PHP | index PHP | précédent | suivant |

Les formulaires - 5 (cases à cocher, boutons radio)

Les cases à cocher servent à effectuer des sélections multiples, les boutons radio permettent de faire un choix unique entre plusieurs options.

Les boutons radio sont groupés et doivent avoir le même nom (option name) à l'intérieur d'un groupe. A chaque bouton est affectée une valeur (option value) qui est retournée dans le tableau $_POST["name"] lorsque le bouton est cliqué.

Pour les cases à cocher, chaque case doit avoir un nom unique (option name) qui permet par isset($_POST["name"]) de savoir si la case est cochée ou non, l'option value est alors inutile.

Lorsque des boutons radio ou des cases à cocher sont affichés par un script, l'option checked="checked" doit être placée dans la balise des élément cochés.

Nous donnons ci-dessous un exemple complet comprenant boutons radio et cases à cocher. Les libellés et les sélections sont placés dans des tableaux qui évitent le recours à des instructions switch. Les listes input sont produites par deux scripts PHP à partir des tableaux.


/* Fichier PHPStyle012.css */

body
{
background-color : rgb(245,235,204);
}

#form
{
position : absolute;
left : 7cm;
top : 1cm;
padding-top : 10px;
background-color : rgb(255,255,255);
font-family : Verdana;
font-size : 9pt;
color : rgb(0,0,0);
line-height : 150%;
}

h2
{
margin-top : 0;
font-size : 12pt;
color : rgb(60,0,0);
text-align : center;
}

h3
{
margin-top : 0;
font-size : 10pt;
color : rgb(60,0,0);
text-align : center;
}

.radio
{
padding : 5px;
width : 130px;
background-color : rgb(225,245,204);
color : rgb(0,0,0);
margin-left : 20px;
margin-right : 0;
margin-bottom : 20px;
font-size : 8pt;
}

.checks
{
padding : 5px;
width : 130px;
background-color : rgb(245,235,214);
color : rgb(0,0,0);
margin-left : 20px;
margin-right : 20px;
margin-bottom : 20px;
font-size : 8pt;
}

.boutons
{
background-color : rgb(225,225,245);
color : rgb(0,0,0);
width : 80px;
font-weight : bold;
color : rgb(150,0,0);
}

.table
{
margin-left : 80px;
margin-bottom : 20px;
}

.cell
{
vertical-align : top;
}

.Tspan
{
margin-left : 20px;
color : rgb(0,60,0);
font-weight : bold;
}



<?php
// initialisation des sélections

// table des tranches d'âge
$age[]="moins de 20ans";
$age[]="de 21 à 40 ans";
$age[]="de 41 à 60 ans";
$age[]="plus de 60 ans ";

$ageNb=count($age); // nombre de tranches d'âge

// table des cases préférences cochées (true) et non cochées (false)
$pref_select[]=false;
$pref_select[]=false;
$pref_select[]=false;
$pref_select[]=false;
$pref_select[]=false;

// titres des préférences
$pref_titres[]="sports";
$pref_titres[]="théâtres";
$pref_titres[]="concerts";
$pref_titres[]="musées";
$pref_titres[]="cinéma";

$checkNb=count($pref_titres); // nombre de cases

// origine de l'appel au script
$envoi=isset($_POST["envoi"]);
// si pas "envoi" : affichage initial ou bouton "nouveau"
// alors ne pas enregistrer les sélections

$choixR=$ageNb; // choix invalide pour affichage initial

// enregistrer les sélections si "envoi"
$OKr=false;
$OKc=false;
if($envoi)
{


// boutons radio
if(isset($_POST["choixR"]))
{


$OKr=true;
$choixR=$_POST["choixR"];


}

// cases à cocher
$N=0;
while($N < $checkNb)
{


// ranger les marques de cases dans la table $pref_select[]
$pref_select[$N]=isset($_POST["$N"]);
if($pref_select[$N]) {$OKc=true;}
$N++;


} // fin while


} // fin si

?>

<!--script025 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Titre de cette page : script025</title>
<meta name="description" content="Phrase décrivant clairement cette page" />
<meta name="keywords" content="mot1 mot2, mot3 mot4 mot5, mot6" />
<link rel="stylesheet" type="text/css" href="PHPStyle012.css" />
</head>

<body>

<form id="form" action="script025.php" method="post">

<h2>Vos préférences</h2>

<table>
<tr>
<td class="cell">
<div class="radio">
<h3>tranche d'âge</h3>

<?php
// script produisant la liste des boutons radio
$N=0;
while($N<$ageNb)
{


echo "<input type=\"radio\" name=\"choixR\" value=\"$N\" ";
if($choixR==$N) {echo " checked=\"checked\" ";}
echo "/>";
echo "$age[$N] <br/>";
$N++;


}
?>

</div>
</td>
<td class="cell">
<div class="checks">
<h3>préférences</h3>

<?php
// script PHP produisant la liste des cases à cocher
$N=0;
while($N<$checkNb)
{


echo "<input type=\"checkbox\" ";
echo "name=\"$N\""; // le nom de la case est son numéro
if($pref_select[$N]) {echo " checked=\"checked\" ";}
echo "/>";
echo "$pref_titres[$N] <br/>";
$N++;


}
?>

</div>
</td>
</tr>
</table>

<table class="table">
<tr>
<td>
<input class="boutons" type="submit" name="envoi" value="envoi" />
</td>
<td>
<input class="boutons" type="submit" name="nouveau" value="nouveau" />
</td>
</tr>
</table>

<?php

// affichage des sélections effectuées
if($envoi)
{


if(!$OKr)
{echo "<p class=\"Tspan\" >tranche d'âge non cochée</p>";}

if(!$OKc)
{echo "<p class=\"Tspan\" >préférences non cochées</p>";}

if($OKr and $OKc)
{


echo "<p class=\"Tspan\" ><i>Votre tranche d'âge : </i><br/>
$age[$choixR]</p>";

echo "<p class=\"Tspan\" ><i>Vos préférences : </i><br/>";
$N=0;
while($N < $checkNb)
{


if($pref_select[$N]) {echo $pref_titres[$N]; echo "<br/>"; }
$N++;


} // fin while
echo "</p>";


} // fin si OK


} // fin si envoi

?>

</form>

</body>
</html>


Exécuter ce script


suivant