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 wpasse 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>