NuxBSD: Free Infos

Retour d'un niveau
Retour à l'accueil

Infos couleurs :

• méthode
• propriété
• élément HTML
• type
• événement
• objet

C'est ici que commence l'interaction avec l'utilisateur grâce aux nombreuses propriétés et méthodes dont sont dotés les éléments HTML utilisés dans les formulaires.

Les propriétés sont simple à utiliser, il faut d'abord mémoriser quelques propriétés de base.
Comme vu auparavant, il est possible d'accéder à n'importe quelle propriétés d'un éléments HTML juste en tapant son nom, il en va donc de même pour des propriétés spécifiques aux éléments d'un formulaire comme value, disabled, checked, etc …

La propriété la plus connue et la plus utilisée est value. Cette propriété permet de définir une valeur pour différent éléments d'un formulaire comme les élément HTML <input>, les <button>, etc…
Son fonctionnement est simple :

• on lui assigne une valeur (une chaîne de caractères ou un nombre qui sera alors converti implicitement)
• elle est immédiatement affichée sur l'élément HTML

  <input id="text" type="text" size="60" value="Vous n'avez pas le focus !" >
  <script>
    var text = document.getElementById('text'); // on attrape l'élément HTML par son id
 
    text.addEventListener('focus', function(e) { // on lui applique un événement 'focus'
        e.target.value = "Vous avez le focus !";
    }, true); 
 
    text.addEventListener('blur', function(e) {   // on lui applique un événement 'blur'
        e.target.value = "Vous n'avez pas le focus !";
    }, true);
  </script>

Test du code

On peut aussi utiliser cette propriété avec l'élément HTML <textarea>.
Attention : lorsque l'on utilise la propriété innerHTML pour récupérer le contenu dans l'élément HTML <textarea>, cela ne fonctionne pas !!
Il faut utiliser la propriété value à la place !

<textarea>Et voilà du texte !</textarea>

Contrairement à la propriété value, les trois propriétés disabled, checked et readonly ne s'utilisent pas de la même manière qu'en HTML où il suffit d'écrire, par exemple, <input type=“text” disabled=“disabled” /> pour désactiver un champ de texte.
En JavaScript, ces trois propriétés deviennent booléennes.

Ainsi, il suffit de faire comme ceci pour désactiver un champ de texte :

  <input id="text" type="text" >
  <script>
    var text = document.getElementById('text'); on attrape l'élément HTML par son id
    text.disabled = true; // on lui applique la propriété disabled
  </script>

L'utilisation avec les boutons de type radio. Chaque bouton radio coché se verra attribuer la valeur true à sa propriété checked, il va donc nous falloir utiliser une boucle for pour vérifier quel bouton radio a été sélectionné :

  <label><input type="radio" name="check" value="1" /> Case n°1</label><br />
  <label><input type="radio" name="check" value="2" /> Case n°2</label><br />
  <label><input type="radio" name="check" value="3" /> Case n°3</label><br />
  <label><input type="radio" name="check" value="4" /> Case n°4</label>
  <br /><br />
  <input type="button" value="Afficher la case cochée" onclick="check();" />
 
  <script>
    function check() {
        var inputs = document.getElementsByTagName('input'); on attrape l'élément HTML par son nom
        var inputsLength = inputs.length; // on compte le nombre d'input
 
        for (var i = 0 ; i < inputsLength ; i++) {
            if (inputs[i].type == 'radio' && inputs[i].checked) {
                alert('La case cochée est la n°'+ inputs[i].value);
            }
        }
    }
  </script>

Test du code

On peut aussi se faciliter la vie en utilisant la méthode querySelectorAll() :

  function check() {
    var inputs = document.querySelectorAll('input[type=radio]:checked'),
        inputsLength = inputs.length;
 
    for (var i = 0 ; i < inputsLength ; i++) {
        alert('La case cochée est la n°'+ inputs[i].value);
    }
  }

Toutes les vérifications concernant le type du champ et le fait qu'il soit coché ou non sont faites au niveau de querySelectorAll() , on peut ainsi supprimer l'ancienne condition.

Les listes déroulantes possèdent elles aussi leurs propres propriétés.
Nous allons en retenir seulement deux parmi toutes celles qui existent : selectedIndex, qui nous donne l'index (l'identifiant) de la valeur sélectionnée, et options qui liste dans un tableau les éléments <option> de notre liste déroulante.
Leur principe de fonctionnement est on ne peut plus classique :

  <select id="list">
    <option>Sélectionnez votre sexe</option>
    <option>Homme</option>
    <option>Femme</option>
  </select>
 
  <script>
    var list = document.getElementById('list');
 
    list.addEventListener('change', function() {
 
     // On affiche le contenu de l'élément <option> ciblé par la propriété selectedIndex
        alert(list.options[list.selectedIndex].innerHTML);
    }, true);
  </script>

Test du code

Attention : Dans le cadre d'un <select> multiple, la propriété selectedIndex retourne l'index du premier élément sélectionné.

Les formulaire ne possèdent pas uniquement des propriétés mais ils possèdent également des méthodes dont certaines sont bien pratiques!

L'élément HTML <form> possède deux méthodes intéressantes :

• submit() permet d'effectuer l'envoi d'un formulaire sans l'intervention de l'utilisateur
• reset() permet de réinitialiser tous les champs d'un formulaire

Ces deux méthodes ont le même rôle que les éléments HTML <input> de type submit ou reset.

L'utilisation de ces deux méthodes est toute simple, il suffit juste des les appeler sans aucun paramètre (elle n'en n'ont pas) et c'est fini :

  var element = document.getElementById('un_id_de_formulaire');
  element.submit(); // Le formulaire est expédié
  element.reset();  // Le formulaire est réinitialisé

Les deux événements : submit et reset, encore les mêmes noms ! Important : Il n'y a sûrement pas besoin de vous expliquer quand l'un et l'autre se déclenchent, cela paraît évident. Cependant, il est important de préciser une chose : envoyer un formulaire avec la méthode submit() du JavaScript ne déclenchera jamais l'événement submit !

  <form id="myForm">
    <input type="text" value="Entrez un texte" />
    <br /><br />
    <input type="submit" value="Submit !" />
    <input type="reset" value="Reset !" />
  </form>
 
  <script>
    var myForm = document.getElementById('myForm');
 
    myForm.addEventListener('submit', function(e) {
        alert('Vous avez envoyé le formulaire !\n\nMais celui-ci a été bloqué pour que vous ne changiez pas de page.');
        e.preventDefault();
    }, true);
 
    myForm.addEventListener('reset', function(e) {
        alert('Vous avez réinitialisé le formulaire !');
    }, true);
  </script>

Test du code

Vous vous souvenez des événements pour détecter l'activation ou la désactivation du focus sur un élément ? Eh bien il existe aussi deux méthodes, focus() et blur(), permettant respectivement de donner et retirer le focus à un élément HTML.
Leur utilisation est très simple :

  <input id="text" type="text" value="Entrez un texte" >
  <br /><br />
  <input type="button" value="Donner le focus" onclick="document.getElementById('text').focus();" /><br />
  <input type="button" value="Retirer le focus" onclick="document.getElementById('text').blur();" />

Test du code

Dans le même genre, il existe la méthode select() qui, en plus de donner le focus à l'élément HTML, sélectionne le texte de celui-ci si cela est possible :

  <input id="text" type="text" value="Entrez un texte" >
  <br /><br />
  <input type="button" value="Sélectionner le texte"   
  onclick="document.getElementById('text').select();" />

Test du code Bien sûr, cette méthode ne fonctionne que sur des champs de texte comme un élément HTML <input> de type text ou bien un sur un élément HTML <textarea>.

Il est important de revenir sur cet événement afin de clarifier quelques petits problèmes que vous pourrez rencontrer en l'utilisant.
Tout d'abord, il est bon de savoir que cet événement attend que l'élément HTML auquel il est attaché perde le focus avant de se déclencher (s'il y a eu modification du contenu de l'élément). Donc, si vous souhaitez vérifier l'état d'un input à chacune de ses modifications sans attendre la perte de focus, il vous faudra plutôt utiliser d'autres événements du style keyup (et ses variantes) ou click, cela dépend du type d'élément vérifié.
Et, deuxième et dernier point, cet événement est bien entendu utilisable sur n'importe quel input dont l'état peut changer, par exemple une checkbox ou un <input type=“file” />, n'allez surtout pas croire que cet événement est réservé seulement aux champs de texte !

• La propriété value s'emploie sur la plupart des éléments HTML de formulaire pour en récupérer la valeur.
• Les listes déroulantes fonctionnent différemment, puisqu'il faut d'abord récupérer l'index de l'élément sélectionné avec selectedIndex.
• Les méthodes focus() et blur() permettent de donner ou de retirer le focus à un élément de formulaire.
• Attention à l'événement onchange, car il ne fonctionne pas toujours comme son nom le suggère, en particulier pour les champs de texte.

Retour d'un niveau
Retour à l'accueil