• Facile

Ce cours est visible gratuitement en ligne.

Vous pouvez être accompagné et mentoré par un professeur particulier par visioconférence sur ce cours.

J'ai tout compris !

Mis à jour le 14/08/2017

Les formulaires, de bons amis

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Dans le chapitre précédent, nous avons vu comment accéder aux différents éléments qui composent un formulaire.

Nous allons maintenant apprendre à utiliser ces éléments afin d'éviter à l'utilisateur une overdose de boîtes de dialogue :D .

L'objet "form"

Commençons par l'objet form, qui représente le formulaire lui-même : tous les éléments du formulaire en sont des sous-objets.
Nous n'allons pas parler très longuement de lui, mais simplement présenter deux évènements qui lui sont associés : onReset et onSubmit.

onSubmit

Cet évènement se produit lorsque le formulaire est envoyé. Il est particulièrement intéressant, car il va nous permettre de vérifier si les champs sont bien remplis avant d'envoyer le formulaire ; si ce n'est pas le cas, on pourra annuler l'envoi.

Pour rappel, l'envoi d'un formulaire en HTML se fait par un clic sur un élément input de type submit :

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

Comme je vous l'ai dit, il est possible de bloquer l'envoi d'un formulaire, et ce, de cette manière :

<form method="post" action="page.php" onsubmit="return x;">
  • Si x vaut true, le formulaire est envoyé normalement.

  • En revanche, si x vaut false, alors le formulaire n'est pas envoyé (il ne se passe rien).

On va donc créer une fonction, nommée verifier dans l'exemple qui suit, qui va vérifier le contenu du formulaire, pour éventuellement en bloquer l'envoi.

<form method="post" action="page.php" onsubmit="return verifier(this);">
     <!-- ici, le contenu du formulaire -->
     <input type="submit" value="Envoyer" />
</form>

Et notre fonction ressemblera schématiquement à ceci :

function verifier(f) {
     if( /* le formulaire est bien rempli */ )
          return true;
     else
     {
          alert('Le formulaire est mal rempli');
          return false;
     }
}
A ne pas faire !

Il est possible d'envoyer le formulaire directement en JS. Pour ce faire, il suffit d'exécuter la méthode submit() du formulaire à envoyer.
Cependant, il faut toujours utiliser un bouton de type submit, sinon l'envoi du formulaire devient impossible pour quelqu'un ne disposant pas de JavaScript, ou l'ayant désactivé.

onReset

Le second évènement typique des formulaires se nomme onReset, et est appelé lorsque le formulaire est remis à zéro par un bouton de type reset.

OnReset s'utilise assez facilement, de manière semblable à onSubmit. Voyez plutôt:

<form method="post" action="page.php" onreset="return confirm('Vraiment ?');">

Dans ce cas, si l'utilisateur veut réinitialiser le formulaire, il devra le confirmer. Si il confirme son action, true est renvoyé, et le formulaire est alors réinitialisé ; s'il annule, c'est false qui est retourné, et rien ne se passe.

Notez qu'on peut bien sûr exploiter à la fois onSubmit et onReset pour un même formulaire.

Les éléments, de A à Z !

Cette partie a pour but de lister les attributs, méthodes et évènements typiques des différents éléments de formulaire. Vous trouverez plus d'explications et d'exemples dans la sous-partie qui suit.

Pour plus de clarté, certains éléments ont été regroupés dans une même catégorie (signalée par une astérisque). Voici les différents éléments et les catégories :

  • Bouton* : regroupe les balises <button> ainsi que les <input /> de types button, reset et submit

  • Case* : regroupe les <input /> de types checkbox et radio

  • Select : balise <select>

  • Textarea : balise <textarea>

  • Texte* : regroupe les <input /> de types text, password et file (nous ne nous attarderons pas sur ce dernier)

Attributs

Attributs spécifiques aux formulaires

Tous les éléments de formulaire possèdent ces attributs :

  • form : le formulaire auquel appartient l'élément

  • name : nom de l'objet (le fameux nom qui nous sert à désigner cet objet en JS)

  • type : type de l'objet (button, select, textarea, ou l'attribut HTML "type" dans le cas d'un input)

Certains éléments (cf. le tableau plus bas) possèdent ces attributs :

  • checked et defaultchecked : valeur booléenne, true si la case est cochée (cochée par défaut dans le cas de defaultchecked), false sinon

  • disabled : si cet attribut vaut true, l'objet est grisé (impossible à modifier / cliquer)

  • maxlength : nombre de caractères maximal que peut contenir ce champ

  • readonly : si cet attribut vaut true, l'utilisateur ne peut pas modifier le contenu du champ

  • size : nombre de caractères / d'options qui sont affichés simultanément

  • value et defaultvalue : valeur (valeur par défaut dans le cas de defaultvalue) de l'élément

Quelques éléments particuliers :

  • textarea : rows et cols spécifient respectivement le nombre de lignes et de colonnes affichées

  • select : multiple indique si on peut sélectionner plusieurs choix ou non ; options est un tableau contenant les option, qui sont au nombre de length ; et selectedindex est l'indice (dans le tableau d'options) du choix sélectionné.

Quels attributs pour quels éléments

Se rajoutent les champs cachés (type hidden).

Élément

checked

defaultchecked

disabled

maxlength

readonly

size

value

defaultvalue

Bouton*

non

non

oui

non

non

non

oui

non

Case*

oui

oui

oui

non

non

non

oui

non

Hidden

non

non

non

non

non

non

oui

non

Select

non

non

non

non

non

oui

non

non

Texte*

non

non

oui

oui

oui

oui

oui

oui

Textarea

non

non

oui

non

oui

non

oui

oui

L'objet option

Abordons séparément les attributs de l'objet option (ce sont les choix des menus déroulants select).

  • disabled, form et value ont déjà été explicités plus haut

  • index : indice du choix parmi le tableau options de l'élément select

  • label : désigne le groupe auquel appartient ce choix

  • selected et defaultselected : vaut true si ce choix est sélectionné / sélectionné par défaut

Méthodes

Méthodes spécifiques aux formulaires
  • focus : donne le focus à cet élément (pour une zone de texte, place le curseur à l'intérieur)

  • blur : enlève le focus de cet élément (en quelque sorte le contraire de focus)

  • click : simule un clic de souris sur cet élément

  • select : sélectionne ("surligne") le texte de ce champ

Quelles méthodes pour quels éléments

Élément

focus

blur

click

select

Bouton*

oui

oui

oui

non

Case*

oui

oui

oui

non

Select

oui

oui

non

non

Textarea

oui

oui

non

oui

Texte*

oui

oui

non

oui

Les évènements

Évènements spécifiques aux formulaires
  • onFocus : lorsque l'élément reçoit le focus (pour une zone de texte, quand on place le curseur à l'intérieur)

  • onBlur : lorsque l'élément perd le focus (en quelque sorte le contraire de onFocus)

  • onChange : lorsque la valeur / l'état de l'élément change (quand on coche la case, qu'on modifie le texte, etc.)

  • onSelect : lorsqu'on sélectionne (quand on "surligne") le texte de ce champ

Quels évènements pour quels éléments

Élément

onFocus

onBlur

onChange

onSelect

Bouton*

oui

oui

non

non

Case*

oui

oui

oui

non

Select

oui

oui

oui

non

Textarea

oui

oui

oui

oui

Texte*

oui

oui

oui

oui

Les éléments et leur fonctionnement

Les zones de texte

Lire et modifier leur contenu

On accède au contenu des champs textes (input de type text ou password, ainsi que textarea) à l'aide de l'attribut value, qu'on peut lire, mais aussi modifier.

Pour afficher la valeur du champ pseudo du formulaire monForm :

alert("Vous avez saisi le pseudo : " + document.getElementById("idForm").elements["pseudo"].value);

Si on veut modifier le contenu d'un textarea dont l'attribut name vaut infos :

document.getElementById("idForm").elements["infos"].value = "Vous testez un script JS";

On peut ainsi récupérer et afficher des informations dans des champs de texte, ce qui est plus agréable et moins agressif qu'avec des boîtes de dialogues ;) .

L'objet "select"

L'objet select représente une liste déroulante, et comme dans toute liste, il peut être intéressant de savoir quel choix est sélectionné ; voyons comment procéder.

Prenons une liste dont le code HTML (qui se trouve à l'intérieur d'un formulaire) est le suivant :

Vous êtes :
     <select name="genre" onchange="voirSelection(this)">
          <option value="rien">Choisissez...</option>
          <option value="garcon">Un garçon</option>
          <option value="fille">Une fille</option>
          <option value="saispas">Je ne sais pas</option>
     </select>

On va ici utiliser l'évènement onChange, qui appellera la fonction quand l'utilisateur modifiera le choix.

Comment récupérer la valeur de la sélection ?

  • Dans un premier temps, on va récupérer le numéro de l'option sélectionnée, grâce à l'attribut selectedIndex.

  • Ensuite, il ne nous reste plus qu'à lire la valeur value de l'option correspondante, qui se trouve dans le tableau options

function voirSelection(liste)
{
     var numero = liste.selectedIndex;
     var valeur = liste.options[numero].value;
     alert("Vous avez choisi : " + valeur);
}

Bien entendu, il y a moyen de réduire ce code en faisant comme ceci :

var valeur = liste.options[liste.selectedIndex].value;

Il ne vous reste plus qu'à analyser le contenu de la variable valeur pour agir en conséquence, un peu comme ceci :

function voirSelection(liste)
{
     var valeur = liste.options[liste.selectedIndex].value;
     if(valeur != 'rien')
     {
          if(valeur == 'saispas')
               alert('Noob...');
          else
               alert(valeur);
     }
}

Cases à cocher et boutons radio

Une seule case à cocher

La première utilisation des cases à cocher est d'en utiliser une seule (par exemple pour activer / désactiver un aperçu automatique).
Dans ce cas, on peut savoir si la case est cochée grâce à son attribut checked, qui est une valeur booléenne (il vaut soit true, soit false). On peut également la (dé)cocher, soit en modifiant la valeur de cet attribut, soit en appelant la méthode click() (qui simulera un clic de souris sur la case).

Par exemple, si on a une checkbox dont le nom est "maCase", dans un formulaire dont l'id est "idForm" :

if(document.getElementById("idForm").maCase.checked)
     alert("La case est cochee");
else
{
     document.getElementById("idForm").maCase.checked = true;
     alert("La case n'etait pas cochee, mais maintenant elle l'est");
}
Radio et groupe de checkboxes

Il est également possible d'utiliser les cases à cocher par groupe : dans ce cas, toutes les cases du groupe auront le même nom. C'est également toujours le cas avec les boutons radio.

La technique pour y accéder est alors légèrement différente. Prenons le code suivant (on suppose que ces balises se trouvent dans un formulaire dont l'id est encore "idForm") :

Vous aimez : <br />
   <input type="checkbox" name="mesCases" value="pizza" /> la pizza <br />
   <input type="checkbox" name="mesCases" value="tartiflette" /> la tartiflette <br />
   <input type="checkbox" name="mesCases" value="ratatouille" /> la ratatouille <br />
   <input type="button" value="Ok" onclick="afficherMessage()" />

Toutes ces cases possèdent le même nom ; document.getElementById("idForm").mesCases n'est donc pas un objet, mais un tableau d'objets. On va donc pouvoir accéder à la case numéro i avec document.getElementById("idForm").mesCases[i].

function afficherMessage()
{
     var monForm = document.getElementById("idForm");
     var pizza =monForm.mesCases[0].checked;
     var tartiflette = monForm.mesCases[1].checked;
     var ratatouille = monForm.mesCases[2].checked;
     if(tartiflette)
          alert("Vous venez de la montagne, non ?");
     if(ratatouille && !pizza)
          alert("Vous preferez la ratatouille a la pizza ?!");
}

Avec ce script, on récupère l'état de chaque case (cochée ou non), et on affiche ensuite des messages selon les cases cochées.

Il est à noter qu'on peut récupérer la valeur d'une case :

alert(document.getElementById("idForm").mesCases[0].value);

On peut également utiliser une boucle pour parcourir notre tableau de cases et savoir lesquelles sont cochées.
Et c'est d'ailleurs très intéressant dans le cas des boutons radio, car il ne peut y en avoir qu'un seul de coché parmi ceux ayant le même attribut name :) .

Reprenons notre exemple précédent avec des boutons radios : "Vous préférez : [...]".

function radio()
{
     var cases = document.getElementById("idForm").mesCases;
     var platFavori;
 
     // on recherche le bouton coche (s'il y en a un)
     for(var i=0; i<cases.length; i++)
          if(cases[i].checked)
               platFavori = cases[i].value;
 
     // s'il y en a un, on affiche la valeur correspondante
     if(platFavori)    
          alert("Votre plat favori est : " + platFavori);
}

L'intérêt de se baser sur l'attribut value, c'est qu'on peut rajouter des choix à notre formulaire sans avoir à toucher au code JS : plutôt intéressant.
Pour vous entraîner, essayez de reprendre le script avec une boucle dans le cas des cases à cocher, et d'afficher la liste des plats que la personne aime.

Bonne nouvelle : on a terminé la partie théorique sur l'utilisation des objets !

Il est maintenant temps pour vous de suivre la petite visite guidée des objets que JS nous met à disposition...
Ensuite, on va pouvoir effectuer quelques TDs pour appliquer tout ça : vérifications de formulaires et autres joyeusetés sont au programme.

Enfin, une "petite" visite guidée... pas si petite que ça ! :diable:

Exemple de certificat de réussite
Exemple de certificat de réussite