Premiers pas en JavaScript
36.1 Formulaires (I)

form, input text, select, input hidden, input checkbox,
textarea, input submit
cuy copyleft
  See You Why?  

 


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

Contenu


JavaScript 1 - Introduction
JavaScript 2 - Commentaires et instructions
JavaScript 3 - Variables
JavaScript 4 - Types de variables
JavaScript 5 - Variables et chaines
JavaScript 6 - Les fonctions
JavaScript 7 - Les fonctions à paramètre unique
JavaScript 8 - Les fonctions à paramètres multiples
JavaScript 9 - L'instruction RETURN dans une fonction
JavaScript 10 - Appel d'une fonction dans une autre fonction
JavaScript 11 - Les variables locales ou globales
JavaScript 12 - Quelques opérateurs mathématiques
JavaScript 13 - ???
JavaScript 14 - L'instruction IF, pour les conditions
JavaScript 15 - L'instruction IF... ELSE..., pour les conditions à deux sorties
JavaScript 16 - Les IF imbriqués et fonction aléatoire
JavaScript 17 - Les conditions complexes
JavaScript 18 - L'instruction SWITCH, en cas de choix multiples
JavaScript 19 - La boucle FOR
JavaScript 20 - La boucle WHILE
JavaScript 21 - Les événements dans la programmation
JavaScript 22 - Quelques événements : onMouseOver onLoad etc.
JavaScript 23 - Les objets
JavaScript 24 - Créer ses propres objets
JavaScript 25 - Appliquer des méthodes à ses objets
JavaScript 26 - Les tableaux
JavaScript 27 - Différentes façons de créer des tableaux
JavaScript 28 - Propriétés et méthodes applicables aux tableaux
JavaScript 29 - Les méthodes applicables aux tableaux
JavaScript 30 - Méthodes de tris pour tableaux SORT, REVERSE et PUSH
JavaScript 31 - Ajouter des éléments à un tableau en utilisant une boucle
JavaScript 32 - Tecnique pour imprimer les éléments d'un tableau
JavaScript 33 - Lecture de bases de données
JavaScript 34 - Les objets mathématiques
JavaScript 35 - Les objets relatifs aux dates
JavaScript 36 - Les formulaires JS sont des objets
36.1 JS : Formulaires I : form, input text, select, input hidden, input checkbox, textarea, input submit
36.2 JS : Formulaires II : input button, input radio, input password, input reset
36.8 JS : exercices sur les formulaires
36.9 JS : un test sur les formulaires
JavaScript 37 - Accès aux éléments d'un formulaire
JavaScript 38 - Validation des entrées d un formulaire
JavaScript 39 - Graphisme et JavaScript

JavaScript 50 - Calculateur d'emprunt
JavaScript 51 - Calendrier perpétuel et options diverses
JavaScript 99 - Documentation


 
 

 
Avec un peu de JavaScript,
n'oubliez pas de rendre vos pages
plus dynamiques et plus interactives.
 

 
 

 
Notre volonté est de rendre cette formation de JavaScript,
disponible le plus rapidement possible.
Le lecteur excusera l'imperfection de ce travail en cours de construction
et pourrait nous informer des défauts rencontrés.

  MERCI
 

 

 

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 :

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

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

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"

action
(facult.)
facultatif si vous ne souhaitez pas faire appel au serveur... sinon,
définit la destination où sont envoyées les données,
l'url de la page qui recevra les données du formulaire saisies par l'utilisateur,
en règle générale c'est un cgi ou une page dynamique type php ou asp...
enctype
(facult.)
définit le type d'encodage du formulaire,
envoyé au serveur lorsque l'attribut method vaut post...
peut valoir 'text/plain' , 'application/x-www-form-urlencoded' ou 'multipart/form-data'
method définit la méthode d'appel du script défini dans "action",
peut valoir 'get' ou 'post'...
name
(facult. mais quasi oblig.)
définit le nom du formulaire créé,
une page peut contenir plusieurs formulaires qui doivent avoir des "name" différents...
le name est généralement attribué par l'attribut NAME de la balise FORM
target
(facult.)
définit la fenêtre destination dans laquelle s’affichera la réponse du traitement du formulaire. Celle-ci est précisée à l’aide de l’attribut TARGET de la balise FORM. Si non précisé, la valeur par défaut est la page courante qui sera remplacée.
elements
(facult.)
définit tous les éléments du formulaire.
Ce peut être des boutons, des champs, cases à cocher, des boutons radio, etc.
id
(facult.)
définit une identification unique à une balise d'un document.

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

 

enctype, suivi de ?

 

action, suivi de ?

name, suivi de et pourquoi ?

 

name et id, la même chose ?

 

 

Méthodes applicables à l'objet "form"

reset
pour annuler les opérations déjà effectuées et
pour réinitialiser toutes les données du formulaire à leur valeur d'origine...
submit
pour accepter les opérations effectuées et
pour exécuter l'instruction notée dans le paramètre 'action' du formulaire...

 

vvv

 

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

onreset
constate l'annulation des opérations déjà effectuées et
et la réinitialisation de toutes les données du formulaire à leur valeur d'origine...
onsubmit
détecte l'acceptation des opérations effectuées et
et ordonne l'exécution de l'instruction notée dans le paramètre 'action' du formulaire...

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 :

Votre Adresse Email

et dont la source sera :

<form method='post' action='http://www.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'

checked détermine si une case à cocher (checkbox) ou un bouton d'option (radio) est coché ou non...
class attribue ou détermine le nom d'une classe de style pour formatter la zone de texte...
defaultvalue détermine une valeur par défaut de ce champ...
très utile en cas de 'reset', c'est-à-dire de réinitialisation du formulaire...
disabled rend le champ du formulaire inopérant,
ce champ devient grisâtre...
maxlength définit la limite du nombre de caractères acceptés pour la réponse...
indépendamment de la taille de la zone de texte.
name définit tous les éléments du formulaire.
Ce peut être des boutons, des champs, cases à cocher, des boutons radio, etc.
id définit une identification unique à une balise d'un document.
readonly n/a ici
détermine qu'une zone multiligne (textarea) est en lecture seule.
size définit la taille visible du champ en nombre de caractères.
mais la réponse peut être plus longue, mais ne sera plus visible entièrement...
style définit le type de style à utiliser (caractères, police, centrage, etc.).
type définit le type d'entrée (ici : 'text'), le type d'input.
pourrait aussi être password, radio, checkbox, reset, submit, file
value définit un texte par défaut, noté dans ce champ...
ne pas confondre avec la valeur par défaut.
range définit un espace de valeurs numériques acceptées...
souvent situé à tort dans les propriétés d'un <input> de type 'text'
c'est une nouvelle balise HTML5 : <input> de type 'range' voir ici
rows n/a ici
définit le nombre de lignes utilisables dans un TEXTAREA...
cols n/a ici
définit le nombre de colonnes (ou de caractères) utilisables dans un TEXTAREA...

 

 

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

focus
pour prendre le focus, prendre la main, activer...
blur
pour enlever ou perdre le focus ou la main
pour désactiver...
click n/a ici
pour simuler un "clic"
add n/a ici
pour ajouter un choix possible, une ligne (un <option>)
remove n/a ici
pour supprimer un choix possible, une ligne (un <option>)

 

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

onFocus
détecte la prise de focus ou l'activation du champ
onBlur
détecte la perte de focus ou la désactivation du champ
onClick n/a ici
détecte un clic de souris
onChange détecte une modification du champ

 

 
 

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

checked détermine si une case à cocher (checkbox) ou un bouton d'option (radio) est coché ou non...
class attribue ou détermine le nom d'une classe de style pour formatter la liste...
defaultvalue détermine une valeur par défaut de ce champ...
très utile en cas de 'reset', c'est-à-dire de réinitialisation du formulaire...
disabled rend le champ du formulaire inopérant,
ce champ devient grisâtre...
maxlength définit la limite du nombre de caractères acceptés pour la réponse...
indépendamment de la taille de la zone de texte.
name définit tous les éléments du formulaire,
ici la liste des options possibles
id définit l'identification unique de la liste d'un document.
readonly n/a ici
détermine qu'une zone multiligne (textarea) est en lecture seule.
size définit le nombre de lignes à afficher,
même si la liste est beaucoup plus longue et ne sera plus visible entièrement...
style définit le type de style à utiliser (caractères, police, centrage, etc.).
type n/a ici
définit le type d'entrée (ici : 'text'), le type d'input.
value n/a ici
définit un texte par défaut, noté dans ce champ...
range n/a ici
définit un espace de valeurs numériques acceptées...
c'est une nouvelle balise HTML5 : <input> de type 'range' voir ici
rows n/a ici
définit le nombre de lignes utilisables dans un TEXTAREA...
cols n/a ici
définit le nombre de colonnes (ou de caractères) utilisables dans un TEXTAREA...

 

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

focus
pour prendre le focus, prendre la main, activer...
blur
pour enlever ou perdre le focus ou la main
pour désactiver...
click n/a ici
pour simuler un "clic"
add pour ajouter un choix possible, une ligne (un <option>)
remove pour supprimer un choix possible, une ligne (un <option>)

 

É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'

checked détermine si une case à cocher (checkbox) ou un bouton d'option (radio) est coché ou non...
class attribue ou détermine le nom d'une classe de style pour formatter la zone de texte...
defaultvalue détermine une valeur par défaut de ce champ...
très utile en cas de 'reset', c'est-à-dire de réinitialisation du formulaire...
disabled rend le champ du formulaire inopérant,
ce champ devient grisâtre...
maxlength définit la limite du nombre de caractères acceptés pour la réponse...
indépendamment de la taille de la zone de texte.
name définit tous les éléments du formulaire.
Ce peut être des boutons, des champs, cases à cocher, des boutons radio, etc.
id définit une identification unique à une balise d'un document.
readonly n/a ici
détermine qu'une zone multiligne (textarea) est en lecture seule.
size définit la taille visible du champ en nombre de caractères.
mais la réponse peut être plus longue, mais ne sera plus visible entièrement...
style définit le type de style à utiliser (caractères, police, centrage, etc.).
type définit le type d'entrée (ici : 'text'), le type d'input.
pourrait aussi être password, radio, checkbox, reset, submit, file
value définit un texte par défaut, noté dans ce champ...
ne pas confondre avec la valeur par défaut.
range définit un espace de valeurs numériques acceptées...
souvent situé à tort dans les propriétés d'un <input> de type 'text'
c'est une nouvelle balise HTML5 : <input> de type 'range' voir ici
rows n/a ici
définit le nombre de lignes utilisables dans un TEXTAREA...
cols n/a ici
définit le nombre de colonnes (ou de caractères) utilisables dans un TEXTAREA...

name | checked | disabled | readOnly | class | style

 

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

focus
pour prendre le focus, prendre la main, activer...
blur
pour enlever ou perdre le focus ou la main
pour désactiver...
click pour simuler un "clic"
add n/a ici
pour ajouter un choix possible, une ligne (un <option>)
remove n/a ici
pour supprimer un choix possible, une ligne (un <option>)

 

É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"

checked détermine si une case à cocher (checkbox) ou un bouton d'option (radio) est coché ou non...
class attribue ou détermine le nom d'une classe de style pour formatter la zone de texte...
defaultvalue détermine une valeur par défaut de ce champ...
très utile en cas de 'reset', c'est-à-dire de réinitialisation du formulaire...
disabled rend le champ du formulaire inopérant,
ce champ devient grisâtre...
maxlength définit la limite du nombre de caractères acceptés pour la réponse...
indépendamment de la taille de la zone de texte.
name définit tous les éléments du formulaire.
Ce peut être des boutons, des champs, cases à cocher, des boutons radio, etc.
id définit une identification unique à une balise d'un document.
readonly n/a ici
détermine qu'une zone multiligne (textarea) est en lecture seule.
size définit la taille visible du champ en nombre de caractères.
mais la réponse peut être plus longue, mais ne sera plus visible entièrement...
style définit le type de style à utiliser (caractères, police, centrage, etc.).
type définit le type d'entrée (ici : 'text'), le type d'input.
pourrait aussi être password, radio, checkbox, reset, submit, file
value définit un texte par défaut, noté dans ce champ...
ne pas confondre avec la valeur par défaut.
range définit un espace de valeurs numériques acceptées...
souvent situé à tort dans les propriétés d'un <input> de type 'text'
c'est une nouvelle balise HTML5 : <input> de type 'range' voir ici
rows n/a ici
définit le nombre de lignes utilisables dans un TEXTAREA...
cols n/a ici
définit le nombre de colonnes (ou de caractères) utilisables dans un 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"

focus
pour prendre le focus, prendre la main, activer...
blur
pour enlever ou perdre le focus ou la main
pour désactiver...
click n/a ici
pour simuler un "clic"
add n/a ici
pour ajouter un choix possible, une ligne (un <option>)
remove n/a ici
pour supprimer un choix possible, une ligne (un <option>)

 

É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'

disabled rend le bouton de type submit du formulaire inopérant,
ce bouton devient grisâtre...
form définit la référence du formulaire qui contient ce bouton 'submit'...
name fixe ou renvoie le nom donné au bouton 'submit'.
id définit une identification unique au bouton 'submit'.
value définit un texte par défaut, noté sur ce bouton de type 'submit'...
Ce peut être 'Valider', 'Confirmer' ou 'Envoyer' ou...

 

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)