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)

---

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? EasyCounter     BelStat 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   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).