Accueil Casino argent reel Meilleur casino Nouveaux casinos Live casino

Premiers pas en JavaScript 36.2 Formulaires (II) input button, input radio, input password, input reset

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 :

• 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,
• 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 cette séquence-ci, il nous reste à 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 <> qui,
• la 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.

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'

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'

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'

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'

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'

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)

---