Les propriétés

Les formulaires sont simples à utiliser, cependant il faut d'abord mémoriser quelques propriétés de base.
Comme vous le savez déjà, il est possible d'accéder à n'importe quelle propriété d'un élément 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. Nous allons voir ici comment utiliser ces propriétés spécifiques aux formulaires.

Une propriété classique : value

Commençons par la propriété la plus connue et la plus utilisée : value ! Pour ceux qui ne se souviennent pas, cette propriété permet de définir une valeur pour différents éléments d'un formulaire comme les <input>, les <button>, etc. Son fonctionnement est simple comme bonjour, on lui assigne une valeur (une chaîne de caractères ou un nombre qui sera alors converti implicitement) et elle est immédiatement affichée sur votre élément HTML. Exemple :

var text = document.getElementById('text');

text.addEventListener('focus', function(e) {

e.target.value = "Vous avez le focus !";

}, true);

text.addEventListener('blur', function(e) {

e.target.value = "Vous n'avez pas le focus !";

}, true);

</script>

Alors par contre, une petite précision ! Cette propriété s'utilise aussi avec un élément <textarea> ! En effet, en HTML, on prend souvent l'habitude de mettre du texte dans un <textarea> en écrivant :

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

Du coup, en Javascript, on est souvent tenté d'utiliser innerHTML pour récupérer le contenu de notre <textarea>, cependant cela ne fonctionne pas : il faut bien utiliser value à la place !

Les booléens avec disabled, checked et readonly

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 vous 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 vous suffit de faire comme ceci pour désactiver un champ de texte :

var text = document.getElementById('text');

text.disabled = true;

</script>

Il n'est probablement pas nécessaire de vous expliquer comment fonctionne la propriété checked avec une checkbox, il suffit d'opérer de la même manière qu'avec la propriété disabled. En revanche, mieux vaut détailler son 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é :

function check() {

var inputs = document.getElementsByTagName('input'),

inputsLength = inputs.length;

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>

Voilà donc pour les boutons radio, le principe est simple, il suffit juste d'y penser !

Les listes déroulantes avec selectedIndex et options

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 :

<option>Sélectionnez votre sexe</option>

<option>Homme</option>

<option>Femme</option>

</select>

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>

Créé avec HelpNDoc Personal Edition: Générateur complet d'aides multi-formats