Comment utiliser les formulaires JavaScript – liste déroulante, checkbox, button radio…

Et voici un nouveau concept essentiel de JavaScript. Il s’agit des formulaires.

Découvrez-les en long, en large et en travers à travers le cours vidéo ci-dessous.

[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]

Comment utiliser les formulaires JavaScript – liste déroulante, checkbox, button radio…

Bonjour à tous et bienvenu sur Développement Facile.

Dans ce nouveau cours, vous allez découvrir un point incontournable en JavaScript, vous en avez forcément vu un jour dans votre carrière de développeur, même si vous êtes débutant il s’agit de formulaires. Les formulaires par exemple nous contacter, formulaire de saisie de votre adresse mail, de votre message, de l’objet clique sur envoyer, par exemple formulaires de saisie, votre prénom, votre adresse mail, recevoir les cours, les formulaires sont omniprésents sur le Web vous les avez forcément vus.

Les formulaires : l’objet from

Alors c’est un objet, il s’appelle l’objet from et vous avez plusieurs paramètres à renseigner. Donc action, c’est l’action à exécuter par le formulaire, donc en principe c’est l’URL qui est appelée, lorsque l’utilisateur valide le formulaire quand il clique sur le bouton valider, ça appelle une URL, ça envoie les données en poste ou en get, donc ça correspond à l’attribut méthode, les méthodes, la méthode d’envoi des données du formulaire, donc en get ou en post, avec name le nom du formulaire, Target la cible, donc la façon d’ouvrir la page ciblée par le formulaire blank, self, nouvelle page, on fait tout dans la même page et encoding on définit le type de codage des données lors de l’envoi du formulaire. Text/Plain pour indiquer que les données sont envoyées sous la forme de texte.

Dans l’objet form il y a des méthodes, reset() ça permet d’effacer le contenu des champs du formulaire et submit() c’est le bouton valider, pour valider et envoyer le formulaire sur la page suivante.

Les formulaires : les éléments

Alors vous avez différents éléments qui composent un formulaire, bien évidemment, une zone de type texte, donc c’est une zone de saisie sur une seule ligne pour que l’utilisateur renseigne du texte, ça peut contenir un nom, un prénom, une adresse mail, un numéro de téléphone, alors que TEXTAREA, regardez la zone en dessous de la vidéo pour saisir un commentaire, vous avez votre pseudo, votre site Internet, votre adresse mail, ça c’est INPUT TYPE TEXTE, par contre la grande zone ou vous pouvez saisir votre question à poser, c’est une zone de TEXTAREA donc c’est une zone de saisie de texte multi lignes.
Vous avez des zones de type checkbox, c’est des cases à cocher. Des zones de type bouton radio donc c’est des boutons radio, donc un cercle ou on clique dessus. Des zones de sélection donc des listes déroulantes, des listes, des combo box, et vous avez INPUT TYPE submit, ça permet la validation des données donc c’est des boutons, tout simplement.

Vous avez INPUT TYPE reset, par exemple vous avez commencé à renseigner votre formulaire, le nom, le prénom, le site Internet, votre question et vous appuyez sur le bouton reset, ça va effacer tous les champs, et les remettre à zéro.
TYPE password ça permet de saisir un mot de passe, c’est un champ texte ou vous saisissez le mot de passe, l’avantage c’est que ça met des cercle ou des étoiles et que vous ne voyez pas le mot de passe que vous tapez, donc si vous avez un amis à côté vous pouvez écrire votre mot de passe, et il ne verra que des étoiles.
Un champ de TYPE hidden c’est très pratique, beaucoup de formulaires utilisent ça, c’est un champ caché, vous pouvez mettre des informations supplémentaires. L’utilisateur il le voit pas sur son interface, sur sa page Web, par contre il y a un champ caché ou vous mettez des informations supplémentaires, souvent on l’utilise pour faire du tracking de visiteur, par exemple pour savoir quelle page il vient, quelle page il a visité sur votre site Internet.
Et vous avez un INPUT TYPE file, c’est une zone de sélection de fichier, donc ça permet à un utilisateur d’envoyer des fichiers, si vous avez un formulaire de contact mail, vous pouvez lui proposer une zone de type file, où il va pouvoir prendre un fichier de son disque dur, et vous l’envoyer en pièce jointe de votre mail.

Donc voici un exemple de code, pardonnez-moi pour l’erreur, la faute d’orthographe sur obligatoire, donc vous avez un formulaire avec le nom, il s’appelle form, il n’y a pas de méthode, il n’y a pas d’action, c’est un formulaire basique, avec un nom à saisir, et un bouton valider. Donc dès que l’utilisateur clique sur le bouton valider, il y a l’événement, rappelez-vous les cours sur les événements, onClik ça va appeler la fonction données obligatoires, et qu’est-ce qu’on vérifie ? Les données obligatoirement, avant d’appeler la page suivante, d’envoyer les données du formulaire, onClik on vérifie si toutes les données obligatoires ont été saisies, on récupère l’objet formulaire et if form pour un nom, c’est input name, nom.value, la valeur qui a été saisie, donc si il y a écrit Matthieu, on vérifie si c’est égal égal à blanc on définit, on affiche une boîte de dialogue à l’utilisateur, alerte ce champs est obligatoire. Donc vous avez tout un tas de possibilités avec les formulaires pour tester, couplés aux événements, les formulaires c’est vraiment très puissant pour mettre une interaction utilisateur poussée.

Je vous montre un peu un exemple Javascript sur la concaténation automatique de chaîne de caractères, là vous avez votre formulaire avec des champs, phrase 1, phrase 2, phrase 3, on demande à l’utilisateur de renseigner 3 phrases, ce qu’il veut, 3 phrases différentes et à la fin on affiche les phrases assemblées en une seule dans un texte area. Il y a un bouton qui s’appelle assembler donc vous avez trois champs : la phrase 1 à saisir, la phrase 2 à saisir, la phrase 3 à saisir, ensuite vous avez un texte area, une zone de texte et en dessous le bouton assembler, donc dès que l’utilisateur clique sur le bouton assembler, qu’est-ce que ça va faire ?
Onclic assembler ça appel donc cette fonction JavaScript et on utilise la concaténation de chaîne, l’assemblage de chaîne, ont récupèrent form, ici, .Phrase1 le nom.value + form le nom du formulaire.phrase2 name.value + form + phrase.value, et on récupère le formulaire.phrase assemblée, ici .value. Il n’y a pas besoin d’action, il n’y a pas besoin de méthode, get ou pose sur le formulaire non, juste un clic sur le bouton assembler, ça remplira le texte area avec les trois phrases assemblées, donc c’est vraiment très pratique.

Les formulaires : les cases à cocher

Un exemple avec des cases à cocher, donc toujours l’objet form, input java, checkbox, Javascript, il y aura une case à cocher JavaScript et vous pouvez faire, sur le clic du bouton valider, test checkbox donc ça va appeler la fonction checkbox, et si la checkbox JavaScript a été cochée par l’utilisateur, donc regardez, vous avez form.Java.checked, donc le formulaire il s’appelle form, input name=java, et on garde .checked, si checked est égal à true ça veut dire que la case est cochée, vous faites les instructions. Sinon elle est égale à false, donc l’utilisateur n’a pas coché la case, vous faites ou pas les instructions correspondantes.

Les formulaires : les boutons radios

Vous avez les boutons radio, c’est le même principe, vous leur donnez un nom, nom Java et une valeur par défaut oui, une valeur par défaut non, donc oui JavaScript facile, non, et ensuite sur le onclic vous faites un test bouton radio, donc en fait vous récupérez form.Java, tous les input name du bouton radio ont le même nom Java, donc ça vous fait un tableau, et zéro entre crochets, ça cible oui JavaScript facile, non, check égale true, ça veut dire que l’utilisateur a coché ce bouton radio, sinon il sera à false. Et comme ça, vous faites une boucle, un pour récupérer le deuxième bouton radio, deux, le troisième bouton radio, etc.

Les formulaires : les listes

Les listes, donc ça vous permet de créer une liste ou l’utilisateur il va sélectionner Actionscript, PHP, JavaScript, les trois de le liste d’un coup, ou un seul de la liste, pareil sur une clé que vous testez la liste, donc form.langage.select index égal égal zéro, instruction, donc si il a sélectionné actionscript, vous faites des instructions tout simplement.

Ensuite que ce que vous avez… Les listes sous forme, ça va vous permettre de tester, là vous avez une liste classique, les valeurs les unes sous les autres avec une barre de défilement, par contre là vous avez une liste déroulante, quel est le langage facile, vous pouvez choisir qu’une seule valeur dans une liste déroulante. Dans la liste précédente vous pouvez choisir un, deux, trois, plusieurs valeurs en même temps, là vous avez le choix qu’entre une seule valeur, pour savoir quelle valeur a été choisie, sur le onclic test liste, vous récupérez form.langage.lange, c’est le nombre d’éléments dans votre liste déroulante et vous faites une boucle, rappelez-vous le cours sur les boucles, si vous ne vous rappelez plus comment fonctionne une boucle for, je vous renvoie à ce cours sur les boucles for, while, do while, vous parcourez tous les éléments de la liste, form.langage.options i, donc c’est l’élément zéro, i=0 ce sera l’élément ActionScript, i=1 l’élément PHP, i=Java, l’élément JavaScript.Sélected, donc .selected c’est = True, vous faites langage sélectionné, sinon option 1 selected sera false, donc vous ne passerez pas dans le i tout simplement.

Votre plan d’actions !

Là je vous ai présenté beaucoup de choses dans les formulaires, les formulaires c’est un élément clé pour mettre des interactions avec l’internaute donc apprenez à utiliser les formulaires couplés aux événements, aux conditions, aux fonctions en JavaScript, vous pouvez même créer des objets en JavaScript, donc c’est à vous de les utiliser maintenant. Retrouver un exemple de code source directement sous ce cours vidéo, si vous avez des questions posez-les moi sous la vidéo et je vous dis à très bientôt sur Développement Facile.

[/ppmtoggle][/ppmaccordion]

Téléchargez le code source JavaScript

Voici le code source JavaScript d’un formulaire complet en JavaScript, avec le contrôle et la récupération des données saisies par l’utilisateur.

Avez-vous une classe JavaScript formulaire ?

Si vous avez un framework JavaScript qui simplifie l’utilisation des formulaires, partagez-le dans les commentaires.
Téléchargez un script JavaScript de création et validation de formulaire (en anglais).