Accueil Casino argent reel Meilleur casino Nouveaux casinos Live casino

Premiers pas en JavaScript 36.1 Formulaires (I) form, input text, select, input hidden, input checkbox, textarea, input submit

copyleft   See You Why?

---

Test relatif aux objets 'date' (35.9) | | formulaires II : input button, input radio, input password, input reset (36.2)

---

Contenu

I. Les formulaires

Nous invitons le lecteur à prendre connaissance (ou à reprendre connaissance ;o) ) de ce que nous avons dit dans notre tutoriel concernant les bases du langage HTML, où nous avons abordé les formulaires (voir ici) et les différents outils que les formulaires permettent d'utiliser.

Utiliser était d'ailleurs un bien grand mot... certes, on y a appris à créer les formulaires, mais le HTML n'offre quasi aucun moyen de gérer les réponses données par l'internaute qui visite votre site sans faire appel à l'aide du JS.

Ce chapitre et les 2 suivants affineront la maitrise des formulaires HTML, développeront l'aspect 'objet' aux yeux de JavaScript de ces curieux objets et surtout vous apprendront à utiliser et gérer les réponses données par l'internaute qui visite vos pages... l'objectif de ce tutoriel n'est-il pas d'utiliser le JS afin de rendre votre site plus interactif ?

Depuis notre chapitre 23, nous savons ou devrions savoir ce que sont les objets JS,
ainsi que les propriétés qui leur sont attribuées
et les méthodes qu'on peut leur appliquer,
sans oublier les évènements que l'on peut leur associer.

Nous déplorons d'avoir à développer ce chapitre théorique qui nous parait cependant indispensable pour la compréhension du reste... nous promettons que le chapitre suivant sera plus pratique, mais basé sur la connaissance du contenu de ce chapitre. Courage donc...

Dans une première séquence de ce chapitre, nous n'aborderons que les balises utilisées dans le formulaire de contact que vous apercevez dans chaque bas de page de notre site, à savoir :

• la balise <form> qui crée un nouveau formulaire,
• la balise <input> de type 'text' qui crée une zone de texte d'une ligne dans un formulaire,

Dans une deuxième séquence, les autres balises du formulaire de bas de page :

• la balise <select> qui définit et crée une liste dont chaque élément sera accessible par la balise <option>,
• la balise <input> de type 'checkbox' qui crée une zone de choix multiples possibles,
• la balise <input> de type 'hidden' qui crée un champ caché que l'internaute ne verra pas,
• la balise <textarea> qui crée une zone de texte de plusieurs lignes dans un formulaire,
• la balise <input> de type 'submit' qui exécute l'action définie dans la balise <form>.

Dans une troisième séquence de ce chapitre, il nous restera à aborder les autres balises propres aux formulaires, à savoir :

• la balise <input> de type 'button' qui crée un bouton,
• la balise <input> de type 'radio' qui crée une zone de choix dont une seule réponse ne sera retenue (à l'opposé duu type 'checkbox'),
• la balise <input> de type 'password' qui qui crée une zone de texte d'une ligne dans un formulaire mais dont le contenu du champ affichera des astérisques et ne pourra être copié,
• la balise <input> de type 'reset' qui annule toutes les réponses données au formulaire,
• la balise <input> de type 'range' de HTML5 qui permet de rentrer une valeur comprise entre un 'max' et un 'min',

en espérant ne pas en avoir oubliées.

A. la balise <form>

La balise <form> crée un formulaire.

Plusieurs formulaires peuvent être créés dans une page HTML.
Seule la balise </form> met fin au formulaire. Le contenu du formulaire doit donc être compris entre les balises <form> et </form>. Prenez soin de fermer votre formulaire, c'est une erreur fréquente des créateurs de pages web.
Ne faites pas se chevaucher différentes balises <form>... on doit terminer un formulaire avant de passer au suivant.

Sans que vous n'ayiez quoi que ce soit à faire, même si vous n'écrivez rien en JS jusqu'ici, votre ordinateur crée une array (un tableau) appelée forms dans votre document ouvert dès qu'il aperçoit une balise <form>.
Au premier formulaire ouvert, il crée l'objet document.forms[0], qui sera le premier formulaire de votre document. Vous aurez compris qu'au 2e formulaire ouvert, il créera l'objet document.forms[1] et ainsi de suite... Comme déjà signalé, les ordinateurs commencent à compter à partir de zéro.

Chacun des formulaires aura une propriété, à savoir length qui comptera le nombre d'éléments dans ce formulaire (input de type text, input de type password, input de type submit, etc.)

Propriétés/attributs de l'objet "form"

method, suivi de "get" ou de "post" ?

• l'argument "get" transmet les données dans des variables mises à la suite de l'URL définie par l'attribut action (maximum 255 caractères) ;
• l'argument "post" transmet les données selon le standard établi par le serveur ;
• c'est donc à vous de choisir par quelle méthode vous souhaitez que les données du formulaire soient envoyées. En cas d'hésitation, songez que dans 99 % des cas la méthode que l'on utilise est "post", vous écrirez donc method="post".

enctype, suivi de ?

• deux paramètres généralement utilisés :
  "text/plain" s'il s'agit d'un classique formulaire,
  "multipart/form-data" : si le formulaire comprend un fichier attaché
  <input type='file"...>

action, suivi de ?

• généralement utilisés :
  <form action="mailto:[email protected]" method=post enctype="text/plain">
  ou <form method='post' action='http://cuy.be/mail32.php'>

name, suivi de et pourquoi ?

name et id, la même chose ?

• Le contenu du formulaire est normalement destiné à être envoyé à un programme sur le serveur Web. À la réception, le programme doit pouvoir connaître le contenu de chaque élément, donc identifier les différentes données.
  Cette identification est faite en attribuant un nom à chaque champ du formulaire, via l'attribut "name". Cet attribut n'est pas forcément unique. Vous pouvez par exemple avoir plusieurs formulaires dans une même page, certains ayant des champs nommés de la même façon. Le programme serveur qui interprète le formulaire n'aura alors pas à savoir sur quel formulaire l'utilisateur a cliqué, il interprétera les données uniquement à partir de leur nom. Ne confondez pas le nom (attribut "name") avec l'identifiant (attribut "id") : le premier sert à identifier les données qui sont soumises, le second à identifier des éléments dans la page en cours de visualisation. Seul l'identifiant est unique, deux éléments peuvent envoyer une donnée sous le même nom. Utiliser les mêmes valeurs pour les deux attributs vous épargnera toutefois beaucoup d'erreurs dans vos développements.

Méthodes applicables à l'objet "form"

vvv

Évènements associables à l'objet "form"

L'événement "onsubmit", spécifique à la balise form, est déclenché lorsque le formulaire est sur le point d'être envoyé, suite à l'appui sur la touche Entrée, ou d'un clic sur un bouton « submit », ou toute autre action indiquant au navigateur d'envoyer le formulaire.

B. la balise <input> de type 'text'

Un formulaire n'a aucune raison d'exister s'il ne permet pas à l'internaute de réagir. Nous allons donc parcourir les différentes balises qui permettront à l'internaute de réagir.

La balise <input type="text" ... > permet à l'utilisateur de saisir une ligne unique de texte. On la surnomme souvent "champ texte" ou "champ de saisie".
Il n'existe pas de balise de fin </input>.

C'est l'incontournable de tous les formulaires JS ; c'est la balise de base du formulaire car il permet d'entrer un texte très court comme le nom, l'âge, l'e-mail, etc. C'est elle qui permet d'avoir :

et dont la source sera :

<form method='post' action='http://cuy.be/mail2.php'>
       <p> Votre Adresse Email <br /><input type='text' name='votremail' size='40' />
</form>

Propriétés/attributs de l'objet "input" de type 'text'

Méthodes applicables à l'objet "input" de type 'text'

Évènements associables à l'objet "input" de type 'text'

C. la balise <select> avec la balise <option> pour chaque élément

Un choix est souvent souhaité lorsqu'on questionne un internaute... et comme on n'est pas certain de la qualité d'orthographe de notre interlocuteur... autant être certain des modalités de sa réponse. S'il y a un choix à faire entre plus de 100 propositions (ex. : la nationalité d'un individu), on lui proposera une liste déroulante.
Si MULTIPLE n'est pas spécifié, il ne sera possible de faire qu'un seul et unique choix.

Les balises <select> et </select> encadreront l'ensemble des sélections possibles. Chaque option sélectionnable sera précédée de la balise <option> et du paramètre 'value' qui indiquera la valeur mémorisée en cas de choix. Le paramètre SELECTED indiquera que cette valeur est sélectionnée par défaut.
Si l'attribut selected n'a été attribué à aucune des options, c'est la première option qui sera sélectionnée si l'utilisateur ne fait aucun autre choix.

Prudence : on travaille ici avec deux objets conjointement, d'une part, la sélection ou la liste déroulante et d'autre part, les options possibles.

Propriétés de l'objet "select" avec "option" par élément

name Nom de la liste
size Nombre de lignes à afficher
multiple Sélection multiple autorisée
selected
selectedIndex
disabled Grisage de la liste
class Classe de feuille de style
style

Méthodes applicables à l'objet "select" avec "option" par élément

Évènements associables à l'objet "select" avec "option" par élément

onChange Détecte la sélection d'une nouvelle ligne
onFocus Détecte la prise de focus
onBlur Détecte la perte de focus

D. la balise <input> de type 'checkbox'

Un bouton checkbox (case à cocher) permet à l'internaute de faire des choix parmi des propositions offertes. Le choix est large, il peut ne choisir aucun élément, en choisir un ou même plusieurs... contrairement au bouton radio qui ne permet qu'un seul choix.
Mais comment 'déchoisir' alors ? Un nouveau clic sur une case cochée inverse le choix précédent.

Propriétés de l'objet "input" de type 'checkbox'

name | checked | disabled | readOnly | class | style

Méthodes applicables à l'objet "input" de type 'checkbox'

Évènements associables à l'objet "input" de type 'checkbox'

E. la balise <input> de type 'hidden'

Un champ caché permet de créer un champ invisible par l'utilisateur, mais qui permet d'envoyer des informations au serveur, à l'insu de l'utilisateur, visiteur de votre page.
J'utilise cette balise dans l'envoi de mail dans la rubrique contact au bas de chaque page du site CUY, ainsi, lorsqu'on m'adresse un message, je sais sur quelle page du site était le visiteur et de quelle page il venait, même si c'était d'une recherche sur Google...

Il peut être parfois nécessaire, pour s'y retrouver lorsqu'on reçoit les données dans sa boite aux lettres, d'inclure des données cachées permettant de savoir de quel formulaire viennent les données, de quel site web elles proviennent (en cas de formulaire partagé) ou d'insérer des données issus de calculs ou encore des données provenant de JavaScript indiquant le navigateur, l'adresse IP, le nombre de visites ou tout autre renseignement sur le visiteur...
C'est une autre raison d'utiliser la balise <INPUT TYPE="hidden"> dont les atributs sont NAME : nom du champ caché et VALUE le contenu du champ c'est-à-dire sa valeur. Ce champ ne sera pas vu par l'internaute mais il sera inclu parmi les données.

Propriétés de l'objet "input" de type 'hidden'

Naturellement, toutes les propriétés et les événements concernant son affichage et son apparence sont sans effet.
 

Méthodes applicables à l'objet "input" de type 'hidden'

Évènements associables à l'objet "input" de type 'hidden'

Naturellement, toutes les propriétés et les événements concernant son affichage et son apparence sont sans effet.

F. la balise <textarea>

Un réponse courte sera donnée par une balise <input type="text>. Cette balise ne convient absolument pas si la réponse attendue est un texte d'une certaine longueur... imaginez que l'on vous demande le résumé d'une conférence ou d'un livre, vos impressions relatives à un site ou toute autre réponse qui devrait occuper plusieurs lignes de texte...

La balise <textarea> offre au visiteur de vos pages d'écrire un roman... la balise de fin </textarea> est indispensable et tout ce qui sera écrit dans votre source entre les balises <textarea> et </textarea> se trouvera comme texte par défaut dans le cadre de réponse.
Des barres de défilement apparaitront dès que le texte introduit par l'internaute visiteur dépassera la place disponible dans le cadre prévu.

Propriétés de l'objet "textarea"

name Nom de la zone
rows Nombre de lignes
cols Nombre de colonnes
disabled Grisage de la zone
readOnly Lecture seule
class Classe de feuille de style
style Style de la liste

Méthodes applicables à l'objet "textarea"

Évènements associables à l'objet "textarea"

G. la balise <input> de type 'submit'

Une fois que votre visiteur a fini de remplir le formulaire, il faut qu'il puisse vous l'envoyer. Pour cela il lui faudra cliquer sur un bouton comme dans une boite de dialogue windows et dont la balise correspondante est <INPUT TYPE="submit"> dont l'attribut VALUE a pour valeur le texte affiché sur le bouton.

Propriétés de l'objet "input" de type 'submit'

Méthodes applicables à l'objet "input" de type 'submit'

Évènements associables à l'objet "input" de type 'submit'

II. Formulaires (suite)

input button, input radio, input password, input reset

voir suite >>>

VIII. Exercices relatifs aux formulaires

voir suite >>>

IX. Test relatif aux formulaires

voir suite >>>

---

Test relatif aux objets 'date' (35.9) | | formulaires II : input button, input radio, input password, input reset (36.2)

---