Interactions entre HTML-CSS-Javascript-PHP, besoin d'aide svp

26 mars 2009, 17:28

Bonjour,

j'essaye de coder une petite page PHP, qui permet d'afficher un texte t qui est répété n fois dans une couleur choisit c dans une formulaire (avec contrôle Javascript).

J'ai fait deux pages:
- une page HTML avec la formulaire composé d'un champ de texte t, un champ de nombre n, et une liste de choix avec 5 couleurs.
- une page PHP qui doit récuperer le texte, le nombre, et la couleur. Ensuite afficher le texte n fois en couleur c.

Ce que j'ai réussit: la formulaire, affichage du texte n fois.
Ce que je n'ai pas réussit: affichage en couleur c.

En fait, je ne comprends pas comment dire au serveur de récupérer et afficher la couleur que l'on a choisit. Je sais qu'il faut utiliser une feuille de style, mais concretement, comment ?

Code : Tout sélectionner

<style type="text/css">
		.n {background-color:#000000;color:white;}
		.r {background-color:#FF0000;}
		.v {background-color:green;}
		.b {background-color:blue;}
		#list {width:150px;}	
</style>

<div align=center>
			<form name="form1" action="http://localhost/saisie3.php">
			Saisissez un texte <input type="text" name="txt1" value="" method="GET">
								</input>
								<br />
			Saisissez un nombre entier <input type="text" name="nb" value="" method="GET">
								</input>
								<br />
			Choisissez une couleur <select id="list" name="cl" method="GET">
										<option class="n" name="1">noir</option>
										<option class="r" name="2">rouge</option>
										<option class="v" name="3">vert</option>
										<option class="b" name="4">bleu</option>
									</select>
									<br />
			<input type="submit" value="Afficher le texte en couleur" >
                      </form>
</div>

<?php
	echo "<html><head><title>" . "R&eacute;p&eacute;tition d'un texte" . "</title></head></html>" ; 
	$t=$_GET['txt1']; 
	$n=$_GET['nb']; 
       $c=$_GET['cl'];
	echo "<div align=center>";
	echo "<h1>" . "Affichage du texte " . "'" . $t . "' " . $n . " fois en " . $c . "</h1>" ;
	
	for($i=0;$i<=$n;$i++)
	{
		echo $t . "<br />";	// text affiché mais sans couleur 
	}
	echo "</div>";
?>

26 mars 2009, 17:40

Ton select devrait plutôt être du style :

Code : Tout sélectionner

<select id="list" name="cl" method="GET">
    <option value="n">noir</option>
    <option value="r">rouge</option>
    <option value="v">vert</option>
    <option value="b">bleu</option>
</select>

Comme ça tu récupèrera la valeur (n, r v, ou b) dans la variable $_GET['cl'];
Et comme tu as définis des classes CSS pour ces valeurs, il te suffit d'appliquer la classe sur ton texte, avec un <span> par exemple

echo "<span class=" . $c . ">" . $t . "</span><br />";

26 mars 2009, 17:47

Une piste (exprimée d'une autre façon) :

switch ($c)
{
  case 1:
    $classe_couleur = 'class="n"';
    break;
  case 2:
    $classe_couleur = 'class="r"';
    break;
  case 3:
    $classe_couleur = 'class="v"';
    break;
  case 4:
    $classe_couleur = 'class="b"';
    break;
  /* Définition d'une classe par défaut */
  default:
    $classe_couleur = 'class="n"';
    break;
}

Et dans ta boucle for :

for ($i = 0; $i < $n; $i ++)
{
  echo '<p '.$classe_couleur.'>'.htmlspecialchars ($t).'</p>';
}

Soit dit en passant, la fonction htmlspecialchars() t'évitera bien des surprises si le texte à afficher est une tentative d'attaque (injection de code JavaScript nuisible au moyen de l'élément script, par exemple). En outre, n'oublie pas de vérifier que la variable $n correspond bien à un nombre entier et qu'elle vaut au moins 1.

26 mars 2009, 18:07

Ton select devrait plutôt être du style :

Code : Tout sélectionner
<select id="list" name="cl" method="GET"> <option value="n">noir</option> <option value="r">rouge</option> <option value="v">vert</option> <option value="b">bleu</option> </select>
Comme ça tu récupèrera la valeur (n, r v, ou b) dans la variable $_GET['cl'];
Et comme tu as définis des classes CSS pour ces valeurs, il te suffit d'appliquer la classe sur ton texte, avec un <span> par exemple
echo "<span class=" . $c . ">" . $t . "</span><br />";

En fait mes class dans le select c'est pour faire cela:

Or si je remplace par value comme tu dis, ça ne passe plus

En plus ça ne marche pas vraiment:
HTML

PHP

26 mars 2009, 19:19

D'accord en fait, il faut que tu définisses des classes CSS dans ton fichier php comme tu l'a fait pour le formulaire.
Ensuite, ton formulaire devient

Code : Tout sélectionner

<select id="list" name="cl" method="GET">
    <option class="n" value="n">noir</option>
    <option class="r" value="r">rouge</option>
    <option class="v" value="v">vert</option>
    <option class="b" value="b">bleu</option>
</select>

26 mars 2009, 21:52

Ok ça a marché
Je vous remercie pour votre aide, julian et Victor BRITO

Interactions entre HTML-CSS-Javascript-PHP, besoin d'aide svp

Qui est en ligne