Médiaforma

All posts tagged input

Plusieurs éléments HTML permettent de créer des formulaires, qui peuvent être transmis à des pages PHP ou envoyés par e-mail.

Balise Signification
<form name="nom" action="traitement.php" method="post">

</form>

Formulaire
<fieldset>contenu</fieldset> Groupe d’options permettant de rassembler plusieurs champs
<legend>texte</legend> Légende affichée dans un élément fieldset
<label>texte</label> Simple légende textuelle
<input type="text" name="Nom" id="identifiant" value="valeur"> Zone de texte
<input type="button" name="Nom" id="identifiant" value="Légende du bouton"> Bouton
<input type="image" src="image.jpg" id="identifiant"> Un bouton contenant une image
<input type="password" name="Nom" id="identifiant" value="valeur par défaut"> Zone de saisie d’un mot de passe
<input type="checkbox" name="Nom" id="identifiant" value="Valeur"> Case à cocher
<input type="radio" name="Nom" id="identifiant" value="Valeur"> Bouton radio
<input type="hidden" name="Nom" id="identifiant" value="valeur"> Champ caché. Bien qu’il n’apparaisse pas dans le formulaire, son contenu est envoyé au serveur lorsque l’utilisateur clique sur le bouton Submit
<input type="submit" name="Nom" id="identifiant" value="Texte affiché sur le bouton"> Bouton d’envoi, pour envoyer les données du formulaire au serveur
<input type="reset" name="Nom" id="identifiant" value="Texte affiché sur le bouton"> Bouton de réinitialisation du formulaire
<input type="email" name="Nom" id="identifiant"> Champ de saisie spécialisé pour recevoir des adresses e-mail
<input type="url" name="Nom" id="identifiant"> Champ de saisie spécialisé pour recevoir des adresses URL
<input type="file" name="Nom" id="identifiant"> Fichier local
<textarea cols="Nombre colonnes" rows="Nombre lignes" id="identifiant">

Texte par défaut

</textarea>

Zone de saisie multiligne
<select name="Nom" id="identifiant">

<option value="valeur1">

<option value="valeurN">

</select>

Liste déroulante
<select name="Nom" size="5" id="identifiant">

<option value="valeur1">

<option value="valeur5">

</select>

Zone de liste (ici, cinq éléments sont affichés)

Cliquez ici pour accéder au pack eBook+vidéos HTML5, CSS3, JavaScript

Dans cette rubrique, je vais vous montrer comment remplacer les zones de saisie des deux exemples précédents par des curseurs. Pour l’instant, ce code ne fonctionne que dans Google Chrome. Voici le résultat que nous cherchons à obtenir :

Dans Firefox et Internet Explorer, les curseurs seront représentés par des zones de texte.

Les portions CSS et JavaScript du document sont identiques à celles de la rubrique précédente. Nous n’y reviendrons pas. Par contre, n’hésitez pas à vous reporter aux rubriques “Alignement avec un tableau” et “Codes couleur en JavaScript” pour avoir des informations complémentaires à leur sujet.

Examinons le code HTML.

<table>

 <tr><td colspan=2><div id="div1"></div></td></tr>

 <tr><td>Rouge</td><td><input id="rouge" min="0" max="255" value="0" onchange="changeCouleur(event)"></td></tr>

 <tr><td>Vert</td><td><input id="vert" min="0" max="255" value="0" onchange="changeCouleur(event)"></td></tr>

 <tr><td>Bleu</td><td><input id="bleu" min="0" max="255" value="0" onchange="changeCouleur(event)"></td></tr>

 <tr><td colspan=2><div id="hexa"></div></td></tr>

</table>

Comme vous pouvez le remarquer, les balises <input> (c’est-à-dire les zones de saisie) ont été remplacées par des balises <input>. Cette simple substitution provoque l’affichage de curseurs dans Google Chrome. Les attributs min et max définissent les valeurs minimale et maximale de chaque curseur : 0 et 255. L’attribut value indique la position du curseur à l’ouverture du document. Cet attribut étant initialisé à 0 pour les trois curseurs, ils seront tous trois positionnés au minimum à l’ouverture de la page. Enfin, pour relier la position de chaque curseur avec la couleur d’arrière-plan de la balise div1, il faut définir une fonction événementielle qui sera exécutée à chaque modification d’un des curseurs. Pour cela, il suffit de capturer l’événement onchange. La fonction exécutée a pour nom changeCouleur(). Son code est quasiment identique à celui utilisé dans les deux rubriques précédentes. Reportez-vous à la rubrique “Codes couleur en JavaScript” pour en savoir plus à son sujet.


Cliquez ici pour accéder au pack eBook+vidéos HTML5, CSS3, JavaScript

Nous allons mettre en pratique ce qui a été vu dans les rubriques précédentes pour afficher une couleur en fournissant ses composantes RVB. Les valeurs Rouge, Vert et Bleu seront saisies dans des zones de texte. Un bouton de commande affichera le code hexadécimal correspondant et affectera ce code à l’attribut CSS background-color d’une balise <div> :

Examinons le code HTML, entre les lignes 29 et 38.

  • La ligne 30 définit la balise <div> d’identifiant div1. Cette balise sera utilisée pour représenter la couleur dont les composantes RVB sont spécifiées par l’utilisateur.
  • Les lignes 32 à 34 définissent les zones de texte d’identifiant rouge, vert et bleu.
  • La ligne 35 définit une deuxième balise <div> d’identifiant hexa. Cette balise sera utilisée pour afficher le code hexadécimal correspondant aux composantes décimales RVB saisies par l’utilisateur.
  • Enfin, la ligne 36 définit un bouton de commande et lui associe la fonction événementielle couleur(). Cette fonction sera exécutée à chaque clic sur le bouton de commande.

Examinons le code CSS, entre les lignes 4 et 11. Ce code est identique à celui des rubriques précédentes. Il définit la couleur d’arrière-plan (ici noir) et les dimensions de la balise <div> d’identifiant div1.

Examinons le code de la fonction JavaScript couleur(), entre les lignes 13 et 25.

  • Les lignes 15 à 17 récupèrent les valeurs numériques décimales qui se trouvent dans les zones de texte rouge, vert et bleu et les stockent dans les variables r, v et b.
  • La ligne 19 utilise ces trois valeurs pour calculer le code la couleur. Ce code est obtenu en multipliant la composante Rouge par 256*256, en y ajoutant la composante Vert multipliée par 256 et en y ajoutant la composante Bleu. Si cette technique ne vous est pas familière, sachez qu’elle permet d’obtenir une valeur unique composée à partir de trois valeurs codées entre 0 et 255.
  • La ligne 20 affecte le code de la couleur à la propriété backgroundColor de la balise <div>. Remarquez l’utilisation de la fonction parseInt() qui fournit une valeur entière à la propriété backgroundColor. Sans cette fonction, la valeur passée serait interprétée comme une chaîne de caractères et la propriété backgroundColor ne serait pas bien initialisée.
  • Il ne reste plus qu’à modifier le contenu de la balise <div> d’identifiant hexa. La ligne 22 définit la variable h et la relie à la balise <div> d’identifiant hexa.
  • La ligne 23 affiche la valeur hexadécimale de la couleur dans la balise <div> d’identifiant hexa. La conversion en hexadécimal est obtenue avec la fonction toString(16) appliquée à la variable codeCouleur.


Dans les rubriques précédentes, vous avez appris à accéder à des balises HTML en utilisant les fonctions JavaScript getElementById() et getElementsByName(). Ces fonctions sont très pratiques, mais elles nécessitent la définition d’attributs id ou name dans chacune des balises visées.

Dans cette rubrique, je vais vous présenter la fonction getElementsByTagName() qui permet de récupérer toutes les balises d’un certain type sans que celles-ci n’aient un attribut id ou name. Le résultat de la fonction est un tableau et chaque élément du tableau correspond à une balise.

Pour illustrer cette fonction, nous allons utiliser le code HTML de la rubrique précédente. Rappelons que ce code contient :

  • une balise <div> d’identifiant div1 ;
  • trois cases à cocher ;
  • un bouton de commande.

A titre d’exemple, la fonction getElementsByTagName() sera utilisée pour compter le nombre de balises <input> contenues dans le document. Le code JavaScript est défini dans la fonction test(), entre les lignes 5 et 9.

La ligne 7 définit la variable lesInput et l’initialise avec le résultat de la fonction getElementsByTagName(). L’argument “input” est passé à cette fonction, car on cherche à compter le nombre de balises< input> contenues dans le document.

Rappelez-vous : la fonction getElementsByTagName() retourne un tableau. La ligne 8 applique la fonction length à la variable lesInput pour connaître le nombre d’éléments contenus dans le tableau et donc, le nombre de balises <input> contenues dans le document. Le résultat est affiché dans la balise <div> en utilisant la technique habituelle. A savoir, la fonction innerHTML appliquée à l’objet div.

Exécutons ce code dans un navigateur. Un clic sur le bouton de commande affiche le nombre de balises <input> contenues dans le document :

Remarque
Il est possible de connaitre les valeurs stockées dans les attributs des balises récupérées avec la fonction getElementsByTagName(). Ainsi par exemple :

  • lesInput[2].name renvoie la valeur “couleur”, puisque l’attribut name de la troisième balise <input> vaut couleur.
  • lesInput[3].value renvoie la valeur “Cliquez ici” puisque l’attribut value de la quatrième balise <input> vaut “Cliquez ici”.


Cliquez ici pour accéder au pack eBook+vidéos HTML5, CSS3, JavaScript

La fonction JavaScript getElementById() n’est pas la seule à pouvoir récupérer un élément HTML. Vous pouvez également utiliser la fonction getElementsByName(). Ces deux fonctions agissent de manière similaire, si ce n’est que la première utilise l’attribut id pour récupérer l’élément HTML alors que la deuxième utilise l’attribut name.

Pour illustrer la fonction getElementsByName(), nous allons laisser l’utilisateur cocher une ou plusieurs cases, vérifier quelles cases sont cochées et afficher un message en conséquence.

Examinons le code HTML.

  • La ligne 26 définit une balise <div> d’identifiant div1 qui invite l’utilisateur à cocher une ou plusieurs cases :

<div id=”div1″>Quelles couleurs aimez-vous ?</div>

  • Les lignes 28 à 30 affichent trois cases à cocher de nom couleur :

<input type=”checkbox”> Bleu <br>

<input type=”checkbox”> Rouge <br>

<input type=”checkbox”> Vert <br>

  • Enfin, la ligne 31 définit un bouton de commande, y insère le texte “Cliquez ici” et lui associe la fonction événementielle test(). Cette fonction sera exécutée à chaque clic sur le bouton :

<input type=”button” value=”Cliquez ici”>

Ce code est vraiment très simple. Nous allons maintenant nous intéresser à la fonction JavaScript test(), définie entre les lignes 4 et 22.

Au début de la fonction, la variable aime est définie et initialisée avec une chaîne vide.

La ligne 8 teste l’état de la première case à cocher :

if (document.getElementsByName(‘couleur’)[0].checked == true)

Cette instruction vous paraît peut-être complexe. Rassurez-vous : en la décortiquant, vous verrez qu’elle est élémentaire. La fonction document.getElementsByName(‘couleur’) récupère l’objet dont l’attribut name vaut “couleur”. Comment est-ce possible me direz-vous puisque trois balises <input> ont un attribut name égal à “couleur” ? Eh bien, c’est là qu’intervient la suite de l’instruction. Le nombre spécifié entre crochets identifie l’une des cases à cocher. La première à pour valeur “0”, la deuxième “1” et la troisième “2”. Quant à la fonction checked, elle renvoie la valeur true (c’est-à-dire vrai) si la case est cochée, et la valeur false (c’est-à-dire faux) si la case est décochée.

Maintenant, je suis sûr que vous comprenez parfaitement l’instruction de la ligne 8. Pour ceux qui auraient encore des doutes, elle teste si la première case est cochée. Dans l’affirmative, l’instruction entre les accolades est exécutée. Cette instruction affecte le texte “Vous aimez le bleu.” Suivi d’un passage à la ligne à la variable aime.

Les deux blocs d’instructions suivants ne devraient pas vous poser de problème. La ligne 12 teste si la deuxième case est cochée. Dans l’affirmative, le texte “Vous aimez le rouge.” suivi d’un passage à la ligne est ajouté à la variable aime. Quant à la ligne 16, elle teste si la troisième case est cochée. Dans l’affirmative, le texte “Vous aimez le vert.” suivi d’un passage à la ligne est ajouté à la variable aime.

La ligne 20 affecte la variable aime au contenu de la balise <div> et donc affiche un a trois “Vous aimez…” en fonction des cases cochées.

Exécutons ce code dans un navigateur. Ici par exemple, je coche les cases Bleu et Rouge, puis je clique sur le bouton. Les messages affichés indiquent clairement les cases qui sont cochées.


Cliquez ici pour accéder au pack eBook+vidéos HTML5, CSS3, JavaScript

Il est parfois bien pratique de donner le focus à une zone de saisie. Par exemple, lorsque vous vous connectez sur votre moteur de recherche préféré, une barre de saisie verticale clignote dans la zone de recherche, vous invitant à entrer quelques mots pour lancer une recherche. Si une de vos pages contient un formulaire de saisie, pourquoi ne pas donner le focus à la première zone de saisie ? Je suis sûr que vos utilisateurs apprécieraient cette attention. D’autant plus qu’en JavaScript, c’est un vrai jeu d’enfant …

Pour illustrer le code JavaScript à utiliser, nous allons définir un formulaire contenant deux textes, deux zones de saisie et deux boutons de commande.

Le corps du document est écrit en HTML. Il est défini entre les lignes 16 et 23 :

  • La ligne 18 affiche un texte et une zone de saisie d’identifiant entree1.
  • La ligne 19 définit un bouton de commande, y affiche le texte “Donner le focus à la zone de saisie 1” et met en place la fonction événementielle focus1() qui sera exécutée lorsque l’utilisateur clique sur le bouton de commande.
  • La ligne 20 est semblable à la ligne 18. Si ce n’est que la zone de saisie mise en place a pour identifiant saisie2.
  • Enfin, la ligne 21 définit un deuxième bouton de commande, y affiche le texte “Donner le focus à la zone de saisie 2” et met en place la fonction événementielle focus2() qui sera exécutée lorsque l’utilisateur clique sur le bouton de commande.

Passons au code JavaScript :

  • La fonction focus1() ne contient qu’une instruction, ligne 7. Après avoir récupéré l’élément d’identifiant entree1, c’est-à-dire la première zone de texte, la fonction JavaScript focus() lui est appliquée. Cette simple instruction provoque l’apparition d’un point d’insertion clignotant dans la première zone de saisie. Toute frappe au clavier sera placée dans cette zone.
  • La fonction focus2() est en tout point identique à la fonction focus1(), si ce n’est qu’elle donne le focus à la deuxième zone de texte.

Exécutons ce code dans un navigateur. Comme vous pouvez le voir, les deux boutons sont fonctionnels.


Cliquez ici pour accéder au pack eBook+vidéos HTML5, CSS3, JavaScript

Cette rubrique est très importante. Elle va vous montrer comment accéder au contenu d’une balise HTML et modifier ce contenu. Ici, nous allons modifier le contenu d’une balise <input> de type text, c’est-à-dire d’une zone de texte. Le texte affiché dans la zone de texte sera mis en majuscule lorsque l’utilisateur cliquera sur un bouton de commande.

En utilisant une technique similaire, vous pourrez modifier le contenu de nombreuses autres balises HTML.

Le corps du document contient un formulaire composé de deux éléments :

  • Une balise <input> de type text et d’identifiant saisie.
  • Une balise <input> de type button. Le texte affiché sur le bouton est défini dans l’attribut value. Lorsque l’utilisateur clique sur le bouton, la fonction JavaScript majuscules() est exécutée.

Nous allons maintenant nous intéresser au code JavaScript. La fonction majuscules() est exécutée à chaque appui sur le bouton de commande. Dans un premier temps, la fonction  getElementById() est utilisée pour récupérer l’objet HTML d’identifiant saisie. Prenez quelques secondes pour examiner la syntaxe utilisée : document.getElementById(“saisie”). La fonction getElementById() est appliquée au document et l’objet à récupérer a pour identifiant saisie. Finalement, vous voyez que cette instruction n’a rien de bien sorcier. L’objet retourné est stocké dans une variable nommée objet.

Pour obtenir la valeur stockée dans la zone de texte, c’est-à-dire dans l’objet ayant pour nom … objet, il suffit d’appliquer le suffixe value à cet objet. Ainsi, objet.value correspond au texte affiché dans la zone de texte. Pour transformer ce texte en caractères majuscules, nous utilisons la fonction JavaScript toUpperCase(). Comme vous pouvez le voir, cette fonction suffixe objet.value, et donc, donne la version majuscule de la zone de texte. En affectant objet.value.toUpperCase() à objet.value, la version majuscule de la zone de texte est affichée dans la zone de texte. C’est ainsi qu’un clic sur le bouton de commande transforme le contenu de la zone de texte en majuscules.

Exécutons ce code dans un navigateur. Ici, je tape le texte “BonJouR” dans la zone de texte puis j’appuie sur le bouton de commande. Comme prévu, toutes les lettres sont transformées en majuscules :