Création des formulaires

⏬

1 - GET et POST

2 - formulaire

3 - autres

4 - input texte

5 - autres balises

6 - Texte long

7 - FAQ

Le Web est basé sur la structure client-serveur.
Nous étudirons cette notion un peu plus tard dans le chapitre Architecture-Communication Client-Serveur.

Requête - Traitement - Réponse

Un client peut envoyer des paramètres à un serveur à l'aide de deux méthodes : GET ou POST.

Nous allons voir aujourd'hui comment générer aujourd'hui de telles requêtes avec une interface HTML créée pour cela : le formulaire.

L'activité est divisée en trois mini-activités.

Cette première activité ne traite quasiment que du HTML. Elle fait un inventaire des différentes outils disponibles via les formulaires.
La suivante vous présente comment javascript peut valider les formulaires avant de les envoyer au serveur.
Dans la dernière, dans la mesure du possible, nous utiliserons un petit serveur pédagogique en Python pour voir comment on peut gérer (sur la machine distante) les paramètres reçus par l'utilisateur pour réaliser une action.

Logiciels : Il faudra utiliser un éditeur de code.
On propose ici d'utiliser Atom produit par Githhub, aujourd'hui possédé par Google, ou Notepad ++ (Notepadqq sur Linux). Sublim Text est également une alternative de qualité.

Prérequis :

les activités Javascript précédentes et
Python-Encodage des textes, juste pour mieux comprendre les "caractères" bizarres qui apparaissent parfois.

1 - Requêtes GET et POST

⇩ ⇧ ⤊

Le Web est basé sur la structure client-serveur.
Le client informe le serveur de la page voulue à travers l'URL : derrière l'adresse du serveur, on peut donner un chemin.

1 Requête - 2 - Traitement - 3 - Réponse — Requête - Traitement - Réponse

Exemple d'URL : https://www.levavasseur.xyz/NSI/IHM/Intro_Formulaire.html.

Protocole : https://
Adresse du service : www.levavasseur.xyz à transformer en IP avec un service DNS
Chemin de la demande : /NSI/IHM/Intro_Formulaire.html

01° Le chemin de la requête sur le serveur (en orange ici) forme-t-il une adresse absolue par rapport à la racine du site ou une adresse relative ?

/NSI/IHM/Intro_Formulaire.html

Correction ?

...CORRECTION...

Le chemin commence par un slash : il s'agit d'une adresse absolue par rapport à la racine du site.

//NSI/IHM/Intro_Formulaire.html

Nous avons vu qu'un client peut envoyer des paramètres à un serveur à l'aide de deux méthodes :

Types de requêtes envoyées :

Méthode GET : paramètres dans l'URL

La méthode GET permet de discuter très facilement avec le serveur puisqu'on peut placer les paramètres qu'on veut lui transmettre directement dans l'URL.

Vous voulez par exemple vous connecter à la page NSI Première sur le site www.levavasseur.xyz.

Exemple de message GET pour se connecter au site :


    GET /NSI/ HTTP/2↲

    Host: www.levavasseur.xyz↲




    User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:83.0) Gecko/20100101 Firefox/83.0↲


    Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8↲


    Accept-Language: fr,fr-FR;q=0.8,en-US;q=0.5,en;q=0.3↲


    Accept-Encoding: gzip, deflate, br↲


   

	Referer: https://www.levavasseur.xyz/↲


    Connection: keep-alive↲


    Upgrade-Insecure-Requests: 1↲


    Cache-Control: max-age=0↲


    TE: Trailers↲




BODY VIDE !


FIN DE LA REQUETE

Un exemple de réponse possible envoyée par le serveur :


	
	HTTP/2 200 OK

	date: Wed, 25 Nov 2020 20:05:00 GMT

	content-type: text/html

	content-length: 1132

	server: Apache

	accept-ranges: none

	vary: Accept-Encoding

	content-encoding: gzip

	X-Firefox-Spdy: h2

	

	<!DOCTYPE html... : la suite, c'est le fichier html !
	
	FIN DE LA REQUETE

Exemple de requête GET envoyant un paramètre user valant toto et un paramètre password valant 1234 :


    GET /NSI/IHM/Intro_Formulaire.html?user=toto&password=1234 HTTP/2↲

    Host: www.levavasseur.xyz↲


    User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:77.0) Gecko/20100101 Firefox/77.0↲


    Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8↲


    ...




BODY VIDE !


FIN DE LA REQUETE

On voit que la séquence des paramètres commence avec ? et qu'ils sont séparés par des & .

Méthode POST : paramètres dans le body de la requête

La méthode GET est pratique mais si vous devez envoyer beaucoup de données, l'URL va être très très longue.

Autre désavantage : si vous passez un mot de passe en GET en https, le message est crypté OK.
Personne ne peut lire votre mot de passe sur le réseau. C'est vrai. Mais le mot de passe sera noté en clair dans votre URL.
Il suffit donc de regarder par dessus votre épaule pour le connaître !

Dans ces deux cas, on préférera la méthode de transfert vers le serveur en POST : cette fois, le client va transmettre les données fournies (paramètres, fichiers...) dans le BODY.
C'est pour cela que le BODY de la méthode GET est vide. On n'y place rien.

POST : les paramètres vont se trouver dans le corps de la requête et pas directement dans l'adresse

Exemple de requête POST envoyant un paramètre user valant toto et un paramètre password valant 1234 :


    POST /NSI/IHM/Intro_Formulaire.html HTTP/2↲

    Host: www.levavasseur.xyz↲


    User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:77.0) Gecko/20100101 Firefox/77.0↲


    Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8↲


    ...





user=toto&password=1234


FIN DE LA REQUETE

Cette fois, on remarque que les paramètres ne sont pas dans l'URL, ni même dans les autres éléments de l'en-tête. Non : les paramètres sont bien dans le corps du message lui-même. Sous forme d'un simple texte.
Les paramètres sont toujours néanmoins séparés par & .

Créer un requête GET à la main est assez facile.
Au pire, il suffit de taper l'URL dans le navigateur.
Mais pour faire du POST, c'est plus délicat.

Nous allons voir justement dans la partie suivante une nouvelle balise qui intègre tout ce qu'il faut pour générer proprement des requêtes GET ou POST en fonction de ce que l'utilisateur désire envoyer.
Et cette balise est la balise <form>, comme formulaire.

✎ 02° On tente de joindre un serveur avec une URL de ce type :

www.levavasseur.xyz/question_trop_difficile/?difficulte=outch&note=4

A-t-on transmis des paramètres ? Lesquels ? Quelles sont leurs valeurs ?

A-t-on affaire à du GET ou du POST ?

2 - Création d'un formulaire

⇩ ⇧ ⤊

Balise form, pour formulaire

Un formulaire est un objet créé pour simplifier l'envoi de paramètres-utilisateurs vers un serveur.

On crée un formulaire en utilisant la balise <form> sur laquelle on place souvent au moins deux attributs :

On choisit l'adresse à laquelle envoyé la requête sur le serveur à l'aide d'un attribut action.
On choisit la méthode d'envoi à l'aide d'un attribut method.

Pour du GET

1
2

<form action="/gestion_formulaire" method="get">
</form>

Ici, on va donc envoyer les paramètres fournis par l'utilisateur en utilisant un GET (paramètres dans l'URL) et en utilisant l'adresse absolue "/gestion_formulaire".

Pour du POST

1
2

<form action="/pagedereception" method="post">
</form>

Ici, on va donc envoyer les paramètres fournis par l'utilisateur en utilisant un POST (paramètres dans l'URL) et en utilisant l'adresse absolue "/pagedereception".

Contenu du formulaire

Nous avons défini à qui et comment le formulaire allait être adressé. Reste à voir ce qu'on envoie.

L'intérieur de la balise va contenir notamment différentes balises orphélines input permettant de créer des widgets affichant des informations et permettant à l'utilisateur de répondre à la question posée. L'une des balises quasi-obligatoires est une balise-bouton permettant de provoquer l'envoi. Ces balises provoquent l'apparition d'un widget encorporant une bonne dose de code de contrôle javascript et de décoration CSS.

Nous allons sur cet exemple y placer une balise input de type number permettant d'envoyer un nombre et une balise input de type submit (un bouton partculier) permettant de provoquer l'envoi de la requête (et ses paramètres) vers l'adresse définie dans l'attribut action.

<form action='https://www.infoforall.fr/act/tester-le-post/' method='get'>
    <input type="number" name="note">
    <input type="submit" value="Envoyer le formulaire !">
</form>

Effet de ce code avec un GET sur ce site :

<form action='https://www.infoforall.fr/act/tester-le-post/' method='get' target='_blank'>
    <input type="number" name="note">
    <input type="submit" value="Envoyer le formulaire !">
</form>

03° Utiliser le formulaire ci-dessus en y plaçant une valeur à l'aide du widget.

Questions

Combien a-t-on transmis de paramètres ?
Comment se nomme(nt) le(les) paramètre(s) ?
A quoi voit-on qu'on a bien transmis une requête GET ?

Correction ?

...CORRECTION...

Combien a-t-on transmis de paramètres ?

On obtient ceci par exemple : GET /act/tester-le-post/?note=45 HTTP/1.1↲

On voit qu'il n'y a pas de & et qu'il n'y a donc qu'un seul paramètre.

Comment se nomme(nt) le(les) paramètre(s) ?

On a note=45. On peut donc en déduire qu'il se nomme note et qu'il vaut 45.

A quoi voit-on qu'on a bien transmis une requête GET ?

Le paramètre est transmis directement dans l'URL : c'est du GET.

Effet de ce code avec un POST sur ce site :

<form action='https://www.infoforall.fr/act/tester-le-post/' method='post' target='_blank'>
    <input type="number" name="note">
    <input type="submit" value="Envoyer le formulaire !">
</form>

04° Quelle est la seule différence dans le code des deux formulaires (celui du GET et celui du POST) ?

Correction ?

...CORRECTION...

La seule différence est la valeur de l'attribut method.

Le formulaire d'un POST est sinon identique au formulaire pour du GET.

05° Utiliser le formulaire ci-dessus en y plaçant une valeur à l'aide du widget.

Questions

Combien a-t-on transmis de paramètres ?
Comment se nomme(nt) le(les) paramètre(s) ?
A quoi voit-on qu'on a bien transmis une requête POST ?

Correction ?

...CORRECTION...

Combien a-t-on transmis de paramètres ?

On obtient ceci par exemple : POST /act/tester-le-post/ HTTP/1.1↲

Le paramètre est plus bas (note=45), dans le corps du message.

Comment se nomme(nt) le(les) paramètre(s) ?

Toujours note.

A quoi voit-on qu'on a bien transmis une requête POST ?

Le paramètre est transmis dans le corps du message par l'action du forulaire.

06° Utiliser un éditeur de texte pour créer un fichier HTML (encodé en UTF-8) en utilisant le code ci-dessous. Il faudra le sauvegarder sous le nom tests.html et le placer dans une arborescence similaire à celle présentée ci-dessous :

📁 activite_formulaire

📁 www

📄 tests.html

La page HTML générée vous permettra de voir rapidement un peu tout ce qu'on peut faire avec les inputs de type number.

<!DOCTYPE html>
<html>
 
<head>
    <link rel="stylesheet" href='monstyle.css' />
</head>
 
<body>
    <h1>Page permettant de visualiser les différents widgets-input</h1>
    <form action='' method='get'>
        <p>Type number sans précision : <input type="number" name="note"></p>
        <p>Type number avec valeur par défaut : <input type="number" name="note2" value="50"></p>
        <p>Type number avec 10 d'écarts sur les boutons : <input type="number" name="note3" value="50" step="10"></p>
        <p>Type number avec min et max : <input type="number" name="note4" min="0" max="20"></p>
        <input type="submit" value="Envoyer le formulaire !">
    </form>
</body>
 
</html>

Une fois ce fichier créé, il vous reste à le lancer en cliquant dessus.

L'un des intérêts de cette interface sur mobile est qu'elle peut faire apparaitre un clavier lorsque l'utilisateur veut répondre.

07° Visualiser les différents attributs donnés aux inputs pour en comprendre l'intérêt. Tenter notamment pour chacun d'entre eux de placer une valeur à la main directement dans la zone ou en cliquant sur les petites flèches.

Que se passe-t-il si on place un texte dans ces zones destinées à accueillir des nombres Tenter d'appuyer sur le bouton submit après y avoir placé un texte ou une valeur trop grande dans le cas du input avec un maximum défini.

Correction ?

...CORRECTION...

On constate qu'en cas de valeur non valide, le navigateur entoure automatiquement le widget d'un contour rouge.

Les erreurs provoquent l'apparition d'une bordure rouge — Intérêt des widgets input sur les erreurs de paramètres

Si on tente d'envoyer néanmoins, un petit texte explicatif apparaît près de la première erreur.

08° Pourquoi ne pas donner les mêmes attributs name à tous les input ?

Correction ?

...CORRECTION...

Tout simplement pour éviter d'envoyer une requête contenant quelque chose comme cela au serveur qui va traiter notre demande :

note=5&note=8&note=15&note=2.

Difficile de s'y retrouver si on donne le même nom à tous !

C'est plus simple si le serveur reçoit quelque chose comme ceci :

note=5&note2=8&note3=15&note4=2.

Nous allons un petit tour des balises typiques, qu'on rencontre souvent dans les formulaires en ligne. A chaque fois, vous aurez le résultat visuel avec votre navigateur et le code nécessaire pour le construire.

Les balises input sont des balises inline : elles ne provoquent pas de passages à la ligne. Si vous ne voulez qu'une balise par ligne, il faut donc la placer dans une balise block, un paragraphe par exemple.

3 - Quelques inputs bien pratiques

⇩ ⇧ ⤊

Nous avons vu comment demander un nombre à l'aide d'une balise input, ce qui fournit un certain nombre de contrôle et de vérification automatique de la réponse.

Voyons quelques autres valeurs de l'attribut type.

Exemple 1 : Input de type color

Pour demander à l'utilisateur de fournir une couleur.

Visuel

Code HTML

<form action='https://www.infoforall.fr/act/tester-le-post/' method='get'>
    <input type="color" name="exemple1">
    <input type="submit" value="Envoyer !">
</form>

Si vous sélectionnez du rouge vif, le code hexadécimal des trois valeurs (R,G,B) étant (FF, 00, 00), vous allez envoyer une requête vers le serveur contenant ?exemple1=%23ff0000. Un code sur le serveur devra donc décomposer la réquête pour retrouver ces valeurs.

09° Tester le formulaire en choississant une couleur et en regardant ce que reçoit le serveur.

URL et ASCII

Lors de la transmission réelle de la requête sur le réseau, on ne peut utiliser que des caractères ASCII. On remplace également certains caractères ASCII s'ils sont jugés dangereux (ils peuvent permettre avec une bonne utilisation de détourner le fonctionnement normal du serveur).

C'est le cas du caractère dièse #.

Le client veut envoyer ceci #ff0000, comme lorsqu'on définit une couleur en CSS.

Mais il ne peut pas : le caractère # est jugé 'unsafe'.

On remplace alors # par le caractère % (qui lui est ASCII) suivi du code hexadécimale du dièse en UTF-8 : 23.

Et voilà : # se transforme en %23.

Le code-couleur #ff0000 se transforme donc en %23ff0000.

10° Vous pouvez vérifier cette affirmation en tapant ceci dans un Shell Python :


>>> ord('#')
35
 
>>> hex(ord('#'))
'0x23'
 
>>> for octet in ('#'.encode('utf-8')) : print(hex(octet))
0x23

11° Utiliser le formulaire suivant pour envoyer une date.

Exemple 2 : Input de type date

Pour demander à l'utilisateur de fournir une ...date.

Visuel

Code HTML

<form action='https://www.infoforall.fr/act/tester-le-post/' method='get'>
    <input type="date" name="exemple2">
    <input type="submit" value="Envoyer !">
</form>

Si vous sélectionnez le 5 février 2020, vous allez envoyer une requête vers le serveur contenant ?exemple2=2020-02-05. Un code sur le serveur devra donc décomposer la réquête pour retrouver ces valeurs.

12° Utiliser le formulaire suivant pour envoyer un horaire.

Exemple 3 : Input de type time

Pour demander à l'utilisateur de fournir un horaire.

Visuel

Code HTML

<form action='https://www.infoforall.fr/act/tester-le-post/' method='get'>
    <input type="time" name="exemple3">
    <input type="submit" value="Envoyer !">
</form>

On notera que ce formulaire oblige bien à choisir une heure entre 00:00 et 23:59.

Avec 22:10, le serveur reçoit ?exemple3=22%3A10.

✎ 13° Utiliser le formulaire suivant qui permet de choisir un nombre avec un bouton à glissière.

Question

Fournir le code d'un formulaire permettant de gérer par exemple le volume d'un son de 0 à 100 par tranche de 1.

Exemple 4 : Input de type range

Pour demander à l'utilisateur de fournir un nombre avec un bouton à glissière.

Ici, on peut envoyer entre -10 et 20 avec des variations de 5 : -10, -5, 0, 5 ...

Visuel

Code HTML

<form action='https://www.infoforall.fr/act/tester-le-post/' method='get'>
    <input type="range" name="exemple4" min="-10" max="20" step="5">
    <input type="submit" value="Envoyer !">
</form>

Petite pause sur les envois de données. Voyons les trois variantes de boutons typiques.

Nous avons déja rencontré le bouton SUBMIT et le bouton générique BUTTON. Nous allons voir le bouton RESET qui permet de remettre les champs du formulaire à zéro.

Attention, c'est bouton en français mais button en anglais.

14° Utiliser le formulaire suivant qui comporte trois boutons. Vérifier qu'on parvient bien à réaliser une action quelconque avec le type button, à mettre les champs du formulaire à zéro avec reset et à envoyer le formulaire avec submit.

Input provoquant l'apparition d'un bouton

Le type submit provoque l'envoi des réponses du formulaire vers la page indiquée en début de formulaire
Le type reset provoque la remise à zéro des réponses
Le type button provoque l'apparition d'un simple bouton dont il faut gérer les événements (ici avec un simple attribut onclick.

Différence fondamentale avec les autres inputs : ici, aucune valeur n'est transmise au serveur. L'attribut value ne sert qu'à définir ce qui va s'afficher sur le bouton.

Visuel

Code HTML

<form action='https://www.infoforall.fr/act/tester-le-post/' method='get'>
    <input type="number" name="note" value="5">
    <input type="button" onclick="note.value = parseInt(note.value) + 1;" value="+1">
    <input type="reset" value="Effacer les choix">
    <input type="submit" value="Envoyer le formulaire !">
</form>

Remarque sur le javascript

Nous verrons dans l'activité suivante comment nous parvenons à gérer ces modifications alors qu'il n'y a aucune utilisation de méthodes comme getElementById ou autres variantes.

Trois derniers types de balises input, plutôt visuelles : les cases à cocher, les images à cliquer et les explorateurs de fichiers.

Exemple 5 : input de type checkbox

Pour fournir à l'utilisateur un choix correspondant à des boutons à cocher.

Visuel : sans label associé, on ne sait pas ce qu'on valide exactement

Pour rendre le formulaire plus compréhensible, on l'associe souvent à un texte à l'aide d'une balise faite pour ça : la balise label. Cette balise est mieux qu'un span en terme d'accessibilité pour les non-voyants : on associe clairement le texte à la zone en fournissant l'identifiant de la balise à cocher avec l'attribut for.

Visuel avec label associé

Code HTML

<form action='https://www.infoforall.fr/act/tester-le-post/' method='get'>

    <label for="pigeon">Accepter toutes les conditions d'utilisation ?</label>

    <input id="pigeon" type="check" name="exemple5">

    <input type="submit" value="Envoyer !">
</form>

15° Cliquer sur la case et envoyer le formulaire. Comment le programme serveur sait-il que la case est cochée ? Désactiver le choix. Envoyer le formulaire. Comment est codée ce non-choix ?

Correction ?

...CORRECTION...

Si on coche, on envoie ceci : ?exemple5=on.

Si on ne coche pas la case, on envoie simplement pas de paramètres. Ca aurait pu être ?exemple5=off. Mais non !

Pour finir ce petit inventaire, voici deux derniers widgets pratiques. Sachez qu'il en reste encore à découvrir. Je vous laisse voir ce qu'ils transmettent en les utilisant.

Exemple 7 : Input de type file

Pour demander à l'utilisateur de fournir un nom de fichiers.

Visuel

Code HTML

<form action='https://www.infoforall.fr/act/tester-le-post/' method='get'>
    <input type="file" name="exemple7">
    <input type="submit" value="Envoyer !">
</form>

Exemple 8 : Input de type image

Pour remplacer le bouton de validation par une image. Par rapport au bouton, on envoie en plus au serveur les coordonnées en pixels. Il suffit de cliquer !

Visuel

Code HTML

1
2
3

<form action='https://www.infoforall.fr/act/tester-le-post/' method='get'>
    <input type="image" name="exemple8">
</form>

En cliquant sur l'image, on envoie alors au serveur les coordonnées sur lesquelles on vient de cliquer. Par exemple, si on clique sur l'oeil de la zone jaune, on obtient ?exemple8.x=91&exemple8.y=116. Le serveur est donc informé qu'on vient de cliquer sur l'image aux coordonnées (x=91, y=116).

4 - Les balises input texte

⇩ ⇧ ⤊

C'est bien beau tout ça mais beaucoup d'applications demandent d'envoyer du texte au serveur. Alors, on fait comment ?

Exemple 9 : Input de type text

Pour demander à l'utilisateur de saisir un texte.

Visuel

Code HTML

<form action='https://www.infoforall.fr/act/tester-le-post/' method='get'>
    <input type="text" name="exemple9">
    <input type="submit" value="Envoyer !">
</form>

✎ 16° Envoyer un texte comme "Bonjour" puis "Bonjour à tous" puis "Bonjouràtous". Fournir la première ligne reçue par le serveur.

Par quel caractère est remplacé l'espace lors du transfert ?

Par quels caractères est remplacé le à lors du transfert ?

On remarquera qu'on obtient un tel résultat car le à n'est pas un caractère ASCII : cela veut dire que son code UNICODE est supérieur à 127.

Le caractère est donc encodé en UTF-8 lors de son transfert. Or, en UTF-8, le à est représenté par deux octets dont les valeurs hexadécimales sont C3 et A0. Plus de précision dans FAQ pour ceux qui veulent.

Exemple 10 : Input de type password

Pour demander à l'utilisateur de saisir un texte de type mot de passe : lorsqu'on tape, les caractères sont remplacés à l'écran par un caractère unique. Ca évite de pouvoir lire le mot de passe de quelqu'un.

Visuel

Code HTML

<form action='https://www.infoforall.fr/act/tester-le-post/' method='get'>
    <input type="password" name="exemple10">
    <input type="submit" value="Envoyer !">
</form>

✎ 17° Taper un mot de passe dans la zone de texte. Le mot de passe apparaît-il dans la requête, en clair ?

Quel protocole de communication doit-on utiliser pour crypter cette valeur lors du transfert entre le client et le serveur ?

Le problème du texte pour encoder un contenu, c'est qu'à la moindre erreur de frappe ou oubli de caractère, l'information va être indéchiffrable pour un système automatisé. Voyons quelques balises permettant de faire une première vérification automatique avant d'envoyer les paramètres au serveur distant.

18° Activer chacun des widgets suivants. Appuyer ensuite sur le bouton d'envoi du formulaire de façon à voir comment l'information a été transmise.

Exemple 11 : input de type URL

Pour demander à l'utilisateur de saisir une ... URL, Unique Resssource Locator. Vérification de la validité apparente.

Tentez avec www.infoforall.fr puis avec https:www.infoforall.fr.

Visuel

Code HTML

<form action='https://www.infoforall.fr/act/tester-le-post/' method='get'>
    <input type="url" name="exemple11">
    <input type="submit" value="Envoyer !">
</form>

Exemple 12 : input de type email

Pour demander à l'utilisateur de saisir une adresse email. Vérification de la validité apparente. Ouverture d'un clavier sur portable.

Visuel

Code HTML

<form action='https://www.infoforall.fr/act/tester-le-post/' method='get'>
    <input type="email" name="exemple12">
    <input type="submit" value="Envoyer !">
</form>

Exemple 13 : input de type search

Pour fournir à l'utilisateur une zone de saisie pour sa recherche. L'apparence varie beaucoup d'un navigateur à l'autre.

Visuel

Code HTML

<form action='https://www.infoforall.fr/act/tester-le-post/' method='get'>
    <input type="search" name="exemple13">
    <input type="submit" value="Envoyer !">
</form>

5 - Les autres balises

⇩ ⇧ ⤊

Il existe également des balises de formulaires qui fonctionnent un peu différemment que les balises input.

✎ 19° Utiliser le formulaire suivant qui permet de choisir une option d'abonnement.

Question

Fournir le code d'un formulaire permettant de choisir un jeu ou un film parmi 4 possibilités.

Fournir ensuite la première ligne de la requête reçue par le serveur suite à l'un des choix.

Exemple 14 : Select

Pour demander à l'utilisateur de répondre en choississant l'une des réponses disponibles, predéfinies.

Cette fois, on utilise une balise nommée select à l'intérieur de laquelle on place les valeurs disponibles sous la forme de balise option.

Visuel

Code HTML

<form action='https://www.infoforall.fr/act/tester-le-post/' method='get'>
    <select name="exemple14">
        <option value="choix1">Gratuit !</option>
        <option value="choix2">Basique</option>
        <option value="choix3">Grand luxe</option>
    </select>
    <input type="submit" value="Envoyer !">
</form>

Sur cet exemple, le choix 'Basique' provoque cet envoi : ?exemple5=choix2. On voit donc bien que c'est uniquement la valeur de l'attribut value qui est fourni au serveur. Si le serveur ne connait pas la correspondance entre choix2 et Basique, il risque de ne pas pouvoir faire grand chose. Le innerHTML des balises options n'est lié qu'à l'affichage sur le poste du client.

20° Utiliser le formulaire suivant qui permet de choisir trois enseignements de spécialités en cliquant trois fois. Il faut appuyer sur CTRL ou COMMAND pour sélectionner d'autres choix après le premier.

Exemple 15 : Select multiple

Pour demander à l'utilisateur de répondre en choississant plusieurs réponses disponibles, predéfinies. Il faut appuyer sur CTRL ou COMMAND pour sélectionner d'autres choix après le premier.

La balise select est munie de deux nouveaux attributs :

multiple pour informer qu'on veut activer le choix multiple
size n'indique pas le nombre de réponses possibles mais le nombre de lignes de choix à afficher. S'il a plus de choix, le navigateur active automatiquement la barre de défilement.

Visuel

Code HTML

<form action='https://www.infoforall.fr/act/tester-le-post/' method='get'>
    <select name="exemple15" multiple size="5">
        <option value="ARTS">Arts</option>
        <option value="BE">Biologie-écologie</option>
        <option value="HGGSP">Histoire-géographie, géopolitique et sciences politiques</option>
        <option value="HLP">Humanités, littérature et philosophie</option>
        <option value="LLCE">Langues, littératures et cultures étrangères</option>
        <option value="LLCA">Littérature, langues et cultures de l’Antiquité</option>
        <option value="MATH">Math</option>
        <option value="NSI">Numérique  et  sciences  informatiques</option>
        <option value="PC">Physique-chimie</option>
        <option value="SVT">Sciences de la vie et de Terre</option>
        <option value="SI">Sciences de l'ingénieur</option>
        <option value="SES">Sciences économiques et sociales</option>
    </select>
    <input type="submit" value="Envoyer !">
</form>

Si on sélectionne les trois premiers, on obtient cet envoi sur le serveur : ?exemple6=ARTS&exemple15=BE&exemple15=HGGSP

6 - Envoi d'un texte long

⇩ ⇧ ⤊

Dernière remarque : comment l'utilisateur peut-il transférer un long texte ?

Exemple 15 : Textarea

Pour permettre à l'utilisateur de renvoyer un texte long de plusieurs lignes. Les autres balises textes ne le permettant pas.

Visuel

Code HTML

<form action='https://www.infoforall.fr/act/tester-le-post/' method='post'>
    <textarea name="exemple15"></texarea>
    <input type="submit" value="Envoyer !">
</form>

7 - FAQ

⇩ ⇧ ⤊

Des précisions sur le à qui devient %C3%A0 ?

Pourquoi le à est-il remplacé par cette séquence étrange (%C3%A0) ?

On retrouve l'histoire des caractères uniquement ASCII lors du transfert vu dans la partie précédente. Le % indique qu'on fournit la valeur d'un octet encodant un caractère. Le caractère à n'est pas un caractère ASCII. Son point de code est supérieur à 127 en UNICODE. Il faut donc passer par l'UTF-8, où il sera encodé sur deux octets.


>>> octets = 'à'.encode('utf-8')
>>> octets
b'\xc3\xa0'

Comme vous pouvez le voir, le à est encodé par deux octets valant en hexadécimal C3₁₆ et A0₁₆.

Comment trouver la valeur en décimal ?

Facile : comme l'hexadécimal est la base 16, la case de poids faible vaut 1, la suivante 16, la suivante 16²...

On se souviendra que

A₁₆ vaut 10₁₀
B₁₆ vaut 11₁₀
C₁₆ vaut 12₁₀

On obtient alors :

C3 ₁₆ = 12 * 16 + 3 * 1₁₀ = 195₁₆.
A0 ₁₆ = 10 * 16 + 0 * 1₁₀ = 160₁₆.

Si on fait les additions, on voit que les deux octets valent en décimal 195 puis 160.

Si vous voulez vérifier ça en Python :


>>> octets = 'à'.encode('utf-8')
>>> for octet in octets : print(int(octet))
195
160

Activité publiée le 4 12 2020
Dernière modification : 4 12 2020
Auteur : ows. h.
Modification : Andjekel

⏫