Meilleure pratique : Accéder aux éléments de formulaire par l'attribut HTML id ou name ?

Question

Comme tout développeur JavaScript expérimenté le sait, il existe de nombreuses (trop nombreuses) façons de faire la même chose. Par exemple, disons que vous avez un champ de texte comme suit :

<form name="myForm">  
    <input type="text" name="foo" id="foo" />

Il existe plusieurs façons d'y accéder en JavaScript :

[1]  document.forms[0].elements[0];
[2]  document.myForm.foo;
[3]  document.getElementById('foo');
[4]  document.getElementById('myForm').foo;
     ... and so on ...

Les méthodes [1] et [3] sont bien documentées dans la documentation de Mozilla Gecko, mais aucune n'est idéale. La méthode [1] est tout simplement trop générale pour être utile et la méthode [3] requiert à la fois un identifiant et un nom (en supposant que vous envoyez les données à un langage côté serveur). Idéalement, il est préférable de n'avoir qu'un attribut id ou un attribut name (avoir les deux est plus compliqué). quelque peu redondant, surtout si l'id n'est nécessaire pour aucun css, et augmente la probabilité de fautes de frappe, etc).

[Mais je ne l'ai pas vu référencé dans la documentation de Gecko et je m'inquiète à la fois de la compatibilité ascendante et de la compatibilité entre navigateurs (et bien sûr, je veux être aussi conforme aux normes que possible).

Quelle est la meilleure pratique en la matière ? Quelqu'un peut-il indiquer quelque chose dans la documentation DOM ou dans les spécifications du W3C qui pourrait résoudre ce problème ?

Notez que je suis spécifiquement intéressé par une solution sans bibliothèque (jQuery/Prototype).

Answer 1

Donnez à votre formulaire un id seulement, et votre entrée a nom seulement :

<form id="myform">
  <input type="text" name="foo">

La façon la plus conforme aux normes et la moins problématique d'accéder à votre élément d'entrée est donc via :

document.getElementById("myform").elements["foo"]

en utilisant .elements["foo"] au lieu de simplement .foo est préférable car ce dernier pourrait retourner une propriété de la forme nommée "foo" plutôt qu'un élément HTML !

Answer 2

[1] document.forms[0].elements[0] ;

" Non-omg-jamais ! Le mot " " me vient à l'esprit lorsque je vois cette méthode d'accès aux éléments. Le problème avec cette méthode est qu'elle suppose que le DOM est une structure de données normale (par exemple, un tableau) dans laquelle l'ordre des éléments est statique, cohérent ou fiable. Nous savons que 99,9999% du temps, ce n'est pas le cas. Réordonner ou input dans le formulaire, en ajoutant un autre form à la page précédant le formulaire en question, ou le déplacement du formulaire en question sont autant de cas où ce code est cassé. En bref : ce code est très fragile. Dès que vous ajoutez ou déplacez quelque chose, il va se casser.

[2] document.myForm.foo ;

Je suis avec Sergey ILinsky sur ce sujet :

• Accéder à des éléments arbitraires en se référant à leur id attribut : document.getElementById("myform");
• Accéder aux éléments de formulaire nommés par leur nom, par rapport à leur élément de formulaire parent : document.getElementById("myform").foo;

Mon principal problème avec cette méthode est que le name est inutile lorsqu'il est appliqué à un formulaire. Le nom n'est pas transmis au serveur dans le cadre du POST/GET et ne fonctionne pas pour les signets de type hachage.

[3] document.getElementById('foo') ;

À mon avis, c'est la méthode la plus préférable. L'accès direct est la méthode la plus concise et la plus claire.

[4] document.getElementById('myForm').foo ;

À mon avis, cette méthode est acceptable, mais plus verbeuse que nécessaire. La méthode n°3 est préférable.

---

Il se trouve que je regardais un vidéo de Douglas Crockford et il s'est exprimé sur ce sujet. Le point d'intérêt est à -12:00. Pour résumer :

• Les collections de documents (document.anchor, document.form, etc.) sont obsolètes et non pertinentes (méthode 1).
• El name est utilisé pour nommer les choses, pas pour y accéder. Il sert à nommer des éléments tels que les fenêtres, les champs de saisie et les balises d'ancrage.
• "L'ID est la chose que vous devez utiliser pour identifier de manière unique un élément afin de pouvoir y accéder. Ils (nom et ID) étaient autrefois interchangeables, mais ils ne le sont plus."

Alors voilà. Sémantiquement, c'est ce qui a le plus de sens.

Answer 3

Pour accéder aux éléments nommés placés dans un formulaire, il est bon d'utiliser la fonction form l'objet lui-même.

Pour accéder à un élément arbitraire dans l'arbre DOM qui peut parfois se trouver dans un formulaire, utilisez getElementById et l'élément id .

Answer 4

Je préfère de loin une 5ème méthode. C'est-à-dire
[5] Utilisez l'identifiant spécial JavaScript este pour transmettre l'objet formulaire ou champ à la fonction depuis le gestionnaire d'événements.

Plus précisément, pour les formulaires :

<form id="form1" name="form1" onsubmit="return validateForm(this)">

et

// The form validation function takes the form object as the input parameter
function validateForm(thisForm) {
  if (thisform.fullname.value !=...

En utilisant cette technique, la fonction ne doit jamais savoir
- l'ordre dans lequel les formulaires sont définis dans la page,
- l'ID du formulaire, ni
- le nom du formulaire

De même, pour les champs :

<input type="text" name="maxWeight">
...
<input type="text" name="item1Weight" onchange="return checkWeight(this)">
<input type="text" name="item2Weight" onchange="return checkWeight(this)">

et

function checkWeight(theField) {
  if (theField.value > theField.form.maxWeight.value) {
    alert ("The weight value " + theField.value + " is larger than the limit");
    return false;
  }
return true;
}

Dans ce cas, la fonction n'a jamais besoin de connaître le nom ou l'identifiant d'un champ de poids particulier, mais elle doit connaître le nom du champ de limite de poids.

Answer 5

Ça ne répond pas vraiment à votre question, mais juste à cette partie :

[3] requiert à la fois un identifiant et un nom... avoir les deux est quelque peu redondant

Vous aurez probablement besoin d'un id sur chaque champ de formulaire de toute façon, de sorte que vous puissiez associer l'attribut <label> avec lui, comme ceci :

<label for="foo">Foo:</label>
<input type="text" name="foo" id="foo" />

Ceci est nécessaire pour l'accessibilité (c'est-à-dire que si vous n'associez pas les étiquettes de formulaire et les contrôles, pourquoi détestez-vous autant les aveugles ?)

C'est un peu redondant, bien que cela le soit moins lorsque vous avez des cases à cocher/des boutons radio, où plusieurs d'entre eux peuvent partager une name . En fin de compte, id y name sont destinés à des fins différentes, même si les deux sont souvent fixés à la même valeur.