Premiers pas en JavaScript
36.2 Formulaires (II)

input button, input radio, input password, input reset
cuy copyleft
  See You Why?  

 


formulaires : input button, input radio, input password, input reset (36.1) | | formulaires : exercices (36.8)

Contenu

 

 

I. Formulaires

voir <<< séquence précédente

 

 

II. Les formulaires (suite)

Dans la séquence précédente, nous n'avons abordé que les balises utilisées dans le formulaire de contact que vous apercevez dans chaque bas de page de notre site, à savoir :

Dans cette séquence-ci, il nous reste à aborder les autres balises propres aux formulaires, à savoir :

 
 

H. la balise <input> de type 'button'

Pour des besoins de contrôle d'un formulaire JS, vous pourriez être amené à créer un bouton qui ne soit dédié ni à l'envoi du formulaire ni à son ré-initialisation, mais qui appellerait une fonction JS.
L'utilisation de la balise <INPUT TYPE="button"> fera apparaître un bouton simple qui peut appeler une fonction JS.

 

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

action
(oblig.)
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.

name | value | defaultvalue | size | maxlength | disabled | readOnly | class | style

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

 

focus | blur | click

 

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

vvv

 
 

I. la balise <input> de type 'radio'

Si vous avez compris la balise <input> de type 'checkbox', vous avez compris la balise <input> de type 'radio' qui est identique sauf qu'elle ne permet qu'un choix unique de l'internaute visiteur de vos pages.
On peut apprécier plusieurs sports, mais on n'est que d'un seul sexe... on peut aimer plusieurs prénoms, mais n'avoir qu'une seule civilité (M., Mme ou Mlle).

Grâce au bouton radio, un seul choix est possible, même si le nombre de propositions n'est pas limité.

Les syntaxes des <input> de type 'checkbox' et de type 'radio' sont très proches.

 

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

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 | value | checked | disabled | readOnly | class | style

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

focus | blur | click

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

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 détecte un clic de souris
onChange n/a ici
détecte une modification du champ
   
   
   

 

 
 

J. la balise <input> de type 'password'

Si l'utilisateur peut réagir en saisissant une ligne de texte, il pourra aussi le faire sans que son texte ne soit affiché... c'est le propre de l'<input> de type 'password' qui remplace les caractères introduits par des astérisques (*). Cela rend aussi impossible la copie du contenu de cette ligne de saisie. C'est donc l'outil idéal pour entrer des mots de passe... d'où le nom du type d'input.

Pour le reste, elle a les mêmes caractéristiques (propriétés, méthodes et évènements associables) que l'<input> de type 'text' vue dans la séquence précédente.

 

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

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

focus | blur

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

 

 
 

K. la balise <input> de type 'reset'

Si l'internaute visiteur change d'avis et souhaite annuler ses réponses au formulaire, l'utilisation de la balise <INPUT TYPE="reset"> fera apparaître un bouton qui permettra de réinitialiser le formulaire et donc d'effacer toutes les réponses données au formulaire.

 

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

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

 

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

 

 

 
 

L. la balise <input> de type 'range'

Peu souvent présenté dans un cours ou un tutoriel, la balise <input type="range"...> permet d'introduire une valeur numérique comprise entre deux valeurs limites : un minimum et un maximum ce qui lui vaut les attributs min=0 et max=20 par exemple.

Pas étonnant qu'on ne la trouve pas souvent, c'est une nouvelle balise propre au HTML5 et que tous les navigateurs ne maitrisent pas encore... d'où prudence à l'emploi. Ne soyez pas étonnés tantôt de découvrir un curseur semblable au volume d'une radio, tantôt un input de type text qui ne vérifie rien... :-(

La syntaxe correcte de cette balise est :

     <input class="score" type="range" min=0 max=20 name="pronostic">

qui fera apparaître sur VOTRE ORDINATEUR :

 
 

M. la propriété getElementById()

Rappelons-nous ce qui a été dit dans l'historique du JS. Le modèle DOM, spécialement conçu pour les langages orientés objet, a créé une propriété getElementByID() qui retourne un objet HTML à partir de son 'id', défini dans la propriété 'id' de la balise de l'objet.

On vous avait averti de ne pas confondre deux propriétés assez proches : la propriété id et la propriété name. Il est cependant possible de retrouver tous les objets d'une page en utilisant la propriété getElementByName().

Ainsi, au lieu de retenir toute la hiérarchie des objets d'une page, à savoir : document.forms["formul_deux"].elements[0].type ou encore document.forms["formul_deux"].elements["prenom"].type,
il suffit de connaitre l'ID' de l'objet (nous avions proposé d'employer le même nom pour 'name' et pour 'ID', mais l'ID' doit être unique pour une page, alors que le 'name' ne caractérise qu'un objet dans un seul formulaire) pour pouvoir écrire : document.getElementByID("prenom").type

Le lecteur aura remarqué l'emploi de parenthèses (comme une fonction) et plus de crochets (comme pour les tableaux).

 

 

VIII. Exercices relatifs aux formulaires

voir suite >>>

 

 

IX. Test relatif aux formulaires

voir suite >>>

 

 


formulaires : input button, input radio, input password, input reset (36.1) | | formulaires : exercices (36.8)

 

 

Merci de votre visite à partir de :

Vous êtes sur :
https://cuy.be/cours/jvs/jvs_362_acces_formulaire_II.html

partager sur FaceBook...           consulter sur FaceBook...

 

copyleft
Des liens ne fonctionnent plus ?
Avez-vous des suggestions ?
des commentaires, des corrections, un encouragement... ?
Pour info : Non, il n'y a pas de version papier ou DOC, PDF, etc. de ces notes.


Envoyez-moi un E-Mail (cuy(point)w(at)skynet(point)be)

Attention (at) signifie @ et (point) signifie .

Accueil CUY = See you why?

Compteur gratuitEasyCounter     BelStat Monitored by BelStat - Your Site Counts
La 1 000 000e page a été visitée le 21 mai 2010.
La 2 000 000e page a été visitée ce 18 mars 2012, vers midi.
La 3 000 000e page a été visitée ce 7 janvier 2014 entre 18 h et 18 h 45,
La 4 000 000e page a été visitée ce 5 juin 2015 entre 15 h 49 et 15 h 52,
La 5 000 000e page a été visitée ce 29 aout 2017 après 23 h 30,
Et la 6 000 000e page visitée, trop tôt pour y penser ?
 
et, d'après BelStat, CUY est visité surtout en semaine, peu le weekend...
moins et irrégulièrement pendant les vacances :

visites sur 3 mois, de la mi octobre 2013 à la mi janvier 2014.
 
La 3 333 333e page visitée a eu lieu ce mardi 10 juin 2014, en début d'après midi...
La 3 666 666e page visitée a eu lieu ce dimanche 28 decembre 2014, vers 16 h...
Un tiers de million de pages visitées en 154 jours cela fait une moyenne de 2165 pages visitées par jour...
Deux tiers de million de pages visitées en 355 jours soit une moyenne de 1878 pages visitées par jour...
et seulement 1195 pages visitées quotidiennement pendant les vacances estivales
de la mi juin à la mi septembre 2014

Vous voulez lire quelques messages reçus ?
quelques encouragements ?
Cliquez ici


Fin septembre 2009, installation de ce compteur
qui ne compte chaque nouvel ordinateur visiteur qu'une seule fois
free counter
 
m-à-j du 22/11/2021 :

Depuis cette fin septembre 2009, parmi les 210 pays (sur 274 drapeaux connus) qui nous ont visité,
voici les 100 pays qui nous visitent le plus, 
Nos petits visiteurs, classés par date de visite, où un seul ordi nous a visité, sont :
199. Turkmenistan (TM May 10, 2017) ; 200. Lesotho (LS March 1, 2017) ;
201. Turks and Caicos Island (TC January 18, 2016
202. Cook Islands (CK September 19, 2015)  203. Faroe Islands (FO January 27, 2015
204. Virgin Islands American (VI November 12, 2014) ;
205. Belize (BZ September 29, 2014) ;206. Eswatini - Swaziland (SZ July 21, 2014) ;
207. Grenada (GD April 3, 2014) ; 208. Timor-Leste (TI March 29, 2014) ;
209. American Samoa (AS December 26, 2012) ; 210. Guyana (GY November 5, 2010).