4. Formulaires dans une page web

Pour entrer des informations, les pages web peuvent proposer des éléments de formulaires : boutons à cliquer, champ d'entrée, etc...

Les informations entrées peuvent ensuite être directement utilisées par la page web grâce à JavaScript ( côté "client" ), ou envoyées au serveur pour un autre traitement ( côté "serveur" ); nous allons voir ces deux cas successivement.

Construction d'un formulaire

Code HTML

Un formulaire se bâtit dans le fichier HTML de la page : la balise correspondante est la balise <form> :


	<form id="form1" name="mon_formulaire">
	
		................
		éléments de formulaires
		................
		
	</form>

Il est souvent utile de donner un id et/ou nom à un formulaire :

Éléments de formulaire

Les éléments que l'on peut trouver dans un formulaire dépendent des informations que l'on veut demander à l'utilisateur; leurs balises, à placer entre les balises <form>, sont par exemple :

Bouton à cliquer


	<button type="button" name="mon_bouton">Cliquez-moi !</button>

Le texte entre les balises indique le libellé du bouton c'est à dire le texte qui s'affiche à l'intérieur.

Un type particulier de bouton, que vous utiliserez plutôt au chapitre suivant, est le bouton qui permet de soumettre le formulaire au serveur ( c'est à dire lui envoyer les informations entrées ) :


	<input type="submit" name="envoi" value="ENVOI">

Dans ce cas, le libellé du bouton correspond à la propriété value de la balise ( si cette propriété n'est pas renseignée, c'est le texte par défaut "Envoyer" qui s'affiche ).

Enfin, il existe le bouton qui permet de réinitialiser un formulaire :


	<input type="reset" name="remise_a_zero" value="RAZ">

Ces deux boutons sont généralement placés à la fin du formulaire.

Champ d'entrée

Pour un champ d'entrée de texte :

	<label>Veuillez compléter ce champ : <input type="text" name="un_texte" placeholder="Entrez un truc...""></label>
  • la balise <label>, parente de la balise de l'élément de formulaire, permet de lui associer un libellé.
  • la propriété placeholder permet de donner à l'utilisateur une indication sur l'information à entrer
Pour un champ d'entrée de valeur numérique :

	<label>Entrez la valeur : <input type="number" name="une_valeur" min="0" max="20" step="0.5"></label>

Les propriétés min, max et step permettent respectivement de définir le minimum, le maximum et le pas de variation de l'intervalle dans lequel la valeur demandée doit se trouver.

Cases à cocher

Un ensemble de case, indépendantes les unes des autres, qui permettent de choisir une ou plusieurs options :


	<label><input type="checkbox" name="couleur" value="1">rouge</label><br>
	<label><input type="checkbox" name="couleur" value="2">vert</label><br>
	<label><input type="checkbox" name="couleur" value="3">bleu</label><br>
	<label><input type="checkbox" name="couleur" value="4">blanc</label><br>




  • la propriété value permet d'associer à chaque case sélectionnée une valeur, information qui pourra alors être récupérée par un script JS ou envoyée au serveur
  • on remarque que les cases doivent avoir le même nom pour qu'elles soient associées à la même information demandée ( ici, le choix de couleur(s) )

Boutons radio

Dans ce cas, les différentes options s'excluent mutuellement : la sélection d'une seule est possible.

C'est ce qui est par exemple utilisé dans les QCM d'entraînement que vous avez pu faire sur ce site...


	<label>A<input type="radio" name="q1" value="1">C'est ma dernière réponse, Jean-Pierre</label><br>
	<label>B<input type="radio" name="q1" value="2">J'appelle un ami</label><br>
	<label>C<input type="radio" name="q1" value="3">La réponse C</label><br>
	<label>D<input type="radio" name="q1" value="4">Obi-Wan Kenobi</label><br>




Là-aussi, les boutons radio doivent avoir le même nom ( dans le cas contraire, leur sélection multiple serait possible ! )

De nombreux autres éléments de formulaire existent; vous trouverez ici un mémento sur les éléments de formulaires ( et d'autres informations qui vous serviront par la suite ).

A côté de ces éléments de formulaire, il est bien sûr toujours possible d'inclure entre les balises <form> d'autres éléments HTML "standards" : paragraphe, image, tableau, etc...

Notre Simulateur...du côté client

Vous allez maintenant utiliser tout ce que vous savez pour faire fonctionner le Simulateur de note au Bac sur lequel vous travaillez; après avoir complété le code HTML, mis en forme avec CSS et abordé les évènements avec JS, vous allez traiter les informations qu'un utilisateur rentrerait dans les éléments du formulaire pour calculer sa note au Bac.

Pour l'instant, pas d'envoi de données au serveur : c'est JavaScript qui, on le rappelle, fonctionne "à l'intérieur" du navigateur, qui fera les calculs : votre page web ne fonctionne donc pour l'instant que "côté client".

Travail préliminaire

Il y a dans la page du Simulateur un formulaire qui va permettre à un utilisateur d'entrer ses différentes notes.

Repérez les différents éléments de ce formulaire, et faites-en sur papier la liste dans l'ordre où ils apparaissent dans le formulaire :

Élément n° Nom Type Information correspondante
0 1t input ( number ) bulletin 1er trimestre 1ère
1 2t input ( number ) bulletin 2ème trimestre 1ère
... ... ... ...

Attention, si il y a deux noms identiques dans votre liste, modifiez les id dans dans le code HTML de façon à ce que ce ne soit plus le cas : cela pourra poser problèmes au chapitre suivant.

Cette liste vous servira dans la suite du travail pour bien vous représenter la structure du formulaire.

Écriture du code JS pour le calcul de la note

Dans le script JS associé à la page du Simulateur, le bouton en bas de la page est (normalement) déjà associé à l'évènement click, et au gestionnaire d'évènement calcul() : c'est donc ce dernier que vous allez compléter pour réaliser la tache de calcul de la note au Bac de l'utilisateur ( vous pouvez d'ailleurs maintenant effacer l'instruction qui affichait une petite fenêtre, ou la mettre en commentaires...)

Quelques indications pour ce travail :

  • comme indiqué plus haut, la sélection d'un formulaire par JS se fait grâce à l'id de ce formulaire : on utilisera donc la méthode getElementById() pour sélectionner le formulaire :

    
	let formulaire = document.getElementById("notes"); // "notes" est l'id du formulaire

    De plus, il existe une méthode pour obtenir un tableau de tous les éléments d'un formulaire : 

    
	let elmts = formulaire.elements;
    Le tableau obtenu s'appelle une collection des éléments HTML : la variable elmts contient donc la collection de tous les éléments du formulaire.
    On peut noter que les autres éléments "standards" éventuellement inclus entre les balises <form> ne sont pas inclus dans cette collection.
  • Le tableau précédent contient donc les éléments eux-mêmes, mais pas leur valeur : pour déterminer la valeur d'un élément de formulaire, il faut "lire" sa propriété value.
    Par exemple, pour lire la propriété du 3ème élément du formulaire : 
    
	let valeur = elmts[2].value; // la numérotation commence, bien entendu, à zéro...

    Attention cependant : vous vous souvenez, en Python, le problème posé par la fonction input() ? Elle retourne toujours une chaîne de caractères : si l'information entrée était en réalité une valeur numérique, il faut alors transtyper cette valeur en nombre entier ( int() ) ou flottant ( float() ) de façon à pouvoir faire les calculs.

    C'est le même problème ici avec la propriété value : elle correspond elle-aussi toujours à une chaîne de caractères; pour le transtypage en JS, on utilisera les fonctions :

    
	parseInt(.....); // pour un transtypage en entier
	parseFloat(.....); // pour un transtypage en flottant

Vous disposez donc d'un moyen de récupérer la valeur entrée dans chacun des champs par l'utilisateur; il va falloir maintenant écrire la formule qui, à partir de toutes ces valeurs, calcule sa note au Bac.
C'est une formule assez complexe car elle fait intervenir de nombreuses valeurs, mais dans le fond, il ne s'agit que du calcul d'une moyenne...

Pour faciliter le travail, nous allons le décomposer en plusieurs étapes :

Calcul de la moyenne des bulletins de 1ère

  • à l'aide de la liste que vous avez établie lors du Travail préliminaire, déterminer les éléments dont les valeurs permettent de calculer cette moyenne
  • déterminer la formule pour calculer la moyenne des bulletins, et écrire l'instruction qui permet d'affecter le résultat de ce calcul à une variable
  • cette moyenne doit s'afficher dans la balise <span> correspondante incluse dans le formulaire ( attention, ce n'est pas un élément de formulaire, et n'apparaît donc pas dans le tableau ); pour modifier le texte entre les deux balises d'un élément, il faut :
    1. sélectionner cet élément
      2. 
	let elmt = document.getElementById('moy_bull');
    2. modifier sa propriété innerHTML : 
      
	elmt.innerHTML = mon_texte_a_afficher;

Faites ce travail, enregistrez votre script, rechargez la page et vérifiez le bon fonctionnement du calcul de la moyenne et de son affichage.

Calcul de la moyenne des bulletins de Terminale

Même travail pour les bulletins de Terminale, et l'affichage du résultat au "bon endroit" de la page...

Calcul de la note globale

Voila, il faut maintenant calculer la note globale au Bac...ce peut être fastidieux, mais vous avez la possibilité de faire tous les calculs intermédiaires que vous jugerez nécessaire ( moyenne des notes d'E3C en Histoire-Géo en Première par exemple...)

Voila la liste des coefficients associés à chaque note du Bac :

Première :
  • Moyenne des bulletins : 5
  • Histoire-Géo, LVA et LVB : 2.5 ( soit 1.25 pour chaque note des deux sessions...)
  • Enseignement Scientifique : 2.5
  • Spécialité abandonnée : 5
  • Français écrit et oral : 5 chacun
Première :
  • Moyenne des bulletins : 5
  • Histoire-Géo, LVA et LVB : 2.5
  • Enseignement Scientifique : 2.5
  • EPS : 5
  • Spécialités : 16 chacune
  • Philo : 8
  • Grand oral : 10

La somme des coefficients est, bien entendu, égale à 100.

Affichage du résultat

Une fois le calcul fait, il faut l'afficher : une balise de type <span>, placée dans la section "resultat", est prévue pour cela; l'id de cette balise est "note_finale".

Écrire dans votre code JS les instructions qui permettent d'afficher dans cette balise la note calculée. Terminé !!...

Et si on décide maintenant que ces informations serait mieux utilisées directement par le serveur, ou alors que l'on souhaite les stocker sur ce serveur ( c'est ce que propose par exemple la page du simulateur cité en exemple dans la première page de ce chapitre ) ? Comment faire cela ?