Lycée   >   Premiere   >   NSI   >   Comprendre le fonctionnement d'un formulaire

Comprendre le fonctionnement d'un formulaire

  • Fiche de cours
  • Quiz
  • Profs en ligne
Objectif

Comprendre le fonctionnement d’un formulaire simple qui transmet les données par un passage des paramètres via l’URL.

Points clés

Lorsqu’on remplit un formulaire simple, les réponses sont transmises par l’URL et sont donc accessibles par une tierce personne.

Pour bien comprendre
  • Le modèle client/serveur (SNT 2de)
  • Les protocoles de transfert du web – HTTP et HTTPS (SNT 2de)
  • L’URL (SNT 2de)
1. La syntaxe d'une URL et d'un formulaire
a. L'URL
Une URL est une adresse qui est liée à une ressource donnée et qui reste unique sur le web.

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://nom:port/document?paramètres de requêtes#id
  • 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.
Exemple
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.
b. Le formulaire HTML
Un formulaire HTML est un moyen de demander de l’information à un client et de les adresser à un serveur web.

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.
Exemple
Voici le code HTML et le formulaire généré par celui-ci.
Le prénom sera envoyé à « https://mapage.fr ».
Remarque
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>
2. Envoi d'un formulaire : passage des paramètres au serveur

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.

Remarque
« 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.

GET /form?prenom=CLAIRE&matiere=NSI HTTP/1.1
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 !

Comment as-tu trouvé ce cours ?

Évalue ce cours !

 

Question 1/5

La médiane de 6 notes est 13. Cela signifie que :

Question 2/5

On a obtenu la série statistique suivante :

Combien vaut la médiane ?

Question 3/5

On a obtenu la série ci-dessous :

Quelle est la médiane de cette série ?

Question 4/5

On a relevé les tailles en cm des élèves d’une classe :

 

Parmi les propositions suivantes, laquelle est vraie ?

Question 5/5

Les notes en français de deux classes littéraires sont données dans le tableau suivant :

Quelle est la note médiane ?

Vous avez obtenu75%de bonnes réponses !

Recevez l'intégralité des bonnes réponses ainsi que les rappels de cours associés :

Votre adresse e-mail sera exclusivement utilisée pour vous envoyer notre newsletter. Vous pourrez vous désinscrire à tout moment, à travers le lien de désinscription présent dans chaque newsletter. Pour en savoir plus sur la gestion de vos données personnelles et pour exercer vos droits, vous pouvez consulter notre charte.

Une erreur s'est produite, veuillez ré-essayer

Consultez votre boite email, vous y trouverez vos résultats de quiz!

Découvrez le soutien scolaire en ligne avec myMaxicours

Le service propose une plateforme de contenus interactifs, ludiques et variés pour les élèves du CP à la Terminale. Nous proposons des univers adaptés aux tranches d'âge afin de favoriser la concentration, encourager et motiver quel que soit le niveau. Nous souhaitons que chacun se sente bien pour apprendre et progresser en toute sérénité ! 

Fiches de cours les plus recherchées

NSI

La transmission d'un formulaire avec GET ou POST

NSI

Reconnaitre différents constituants d'un ordinateur

NSI

Comprendre la structure des circuits combinatoires

NSI

Exécuter une séquence d'instructions

NSI

Comprendre la notion de réseau et de protocole

NSI

Comprendre les protocoles de la couche physique

NSI

Comprendre les protocoles de la couche liaison dans un réseau local

NSI

Comprendre les protocoles de la couche réseau

NSI

Comprendre les protocoles de la couche transport

NSI

Décrire des protocoles de récupération de paquets