La fiche d’inscription
Au début de l’année, tu remplis une fiche : ton nom, ta classe, ton sport. Le secrétariat la lit et la range.
Sur un site, un formulaire fait la même chose. Tu remplis des champs, tu appuies sur envoyer, et le serveur reçoit tes réponses.
Mots-clés
| Mot | Ce que ça veut dire | Exemple |
|---|---|---|
| Formulaire | Un ensemble de champs que la personne remplit, puis envoie. | <form> |
| Champ | Une case où la personne tape ou choisit. | <input> |
| Nom du champ | L’attribut name. Il sert d’étiquette pour la valeur envoyée. | name="prenom" |
| GET | Envoi dans l’adresse. Tout le monde peut la lire. | ?prenom=Lina |
| POST | Envoi caché dans le corps de la requête, pas dans l’adresse. | un mot de passe |
| Vérification | Contrôler que la saisie est correcte avant de l’envoyer. | un âge entre 16 et 18 |
Les cellules que les étudiants remplissent restent vides dans cet aperçu.
Les champs d’un formulaire
La balise form entoure tout. Chaque champ est un input. L’attribut type dit sa sorte : text, email, number.
On associe un label à chaque champ avec for et id. Cliquer sur le texte active alors le champ.
L’attribut name est très important : sans lui, la valeur n’est pas envoyée.
À toi : ce qui est envoyé
<form id="formulaire">
<label for="prenom">Prénom</label>
<input id="prenom" name="prenom" value="Lina">
<label for="classe">Classe</label>
<input id="classe" name="classe" value="2nde3">
<button type="submit">Envoyer</button>
</form>
<p>Le navigateur enverrait : <code id="envoi"></code></p>
Exemple travaillé : de la saisie à l’envoi
| Champ | name | Saisie | Envoyé |
|---|---|---|---|
| Prénom | prenom | Lina | prenom=Lina |
| Classe | classe | 2nde3 | classe=2nde3 |
| Les deux ensemble | séparés par & | Lina et 2nde3 | ?prenom=Lina&classe=2nde3 |
Les cellules que les étudiants remplissent restent vides dans cet aperçu.
Contrôle rapide : les champs
À toi de jouer
Contrôle rapide : les champs
3 questionsTes réponses sont corrigées ici et ne sont pas conservées. Un compte garde tes résultats.
GET ou POST
Avec GET, les valeurs sont écrites dans l’adresse après un ?. On peut copier l’adresse, la mettre en favori, la partager.
Avec POST, les valeurs voyagent dans la requête, hors de l’adresse. On choisit POST pour un mot de passe ou pour créer quelque chose.
POST n’est pas secret pour autant : seul le protocole https protège la route.
GET et POST côte à côte
| GET | POST | |
|---|---|---|
| Où sont les valeurs | Dans l’adresse | Dans le corps de la requête |
| On peut partager le résultat | Oui | Non |
| Bon choix pour | Une recherche | Une inscription ou un mot de passe |
| Exemple | /recherche?ville=Lyon | Un formulaire d’inscription |
Les cellules que les étudiants remplissent restent vides dans cet aperçu.
À toi : vérifier un âge
<form id="inscription">
<label for="age">Ton âge (de 16 à 18 ans)</label>
<input id="age" name="age" type="number">
<button type="submit">Valider</button>
</form>
<p id="retour"></p>