Bonne pratique: accéder aux éléments de formulaire par identifiant HTML ou attribut de nom?

Comme le sait tout développeur JavaScript chevronné, 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 de nombreuses 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. [1] est tout simplement trop général pour être utile et [3] nécessite à la fois un identifiant et un nom (en supposant que vous afficherez les données dans un langage côté serveur). Idéalement, il serait préférable de n'avoir qu'un attribut id ou un attribut name (avoir les deux est quelque peu redondant, surtout si l'id n'est pas nécessaire pour un css, et augmente la probabilité de fautes de frappe, etc.).

[2] semble être le plus intuitif et il semble être largement utilisé, 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 conforme aux normes).

Alors, quelle est la meilleure pratique ici? Quelqu'un peut-il indiquer quelque chose dans la documentation DOM ou dans la spécification W3C qui pourrait résoudre ce problème?

Remarque Je suis spécifiquement intéressé par une solution non-bibliothèque (jQuery / Prototype).

Donnez à votre formulaire un identifiant uniquement et votre entrée un nom uniquement:

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

Ensuite, le moyen le plus conforme aux normes et le moins problématique d'accéder à votre élément d'entrée est via:

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

utiliser .elements["foo"]plutôt que juste .fooest préférable car ce dernier peut renvoyer une propriété de la forme nommée "foo" plutôt qu'un élément HTML!

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

" No-omg-never! " Me vient à l'esprit quand je vois cette méthode d'accès aux éléments. Le problème avec ceci est que cela 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 de toute façon. Nous savons que 99,9999% du temps, que ce n'est pas le cas. Réorganiser des inputéléments dans le formulaire, en ajouter un autre formà la page avant le formulaire en question ou déplacer le formulaire en question sont tous les cas où ce code se brise. Petite histoire: c'est très fragile. Dès que vous ajoutez ou déplacez quelque chose, il se cassera.

[2] document.myForm.foo;

Je suis avec Sergey ILinsky à ce sujet:

• Accédez aux éléments arbitraires en vous référant à leur idattribut:document.getElementById("myform");
• Accédez 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 l' nameattribut 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 style de hachage.

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

À 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, c'est acceptable, mais plus verbeux que nécessaire. La méthode n ° 3 est préférable.

Il se trouve que j'ai regardé une vidéo de Douglas Crockford et il a pesé sur ce sujet même. Le point d'intérêt est à -12: 00. Résumer:

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

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

Pour accéder aux éléments nommés placés dans un formulaire, il est recommandé d'utiliser l' formobjet lui-même.

Pour accéder à un élément arbitraire de l'arborescence DOM qui peut parfois se trouver dans un formulaire, utilisez getElementByIdet l'élément id.

Je préfère de loin une 5ème méthode. C'est-à-dire
[5] Utilisez l'identifiant JavaScript spécial this pour transmettre le formulaire ou l'objet champ à la fonction à partir du 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 n'a jamais à connaître
- 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, bien qu'elle ait besoin de connaître le nom du champ de limite de poids.

Cela ne répond pas vraiment à votre question, mais juste sur cette partie:

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

Vous aurez très probablement besoin d'avoir un idattribut sur chaque champ de formulaire de toute façon, afin que vous puissiez y associer son <label>élément, comme ceci:

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

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

C'est quelque peu redondant, bien que moins lorsque vous avez des cases à cocher / boutons radio, où plusieurs d'entre eux peuvent partager un fichier name. En fin de compte, idet namesont à des fins différentes, même si les deux sont souvent définis sur la même valeur.

C'est un peu vieux mais je veux ajouter une chose que je pense pertinente.
(Je voulais faire des commentaires sur un ou 2 fils ci-dessus mais il semble que j'ai besoin d'une réputation de 50 et je n'en ai que 21 au moment où j'écris ceci. :))
Je veux juste dire qu'il y a des moments où il est beaucoup mieux d'accéder au éléments d'un formulaire par nom plutôt que par id. Je ne parle pas du formulaire lui-même. Le formulaire, OK, vous pouvez lui donner un identifiant et y accéder ensuite. Mais si vous avez un bouton radio dans un formulaire, il est beaucoup plus facile de l'utiliser comme un objet unique (obtenir et définir sa valeur) et vous ne pouvez le faire que par son nom, pour autant que je sache.

Exemple:

<form id="mainForm" name="mainForm">
    <input type="radio" name="R1" value="V1">choice 1<br/>
    <input type="radio" name="R1" value="V2">choice 2<br/>
    <input type="radio" name="R1" value="V3">choice 3
</form>

Vous pouvez obtenir / définir la valeur cochée du bouton radio R1 dans son ensemble en utilisant
document.mainForm.R1.value
ou
document.getElementById ("mainForm"). R1.value
Donc, si vous voulez avoir un style unitaire, vous pouvez souhaitez toujours utiliser cette méthode, quel que soit le type d'élément de formulaire. Moi, je suis parfaitement à l'aise pour accéder aux boutons radio par nom et aux zones de texte par identifiant.

Étant démodé, j'ai toujours utilisé la syntaxe 'document.myform.myvar' mais j'ai récemment trouvé qu'elle échouait dans Chrome (OK dans Firefox et IE). C'était une page Ajax (c'est-à-dire chargée dans la propriété innerHTML d'un div). Peut-être que Chrome n'a pas reconnu le formulaire comme un élément du document principal. J'ai utilisé getElementById (sans référencer le formulaire) à la place et cela a fonctionné correctement.

Juste pour ajouter à tout ce qui a déjà été dit, vous pouvez accéder au inputs soit avec le, namesoit en idutilisant de préférence la elementspropriété du formulaire Object, car sans cela, vous pouvez obtenir une propriété du formulaire nommée "foo" plutôt qu'un élément HTML. Et selon @Paul D. Waite, il est parfaitement normal d'avoir à la fois le nom et l'identifiant.

var myForm = document.getElementById("myform")
console.log(myForm.foo.value) // hey
console.log(myForm.foo2.value) // hey
//preferable
console.log(myForm.elements.foo.value) // hey
console.log(myForm.elements.foo2.value) // hey

<form id="myform">
  <input type="text" name="foo" id="foo2" value="hey">
</form>

Selon MDN sur la page HTMLFormElement.elements

Les éléments de la propriété HTMLFormElement retournent un HTMLFormControlsCollection répertoriant tous les contrôles de formulaire contenus dans l'élément. Indépendamment, vous pouvez obtenir uniquement le nombre de contrôles de formulaire à l'aide de la propriété length.

Vous pouvez accéder à un contrôle de formulaire particulier dans la collection retournée à l'aide d'un index ou du nom ou de l' ID de l'élément .

namele terrain fonctionne bien. Il fournit une référence au elements.

parent.children- Liste tous les éléments avec un champ de nom du parent. parent.elements- Ne listera form elementsqueinput-text, text-area, etc

var form = document.getElementById('form-1');
console.log(form.children.firstname)
console.log(form.elements.firstname)
console.log(form.elements.progressBar); // undefined
console.log(form.children.progressBar);
console.log(form.elements.submit); // undefined

<form id="form-1">
  <input type="text" name="firstname" />
  <input type="file" name="file" />
  <progress name="progressBar" value="20" min="0" max="100" />
  <textarea name="address"></textarea>
  <input type="submit" name="submit" />
</form>

Remarque: .elementspour fonctionner, le parentdoit être un fichier <form> tag. Alors que, .childrenfonctionnera sur n'importe quel HTML-element- comme <div>, <span>, etc.

Bonne chance...

La forme 2 est correcte et la forme 3 est également recommandée.
La redondance entre le nom et l'identifiant est causée par la nécessité de garder la compatibilité, sur html 5 certains éléments (comme img, form, iframe et autres) perdront leur attribut "name", et il est recommandé de n'utiliser que leur identifiant pour les référencer à partir de maintenant sur :)

Pour compléter les autres réponses, document.myForm.foo est le soi-disant niveau DOM 0, qui est la manière implémentée par Netscape et n'est donc pas vraiment un standard ouvert même s'il est pris en charge par la plupart des navigateurs.

Consultez cette page: https://developer.mozilla.org/En/DOM/Document.getElementsByName

document.getElementsByName('foo')[0]; // returns you element.

Il doit s'agir d'éléments et doit renvoyer un tableau car plusieurs éléments peuvent avoir le même nom.

Ma réponse sera différente sur la question exacte. Si je veux accéder spécifiquement à un certain élément, j'utiliserai document.getElementById (). Un exemple est le calcul du nom complet d'une personne, car il s'appuie sur plusieurs champs, mais c'est une formule répétable.

Si je souhaite accéder à l'élément dans le cadre d'une structure fonctionnelle (un formulaire), je vais utiliser:

var frm = document.getElementById('frm_name');
for(var i = 0; i < frm.elements.length;i++){
   ..frm.elements[i]..

C'est ainsi que cela fonctionne également du point de vue de l'entreprise. Les changements dans la boucle s'accompagnent de changements fonctionnels dans l'application et sont donc significatifs. Je l'applique principalement pour une validation conviviale et pour empêcher les appels réseau pour vérifier des données erronées. Je répète le côté serveur de validation (et j'y ajoute un peu plus), mais si je peux aider l'utilisateur côté client, alors est-ce bénéfique pour tous.

Pour l'agrégation de données (comme la création d'un graphique à secteurs basé sur les données du formulaire), j'utilise des documents de configuration et des objets Javascript personnalisés. La signification exacte du champ est alors importante par rapport à son contexte et est-ce que j'utilise document.getElementById ().

Parce que le cas [2] document.myForm.fooest un dialecte d'Internet Exploere. Alors au lieu de cela, je préfère document.forms.myForm.elements.fooou document.forms["myForm"].elements["foo"].

Je préfère celui-ci

document.forms['idOfTheForm'].nameOfTheInputFiled.value;