Formulaires
Le HTML seul ne permet pas d’interactivité avec l’utilisateur : une page Web écrite en HTML est « statique » : à part quelques effets rendus possible depuis la version 5 de HTML, son contenu ne varie pas en fonction des caractéristiques de la demande (tous les internautes qui demandent la page reçoivent le même contenu).
À l’inverse, une page web dynamique est générée à la demande et son contenu varie en fonction des caractéristiques de la demande (heure, adresse IP de l’ordinateur du demandeur, formulaire rempli par le demandeur, etc.) qui ne sont connues qu’au moment de sa consultation.
Pour obtenir des pages dynamiques, il faut utiliser des langages tiers (Javascript, PHP, Python/Jinja, …).
Pourquoi des pages dynamiques ?
Le premier besoin en termes d’interactivité, c’est de donner la possibilité à l’utilisateur d’envoyer des données au serveur. C’est déjà ce qu’il fait en saisissant une URL, mais ce n’est pas particulièrement convivial …
Exemples de formulaires :
- authentification par identifiant et mot de passe
- recherche d’informations
- filtrage de données
- …
Dans chaque cas, la page qui s’affichera ensuite dépendra de ce que l’utilisateur a renseigné dans le formulaire.
Exemples :
- authentification par identifiant et mot de passe
→ une page avec le nom de l’utilisateur, … - recherche d’informations
→ une page avec les résultats de la recherche - filtrage de données
→ une page avec une partie seulement des données
Formulaire en HTML
Sur de nombreuses pages web, des formulaires sont utilisés que ce soit pour une authentification par identifiant et mot de passe ou pour une recherche d’informations. Le formulaire est un élément codé en HTML, en voici un exemple :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<form method="get" action="action.php">
<label for="ident">Votre identifiant</label> :
<input type="text" name="identifiant" id="ident"/>
<input type="submit" value="Envoyer"/>
</form>
</html>
Un formulaire se trouve contenu dans une balise <form>…</form> .
Parmi les attributs de cette balise, on ajoute la méthode HTTP utilisée (ici GET) et l’URL qui sera demandé lors de l’envoi du formulaire (action.php).
Ensuite, grâce à une balise <input … /> , on crée deux objets :
- un champ de type texte (ligne 3)
- et un bouton pour valider le formulaire (ligne 4).
Le champ de texte est précédé d’un label (balise <label>…</label>) référencé par ident . Cette référence est utilisée dans les attributs du champ de type texte (id= »ident » ) afin qu’un clic sur ”Votre identifiant” place le curseur dans le champ de texte correspondant. name= »identifiant » permet de définir une variable qui recevra le texte entré dans le champ et qui sera transmise à action.php .
- Copier/coller ce code dans un fichier HTML et l’ouvrir avec un navigateur.
- Remplir le champ de texte et valider : que se passe-t-il ? Pourquoi ?
- Observer la barre d’adresse du navigateur. Que constate-t-on de particulier en observant l’URL ?
Après Validation : erreur (le fichier action.php n’existe pas
Dans la barre d’adresse, pas de protocole http, mais file:// à la place ==> pas de requete dans la console
[/private]Tous les détails sur les formulaires
Méthodes HTTP GET ou POST
Lors de l’utilisation de la méthode GET dans un formulaire, les données sont transmises en clair dans la barre d’adresse du navigateur. Dans les faits, on obtient action.php?identifiant=<texte entré>.
Cela pose des problèmes de sécurité. En effet, au lieu du type « text », on peut utiliser le type « password ». Lors de l’entrée du mot de passe, les lettres sont remplacées par des points. Mais lors de l’envoi des données, le mot de passe apparaît en toutes lettres dans la barre d’adresse !
La méthode POST transmet les données dans le corps de la requête : les données sont donc moins visibles.
Modifier l’attribut method du formulaire et repérer à l’aide des outils de développement de Firefox, dans les deux cas (GET et POST) l’emplacement des données transmises.
Gestion des données
Pour gérer les données provenant du formulaire, on utilise un script PHP action.php .
PHP est un langage impératif orienté objet.
Le langage PHP a été créé en 1994 par Rasmus Lerdorf pour son site web.
Dans du code HTML, les scripts PHP doivent être intégrés dans une balise <?php … ?> .
Le code le plus simple possible est le suivant :
<html> <body> <?php echo $_POST['identifiant']; ?> </body> </html>
Copier/coller ce code dans un fichier nommé action.php et placé dans le même répertoire que le fichier HTML précédent.
On suppose que la méthode utilisée dans l’envoi du formulaire est POST. Grâce à PHP, on peut alors récupérer le texte et l’afficher.
PHP est un langage de script exécute au niveau du serveur. Celui-ci doit évidemment accepter de gérer le PHP. Pour tester le formulaire et le script en local, on peut installer WAMP sous Windows, MAMP sous Mac OS X ou LAMP sous Linux.
AMP est l’acronyme de Apache (serveur web), MySQL (gestionnaire de base de données), PHP.
Il existe une version portable de WAMP : UwAMP
Réaliser une page HTML contenant un formulaire permettant de saisir :
- un identifiant : champ de type text
- un mot de passe : champ de type password
- un bouton pour valider : type submit
La validation de ce formulaire doit entrainer l’exécution d’un script PHP qui génère une page HTML qui affiche :
- « Bienvenue <identifiant> ! » si l’authentification a réussi
- « Échec d’authentification » dans le cas contraire
ATTENTION : pour des raisons évidentes de sécurité, les identifiants d’authentification ne doivent pas figurer en clair dans l’URL !
Le(s) couple(s) identifiant/mot de passe corrects seront mémorisés dans des variables dans le script PHP.
Sources : https://cache.media.eduscol.education.fr/file/NSI/77/1/RA_Lycee_G_NSI_ihm_interaction_client_serveur_1170771.pdf
https://perso.univ-lyon1.fr/olivier.gluck/Cours/Supports/LIFASR2/LIFASR2-CM4.pdf
