Un exercice☘
- Ci-dessous un fichier choixCouleurs.html présentant un formulaire.
Votre mission: écrire la page colorons.php qui traite les données du formulaire.
Ce traitement consistera en l'affichage de la page colorons.php avec une couleur de fond donnée par le champ correspondant ainsi qu'une couleur de texte et une couleur de bordure correspondant aux champs du fichier choixCouleurs.html (ce fichier colorons.php contiendra donc un texte, l'élément conteneur de ce texte présentant une bordure.)
Pour bien comprendre la demande, vous pouvez tester ici.
Le fichier choixCouleurs.html:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title> formulaire choix couleurs </title>
<style>
body{
width: 80%;
margin: 20px auto;
}
form{ border: 2px dashed orange;
display: inline-block;
padding: 5px;
margin: 5px;
}
</style>
</head>
<body>
<form method="post" action="colorons.php">
<p>
<label for="fond">Choisissez la couleur de fond:</label>
<select id="fond" name="couleurFond">
<option value="red"> rouge </option>
<option value="orange">orange</option>
<option value="yellow">jaune</option>
<option value="goldenrod">rouge doré</option>
</select>
</p>
<p>
<label for="texte">Choisissez la couleur du texte:</label>
<select id="texte" name="couleurTexte">
<option value="black"> noir </option>
<option value="blue">bleu</option>
<option value="green">vert</option>
</select>
</p>
<p>
<label for="cadre">Choisissez la couleur du cadre:</label>
<select id="cadre" name="couleurCadre">
<option value="black"> noir </option>
<option value="blue">bleu</option>
<option value="green">vert</option>
<option value="magenta">magenta</option>
<option value="tomato">rouge tomate</option>
</select>
</p>
<input type="submit" value="Envoyer"/>
</form>
</body>
</html>
Un code possible pour le traitement php
Un code pour le fichier colorons.php:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title> traitement du choix couleurs </title>
<style>
blockquote{
text-align: center;
padding:3px;margin:4px;
display: inline-block;
}
<?php
$fond = $_POST['couleurFond'];
$texte = $_POST['couleurTexte'];
$bordure = $_POST['couleurCadre'];
echo "blockquote{ background-color: $fond; color: $texte; border: 6px ridge $bordure;}";
?>
</style>
</head>
<body>
<blockquote cite="https://www.theonering.net/torwp/2012/05/08/55715-top-20-quotes-from-the-lord-of-the-rings/">
We swears, to serve the master of the Precious. We will swear on… on the Precious!
</blockquote>
</body>
</html>
- Lorsqu'on clique sur le bouton "envoyer" dans la page html, la requête HTTP qui a lieu pour demander la page de traitement suit-elle la méthode POST ou la méthode GET?
Méthode http
La réponse se trouve dans la balise form: c'est la méthode POST qui est utilisée.
Vous pouvez bien entendu vérifier cela comme d'habitude avec firefox: F12, onglet réseau
et observer qu'il s'agit bien d'une requête utilisant la méthode POST.