Comprendre le fonctionnement d'un formulaire
- Fiche de cours
- Quiz
- Profs en ligne
- Videos
- Application mobile
Comprendre le fonctionnement d’un formulaire simple qui transmet les données par un passage des paramètres via l’URL.
Lorsqu’on remplit un formulaire simple, les réponses sont transmises par l’URL et sont donc accessibles par une tierce personne.
- Le modèle client/serveur (SNT 2de)
- Les protocoles de transfert du web – HTTP et HTTPS (SNT 2de)
- L’URL (SNT 2de)
URL (Uniform Ressource Locator en anglais) signifie « localisateur uniforme de ressource ». Elle est est composée de différentes parties qui s’agencent de la manière suivante.
- Protocole utilisé : http, https, ftp, etc.
- Nom : nom de domaine ou adresse du site.
- Port utilisé : on peut éventuellement spécifier le port de connexion (c’est un système permettant aux ordinateurs de préciser les « lieux » où ils vont recevoir ou émettre des informations).
- Document : précise le chemin du document à atteindre.
-
Paramètres de requêtes :
pour ajouter des critères à une
requête, on tape nom=valeur
séparées par des &.
Exemple
L’ajout de n1=v1&n2=v2&n3=v3 permet de rajouter comme critères : n1 doit valoir v1, n2 doit valoir v2 et n3 doit valoir v3. - #id : signet qui permet d’identifier un élément HTML particulier.
http://www.nsiforever.fr/liste.html?classe=Premiere&lycee=Dumont
Cette URL permettra d’accéder au fichier liste du site nsiforever.fr avec les paramètres classe=Premiere et lycee=Dumont.
On utilise pour cela les balises <form> et </form> en précisant l’attribut action qui précise l’URL où les données seront envoyées.
Les données seront saisies par le client dans des champs de saisies matérialisés par les balises <input type="..." value="..."></input> ou <input type="..." value="..."/>.
Les " … " représentent :
- le type de la donnée à saisir pour l’attribut type ;
- le nom donné à cette valeur pour l’attribut value.
Voici le code HTML et le formulaire généré par celui-ci.
Il existe d’autres types de formulaire.
- Pour obtenir une liste à cocher avec
différents choix (bouton
« radio »), on utilisera
la ligne de code suivante.
<input type="radio" name="choix" value="0">Choix1</input>
<input type="radio" name="choix" value="0">Choix2</input>
… - Pour obtenir une liste déroulante avec
différents choix, on utilisera le bout de
code suivant.
<select name="choix">
<option value="choix1">Choix1</option>
<option value="choix2">Choix2</option>
…
</select>
Lors de l’envoi du formulaire, les paramètres, c’est-à-dire les informations saisies par l’utilisateur, sont passés au serveur en utilisant l’URL et la méthode GET.
Si on tape par exemple « CLAIRE » dans la case d’un formulaire envoyant ses données à http://maxicours.fr, la requête HTTP envoyée par le navigateur sera la suivante.
GET /form?prenom=CLAIRE HTTP/1.1 | Requête GET. |
Host: maxicours.fr | Précision de l’URL où les données sont envoyées. |
Le navigateur chargera alors la page en http://maxicours.fr/form?prenom=CLAIRE.
« Host » indique l’adresse URL où doit être envoyé le formulaire.
Si on ajoute un champ matière au formulaire précédent, et que Claire indique « NSI » dans ce champ, la requête HTTP envoyée par le navigateur sera la suivante.
Host: mapage.fr
Le navigateur chargera alors la page en http://maxicours.fr/form?prenom=CLAIRE&matiere=NSI.
Cela peut générer des problèmes car la longueur d’une URL ne peut pas dépasser 2048 caractères. Les données du formulaire sont de plus transmises de manière visible, ce qui ne convient pas pour des données personnelles et/ou sensibles !
Vous avez obtenu75%de bonnes réponses !