Dans ce TP nous avons besoin d'un serveur pour faire ses equêtes HTML. C'est pourquoi nous allons utiliser wampserver.
Lancer wampserver, attendez le w
passe au vert et cliquez dessus :
Placez les fichiers dans Répertoire www
, puis testez-les en cliquant sur localhost
.
Vous pouvez installer un serveur Apache sur votre Raspberry Pi. Voir le tutoriel
Créez un fichier formulaires.html
que vous allez placer dans répertoire www
de wampserver.
Coller le code ci-dessous dans le fichier :
<!DOCTYPE html>
<html>
<body>
<h2 id="age" >Formulaire 1</h2>
<p>
<form method="post" action="page1.php">
Nom : <input type="text" name="nom"><br>
prenom : <input type="text" name="prenom"><br>
Age : <input type="number" name="age">
<input type="submit" value="Envoyer">
</form>
</p>
</body>
</html>
Voici le code php :
<html>
<body>
<?php
$nom = $_POST['nom'];
$prenom = $_POST['prenom'];
echo $nom." et ".$prenom;
if (isset($_POST['age'])){
$a = $_POST['age'];
if($a <20){
echo "vous êtes jeune !";
}
elseif($a <50){
echo "en pleine force de l'âge";
}
else{
echo "bientôt la retraite";
}
}
else{
echo "il faut remplir le formulaire <a href='formulaires.html#age'>ici</a>";
};
?>
</body>
</html>
.php
avec le code ci-dessus en liaison avec le formulaire.
Copiez la page html
suivante :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Récupérer un formulaire en Javascript - Les paramètres GET de la requête HTTP </title>
</head>
</body>
<form method="get" action="page.html">
<p>Nom : <input type="text" name="nom" /></p>
<p>Prénom : <input type="text" name="prenom" /></p>
<p><input type="submit" name="Submit" value="Soumettre" /></p>
</form>
</body>
</html>
Recopiez la page page.html
:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Récupérer un formulaire en Javascript - Les paramètres GET de la requête HTTP </title>
</head>
<body>
<div id="zone_text"></div>
</body>
<script>
var zone = document.getElementById("zone_text");
//Affiche les donées envoyées avec La méthode « search » retourne une chaîne de caractères contenant tous les paramètres
zone.innerHTML = window.location.search;
document.write( "<br><br>");
function twRequeteVariable(sVariable) {
// Éliminer le "?"
var sReq = window.location.search.substring(1);
// Matrice de la requête
var aReq = sReq.split("&");
// Boucle les variables
for (var i=0;i<aReq.length;i++) {
// Matrice de la variables / valeur
var aVar = aReq[i].split("=");
// Retourne la valeur si la variable
// demandée = la variable de la boucle
if(aVar[0] == sVariable){return aVar[1];}
}
// Aucune variable de trouvée.
return(false);
}
nom=twRequeteVariable("nom");
prenom=twRequeteVariable("prenom");
zone.innerHTML=zone.innerHTML+"<br>nom : "+nom+"<br>Prénom : "+prenom;
</script>
</html>