Meilleure Pratique: l'Accès à des éléments de formulaire en HTML l'attribut id ou name?

Que tout assaisonné développeur JavaScript sait, il y a beaucoup (trop) de trouver des moyens 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 y a plusieurs façons d'accéder à ce en JavaScript:

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

Méthodes [1] et [3] sont bien documentés dans la Mozilla Gecko de la documentation, mais aucun n'est idéal. [1] est juste trop générales pour être utiles et [3] nécessite à la fois un id et un nom (en supposant que vous serez la publication des données à un serveur côté de la langue). Idéalement, il serait préférable d'avoir seulement un attribut id ou un nom d'attribut (ayant à la fois est un peu redondant, surtout si l'id n'est pas nécessaire pour tout le css, et augmente le risque de fautes de frappe, etc).

[2] semble être le plus intuitif et il semble être largement utilisé, mais je ne l'ai pas vu, il est référencé dans le moteur Gecko de la documentation et je suis inquiet à propos de deux attaquants de la compatibilité et de la croix-compatibilité entre navigateurs (et bien sûr, je veux être comme conforme aux normes du possible).

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

Remarque, je suis particulièrement intéressé par un non-bibliothèque solution (jQuery/Prototype).

Je suppose que cela se résume à est que je suis à la recherche de la plus conforme aux normes du chemin pour accéder à un élément de formulaire à l'aide de l'attribut de nom de...
"ayant à la fois est un peu redondant, surtout si l'id n'est pas nécessaire pour tout le css, et augmente le risque de fautes de frappe" -- ID est nécessaire pour une utilisation efficace des étiquettes. Pas seulement CSS.
Parfois, il y a plusieurs formulaires sur une page web et attributs id peuvent entrer en collision.

InformationsquelleAutor seth | 2010-03-12

83

Donner à votre formulaire un id seulement, et votre entrée un nom seulement:
```
<form id="myform">
  <input type="text" name="foo">
```
Alors la plus conforme aux normes et moins problématique façon d'accéder à votre élément d'entrée est par le biais de:
```
document.getElementById("myform").elements["foo"]
```
à l'aide de .elements["foo"] au lieu de simplement .foo est préférable, car ce dernier pourrait retourner une propriété de la forme nommée "toto" plutôt que d'un élément HTML!
- c'est tout à fait raisonnable de réponse!
- Je n'avais aucune idée qu'il y avait tellement de nombreuses options! Mais j'aime cette réponse mieux, combiné à l'utilisation validateForm(ce) pour passer à la forme de l'objet.
- Pourquoi est-ce préféré sur onsubmit="mafonction(this); return false;"?
- Qu'essayez-vous de réaliser? Hormis le fait que l'in-lining JS dans votre code HTML est assez peu élégante (et souvent inefficace, puisqu'il crée une fonction wrapper autour du code), le fait que vous toujours return false signifie que votre formulaire de jamais soumettre. Donc, à moins que le formulaire n'est pas destiné à être soumis (c'est peut-être entièrement utilisé par le code JS), ou à moins que mafonction(ce) soumet via AJAX (et vous ne se soucient pas de les présenter comme une solution de repli en cas d'AJAX échoue en quelque sorte), ...alors vous avez fait une erreur.
- Normalement, à soumettre valable uniquement des données de formulaire, vous feriez: myform.onsubmit = validateForm; (où myform est une variable fait référence à la forme de l'élément, et validateForm est le nom de votre fonction de validation... mais vous pouvez l'appeler mafonction si vous vraiment, vraiment vous voulez). Le point important est que validateForm() doit retourner false chaque fois que le formulaire n'est pas valide, ainsi que le champ de problème(s) à l'utilisateur. Il doit retourner true lorsque le formulaire de données valide correctement, ce qui permettra de les soumettre à l'action pour aller de l'avant.
- Alors...comment associer l'ensemble de vos éléments de formulaire avec leurs étiquettes sans id? aria-*?
- la façon la plus simple d'utiliser des étiquettes est de joindre l'élément de formulaire dans la balise d'étiquette - alors vous n'avez pas besoin d'aucune association explicite entre l'élément et l'étiquette. Si/quand ce n'est pas pratique, alors oui, aller de l'avant et donner votre formulaire éléments id attributs ainsi que name attributs. (Généralement, faire le name et id même est une bonne règle de base quand on fait cela, mais il n'est pas essentiel... et en particulier ids doit être unique dans un document, alors que les noms d'élément n'a pas besoin d'être, que ce soit entre les différentes formes, ou même dans la même forme, donc il y a certainement des contre-exemples).
- juste pour clarifier: ids sur les éléments de formulaire ne sont pas optimales réponse pour l'OP de la question, qui est pourquoi j'ai dit de ne pas les utiliser. Je ne dis pas que vous devriez jamais utiliser! Si vous avez besoin d'associer une étiquette qui n'est pas celle de l'élément parent, si vous devez choisir un élément spécifique pour le style CSS, ou si vous avez besoin d'un accès rapide à un élément particulier de javascript (par opposition à une manière générale, pour accéder à des éléments de formulaire, qui est ce que la question posée), alors vous devriez aller de l'avant de donner à votre élément de formulaire un id!
- Il y a une autre raison d'éviter les identifiants dans les champs de formulaire: dans le cas où vous souhaitez utiliser plusieurs instances de la même forme (dans la même page).
- Exactement. Il est très difficile de garantir l'unicité de l'ensemble du document lors de l'utilisation de l'identifiant de champ identifiants. Même si vous n'allez pas ré-utiliser le même formulaire, le nom que vous choisissez pourrait facilement affrontement avec une autre forme qu'un autre développeur (ou vous-même, même après un certain temps passé) ajoute à la page.
- merci! de cette façon, nous pouvons éviter de multiples formes id attr entrent en collision.
InformationsquelleAutor Doin
32

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

"Pas-omg-jamais!" vient à l'esprit quand je vois cette méthode d'accès à l'élément. Le problème, c'est qu'il suppose que le DOM est une réaction normale de la structure de données (par exemple: un tableau) dans laquelle l'élément de commande est statique, cohérentes et fiables dans de toute façon. Nous savons que 99,9999% du temps, que ce n'est pas le cas. La réorganisation ou input éléments à l'intérieur de la forme, en ajoutant un autre form à la page avant que le formulaire en question, ou de déplacer la forme en question sont tous des cas où ce code pauses. En bref: c'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 Il'Insky sur ce:
- Accès arbitraire des éléments de référence à leur id attribut: document.getElementById("myform");
- Accès nommé éléments de formulaire par nom, par rapport à leur parent élément de formulaire: document.getElementById("myform").foo;
Mon principal problème avec cette méthode est que la name attribut est inutile lorsqu'il est appliqué à un formulaire. Le nom n'est pas transmis au serveur en tant que partie de la POST/GET et ne fonctionne pas pour de hachage style de signets.

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

À mon avis, c'est le plus préférable méthode. L'accès Direct est le plus concis et clair méthode.

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

À mon avis, c'est acceptable, mais plus détaillée que nécessaire. Méthode n ° 3 est préférable.

J'ai donc été de regarder un vidéo de Douglas Crockford et il a pesé sur ce sujet. Le point d'intérêt est à -12:00. Pour résumer:
- Collections de documents (document.ancre, document.forme, etc) sont obsolètes et inadaptés (méthode 1).
- La name attribut est utilisé pour nommer les choses, de ne pas y avoir accès. C'est pour nommer les choses comme les fenêtres, les champs de saisie, et d'ancrage des balises.
- "ID est la chose que vous devez utiliser pour identifier de manière unique un élément de sorte que vous pouvez obtenir l'accès. Ils (nom et ID) utilisé pour être interchangeables, mais ils ne sont pas plus".
Donc là vous l'avez. Sémantiquement, ce qui fait le plus de sens.
- Alors est-ce juste un hack? document.getElementById("myform").foo; Après avoir étudié les DOM un peu, je suis pas clair pourquoi cela fonctionne même. Ma conjecture est que la forme de l'objet est également un tableau de l'enfant d'éléments indexés sur l'html, attribut de nom...
- Aussi, vous mentionnez "le nom n'est pas transmis au serveur en tant que partie de la POST/GET et ne fonctionne pas pour le hachage de style signets". N'est-ce pas précisément ce qui EST transmis au serveur? Lorsque vous travaillez avec PHP, c'est le nom de l'attribut qui est votre index dans le $_POST mondiale.
- c'est le nom de l'attribut qui est transmis au serveur.
- Les anciens DOM specs semblent très vague au sujet de pourquoi document.aForm.foo fonctionne, mais la spec HTML5 semble clairement définir l'interface d'un HTMLFormElement qui a caller getter any namedItem(in DOMString name);. Plus au whatwg.org/specs/web-apps/current-work/multipage/...
- c'est super info, si me ramène à ma question initiale, quelles sont les meilleures pratiques (et je me rends compte il n'y a probablement pas)... je suis juste à une perte quant à ce qu'à dis à mes étudiants JS
- vous les gars: "...le nom de l'attribut est inutile lorsqu'il est appliqué à une forme..." je ne parle pas de l'attribut name d'un input ou select, je parle de l'attribut name d'un form. L'attribut name d'un form ne pas se passer pour le serveur.
- Je n'ai pas compris, vous êtes en droit - la forme du nom de l'attribut n'est pas envoyé au serveur. @seth je pense que cela dépend du type d'élèves que vous enseignez. Si ils sont des étudiants de collège étudiant en Informatique, par exemple, vous pouvez leur parler de tous les 4 voies, et pourquoi le premier est terrible comme Justin souligné. Sinon trouver par ID est assez standard, et est ainsi nommé d'accès pour les formes et de ses éléments.
InformationsquelleAutor Justin Johnson
14

Pour accéder nommé éléments placés dans un formulaire, il est une bonne pratique d'utiliser le form objet lui-même.

Pour accéder à l'arbitraire d'un élément dans l'arborescence DOM qui peuvent à l'occasion être trouvé à l'intérieur d'un formulaire, utilisez getElementById et l'élément id.
- Que voulez-vous dire "utiliser la forme de l'objet lui-même"? Une fois que vous avez la forme de l'objet, quelle méthode utilisez-vous pour accéder à un élément en particulier?
- Je veux dire, je recommande l'utilisation de la N5 (document.getElementById('myForm').éléments.foo) pour accéder aux éléments nommés et N6 (document.getElementById('myForm').éléments) pour accéder à la iteratable collection d'éléments
- Je suis en définissant le style de mon code...et comme une préférence, je m'en tiens à IDs....de cette façon, l'accès à l'élément est conforme à travers la page. + l'autre des raisons mentionnées.
- Pourquoi est-ce une bonne pratique pour accéder au formulaire à l'aide de getElementID? pourquoi serait-document.myForm pas de travail? (J'ai une situation où sa ne fonctionne pas et je me demande pourquoi)
- Hey Spundun, vous avez probablement résolu votre problème, il y a des mois (ou peut-être vous avez jeté vos mains vers le haut 🙂 ), mais dans le cas où vous poseriez la question, c'était probablement dû à votre fournit pas de votre formulaire HTML élément avec un attribut "name".
InformationsquelleAutor Sergey Ilinsky
7

Je préfère de beaucoup une 5ème méthode. C'est

[5] Utiliser le JavaScript identificateur ce pour passer de la forme ou de l'objet de champ pour la fonction à partir du gestionnaire d'événement.

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 !=...
```
À l'aide de cette technique, la fonction n'a jamais à savoir

- l'ordre dans lequel les formes sont définies 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 connaître le nom ou l'id d'un champ de poids, si elle n'a besoin de savoir le nom de la limite de poids de champ.
- Pas sûr de ce que la cause sous-jacente, mais j'ai eu cette démarche de retour à vide des chaînes dans certains, mais pas tous, des circonstances.
InformationsquelleAutor Robin Richmond
6

Ce n'est pas vraiment répondre à votre question, mais juste sur cette partie:

[3] nécessite à la fois un id et un nom... d'avoir les deux est un peu redondant

Vous aurez très probablement besoin d'avoir un id l'attribut de chaque champ de formulaire, de toute façon, de sorte que vous pouvez associer sa <label> élément avec elle, comme ceci:
```
<label for="foo">Foo:</label>
<input type="text" name="foo" id="foo" />
```
Cela est nécessaire pour l'accessibilité (c'est à dire si vous n'associez pas les étiquettes du formulaire et des contrôles, pourquoi détestez-vous les aveugles à ce point?).

C'est un peu redondant, bien que moins quand vous avez des cases à cocher/boutons radio, où plusieurs d'entre eux peuvent partager un name. En fin de compte, id et name sont à des fins différentes, même si les deux sont souvent réglés à la même valeur.
- Si vous envelopper d'une entrée de l'étiquette, vous n'avez pas besoin d'un id ou un attribut. <label>Foo: <input type="text" name="toto" </label>
- Très vrai, même si ce n'est la limite de ce que vous pouvez atteindre en termes de look et se sentir.
- devriez toujours utiliser un id si vous voulez l'étiquette associée à un élément. Les anciennes versions d'IE (< 8?) ne pas associer des éléments à l'intérieur d'une étiquette, l'étiquette s'il n'y avait pas de correspondance pour et id attributs.
- En plus de ce que @kennebec écrit, à l'aide IDs crée JS globals et doit être évitée.
- J'ai vu que l'origine de problèmes avant. Je pense que si vos Identifiants sont raisonnablement descriptif et votre JavaScript est préfixée correctement, il est peu probable de causer des problèmes si.
InformationsquelleAutor Paul D. Waite
4

C'est un peu vieux, mais je veux ajouter une chose que je pense est pertinent.

(Je voulais commenter l'un ou 2 fils ci-dessus, mais il semble que j'ai besoin de réputation 50 et je n'ai que 21 ans au moment où j'écris ces lignes. 🙂 )

Je veux juste dire qu'il y a des moments où c'est beaucoup mieux pour accéder aux éléments d'un formulaire par un nom plutôt que par id. Je ne parle pas de la forme elle-même. La forme, OK, vous pouvez lui donner un identifiant et d'y accéder par elle. Mais si vous avez un bouton radio dans un formulaire, il est beaucoup plus facile de l'utiliser comme un objet unique (obtention et définition de sa valeur) et vous ne pouvez le faire que par leur nom, pour autant que je sais.

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 du bouton radio R1 comme un tout et en utilisant

document.mainForm.R1.valeur

ou

document.getElementById("mainForm").R1.valeur

Donc, si vous voulez avoir un seul style, vous pouvez toujours utiliser cette méthode, quel que soit le type d'élément de formulaire. Moi, je suis parfaitement à l'aise d'accéder boutons radio par nom et zones de texte par id.

InformationsquelleAutor VSim
2

Étant à l'ancienne j'ai toujours utilisé le document.myform.myvar' la syntaxe, mais j'ai récemment trouvé échoué dans Chrome (OK sous Firefox et IE). C'était une page Ajax (c'est à dire chargé dans la propriété innerHTML d'un div). Peut-être que Chrome ne reconnaissent pas la forme comme un élément du document principal. J'ai utilisé getElementById (sans faire référence à la forme) à la place et ça a fonctionné.

InformationsquelleAutor Captain Nemo
0

Forme 2 est ok, et la formule 3 est également recommandé.

La redondance entre le nom et l'id est causée par le besoin de maintenir la compatibilité, sur html 5 de certains éléments (comme img, forme, iframe et autres) vont perdre leur attribut "name", et il est recommandé d'utiliser leur id de référence à partir de maintenant 🙂
- Il semble que des éléments d'entrée ne perdent jamais leur attribut de nom en raison de la façon dont il est utilisé par les langages côté serveur. Donc, la question demeure de savoir quelle est la norme de la méthode si vous n'avez que le nom de l'attribut?
- Dans une conforme aux normes de développement, vous n'auriez pas juste le nom, pour commencer. Si vous ne POUVEZ vraiment PAS d'ID, je vous suggère de document.getElementByName() fonction.
InformationsquelleAutor wintermute
0

Pour compléter les autres réponses, document.myForm.toto est le soi-disant DOM niveau 0, qui est le moyen mis en œuvre par Netscape et n'est donc pas vraiment un standard ouvert, même si elle est prise en charge par la plupart des navigateurs.
- Accéder aux formulaires et les contrôles de formulaire par nom, id d'index et fait partie du DOM 2 HTML standard pour HTML collections.
InformationsquelleAutor Kent Tong
0

Consultez cette page: https://developer.mozilla.org/En/DOM/Document.getElementsByName
```
document.getElementsByName('foo')[0]; //returns you element.
```
Elle doit être "éléments" et doit retourner un tableau, car plus d'un élément peut avoir le même nom.
- Autant que je sache getElementsByName n'est pas de la croix-navigateur...
- Je suis en train de penser ce pourrait être une bonne solution, bien que ce tout droit sorti de l'docs me rendait nerveuse: "Cette méthode pourrait être discutable pour les utiliser étant donné les changements ci-dessus entre les types de document et du courant de non-standard de comportement de cette méthode dans le XHTML. "
- Bonjour. La documentation suggère contre cela? Je pense que si vous êtes en utilisant xhtml dans tous les DOM environnements que vous travaillez, alors vous devriez être OK. Aussi, les navigateurs qui ne supportent pas cette? Voici les docs pour IE: msdn.microsoft.com/en-us/library/ms536438(SV.85).aspx En plus de Mozilla ci-dessus, qui d'autre pourrait ne pas le supporter?
InformationsquelleAutor robert
0

Ma réponse sera différente sur la question exacte.
Si je veux accéder à un certain élément spécifiquement, puis-je utiliser document.getElementById().
Un exemple est le calcul le nom complet d'une personne, parce que c'est en s'appuyant sur plusieurs domaines, mais il est un modèle de la formule.

Si je veux accéder à l'élément comme faisant partie d'une structure fonctionnelle (une forme), puis-je utiliser:
```
var frm = document.getElementById('frm_name');
for(var i = 0; i < frm.elements.length;i++){
   ..frm.elements[i]..
```
C'est la façon dont il fonctionne également du point de vue de l'entreprise. Les changements au sein de la boucle aller de pair avec des changements fonctionnels de l'application et sont à cet effet de sens. Je l'applique surtout pour les convivial de la validation et de la prévention des appels de réseau pour la vérification des données erronées. Je le répète, la validation côté serveur (et d'y ajouter un peu plus à elle), mais si je peux aider l'utilisateur côté client, alors c'est que bénéfique pour tous.

Pour l'agrégation de données (comme la construction d'un graphique basé sur les données de la forme) j'utilise des documents de configuration et les objets Javascript. Ensuite c'est le sens exact du champ important par rapport à son contexte et dois-je utiliser document.getElementById().

InformationsquelleAutor Loek Bergman

Vous devez vous connecter pour publier un commentaire.