Page 1 sur 1

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

Posté : 26 mars 2009, 17:28
par metalism187
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>";
?>

Posté : 26 mars 2009, 17:40
par julian
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 />";

Posté : 26 mars 2009, 17:47
par Victor BRITO
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. ;)

Posté : 26 mars 2009, 18:07
par metalism187
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:
Image

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

En plus ça ne marche pas vraiment:
HTML
Image

PHP
Image

Posté : 26 mars 2009, 19:19
par julian
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>

Posté : 26 mars 2009, 21:52
par metalism187
Ok ça a marché
Je vous remercie pour votre aide, julian et Victor BRITO