Différence entre les attributs id et name en HTML
Quelle est la différence entre les attributs id et name? Ils semblent tous deux avoir le même objectif de fournir un identifiant.
J'aimerais savoir (particulièrement en ce qui concerne les formulaires HTML) si l'utilisation des deux est nécessaire ou non, pour quelque raison que ce soit.
L'attribut name est utilisé lors de l'envoi de données dans une soumission de formulaire. Différents contrôles répondent différemment. Par exemple, vous pouvez avoir plusieurs boutons radio avec différents attributs id, mais le même name. Une fois soumis, la réponse ne contient qu'une seule valeur: le bouton radio que vous avez sélectionné.
Bien sûr, il y a plus que cela, mais cela vous incitera certainement à penser dans la bonne direction.
Utilisez les attributs name pour les contrôles de formulaire (tels que <input> et <select>), car il s'agit de l'identificateur utilisé dans l'appel POST ou GET qui se produit lors de la soumission du formulaire.
Utilisez les attributs id chaque fois que vous devez adresser un élément HTML particulier avec CSS, JavaScript ou identifiant de fragment . Il est possible de rechercher des éléments par leur nom également, mais il est plus simple et plus fiable de les rechercher par ID.
Voici un bref résumé:
idest utilisé pour identifier l'élément HTML à l'aide du modèle d'objet de document (via JavaScript ou avec le style CSS).iddevrait être unique dans la page.namecorrespond à l'élément () et identifie ce qui est renvoyé au serveur.
Voir ceci http://mindprod.com/jgloss/htmlforms.html#IDVSNAME
Quelle est la différence? La réponse courte est, utilisez les deux et ne vous inquiétez pas. Mais si vous voulez comprendre cette bêtise, voici le maigre:
id = est utilisé comme cible comme ceci:
<some-element id="XXX"></some-element>pour des liens comme ceci:<a href="#XXX".name = est également utilisé pour étiqueter les champs du message envoyé à un serveur avec un GET HTTP (protocole de transfert hypertexte) ou POST lorsque vous cliquez sur Envoyer dans un formulaire.
id = étiquette les champs à utiliser par JavaScript et Java DOM (Document Object Model). Les noms nommés = doivent être uniques dans un formulaire. Les noms dans id = doivent être uniques dans tout le document.
Parfois, les noms name = et id = diffèrent, car le serveur attend le même nom de divers formulaires dans le même document ou de divers boutons radio dans le même formulaire que dans l'exemple ci-dessus. Le id = doit être unique; le nom = ne doit pas être.
JavaScript avait besoin de noms uniques, mais il y avait déjà trop de documents sans nom unique = noms. Le W3 a donc inventé la balise id qui devait être unique. Malheureusement, les anciens navigateurs ne l'ont pas compris. Vous avez donc besoin des deux schémas de nommage dans vos formulaires.
REMARQUE: l'attribut "name" pour certaines balises telles que <a> n'est pas pris en charge en HTML5.
La façon dont je réfléchis et que j'utilise est simple:
id est utilisé pour CSS et JavaScript/jQuery (doit être unique dans une page)
name est utilisé pour la gestion du formulaire dans PHP lorsqu'un formulaire est soumis via HTML (doit être unique dans un formulaire - pour certains). mesure, voir le commentaire de Paul ci-dessous)
Balise ID - utilisée par CSS, définit une nique instance d'un div, span ou d'autres éléments. Apparaît dans le modèle DOM Javascript, vous permettant d'y accéder avec différents appels de fonction.
Balise de nom pour les champs - Ceci est unique par formulaire - à moins que vous ne fassiez un tableau que vous voulez transmettre au traitement PHP/côté serveur. Vous pouvez y accéder via Javascript par nom, mais je pense qu'il n'apparaît pas en tant que nœud dans le DOM ou que certaines restrictions peuvent s'appliquer (vous ne pouvez pas utiliser .innerHTML, par exemple, si mes souvenirs sont exacts).
<form action="demo_form.asp">
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male"><br>
<label for="female">Female</label>
<input type="radio" name="sex" id="female" value="female"><br>
<input type="submit" value="Submit">
</form>
Ce lien répond à la même question de base, mais fondamentalement, id est utilisé pour l'identification de script et nom est pour le serveur.
http://www.velocityreviews.com/forums/t115115-id-vs-name-attribute-for-html-controls.html
name est obsolète pour les cibles de liens et non valide en HTML5. Cela ne fonctionne plus au moins dans le dernier Firefox (v13). Remplacez <a name="hello"> par <a id="hello">
Il n'est pas nécessaire que la cible soit une balise <a>; elle peut être <p id="hello"> ou <h2 id="hello"> etc., ce qui est souvent un code plus propre.
Comme d'autres publications le disent clairement, name est toujours utilisé (nécessaire) dans les formulaires. Il est également toujours utilisé dans les balises META.
Généralement, on suppose que le nom est toujours remplacé par id. Ceci est vrai, dans une certaine mesure, mais pas pour champs de formulaire et noms de cadre, pratiquement. Par exemple, avec les éléments de formulaire, l'attribut name est utilisé pour déterminer les paires nom-valeur à envoyer à un programme côté serveur et ne doit pas être éliminé. Browsers do not use id in that manner. Pour plus de sécurité, vous pouvez utiliser les attributs name et id sur les éléments de formulaire. Donc, nous écririons ce qui suit:
<form id="myForm" name="myForm">
<input type="text" id="userName" name="userName" />
</form>
Pour assurer la compatibilité, il est judicieux de disposer des valeurs d'attribut name et id correspondantes lorsque les deux sont définies. Cependant, soyez prudent - certaines balises, notamment les boutons radio, doivent avoir des valeurs de nom non uniques, mais requièrent des valeurs d'identifiant uniques. Une fois de plus, cela devrait indiquer que cet identifiant n'est pas simplement un remplacement du nom; ils ont un but différent. En outre, ne négligez pas l’approche traditionnelle, un regard approfondi sur les bibliothèques modernes montre le style de syntaxe utilisé à des fins de performance et de facilité. Votre objectif devrait toujours être en faveur de la compatibilité.
Désormais, dans la plupart des éléments, l'attribut name est déconseillé au profit de l'attribut plus répandu id. Toutefois, dans certains cas, en particulier les champs de formulaire (<button>, <input>, <select> et <textarea>), l'attribut name demeure car il est toujours nécessaire de définir la paire nom-valeur pour la soumission du formulaire. Nous constatons également que certains éléments, notamment les cadres et les liens, peuvent continuer à utiliser l'attribut name car il est souvent utile pour récupérer ces éléments par nom.
Il existe une distinction claire entre id et name. Très souvent, lorsque le nom continue, nous pouvons définir les mêmes valeurs. Cependant, id doit être unique, et le nom dans certains cas ne devrait pas l'être: pensez aux boutons radio. Malheureusement, l'unicité des valeurs id, bien que capturée par la validation du balisage, n'est pas aussi cohérente qu'elle devrait l'être. L'implémentation CSS dans les navigateurs va styler les objets qui partagent une valeur id. ainsi, nous ne pourrons pas détecter les erreurs de marquage ou de style qui pourraient affecter notre code JavaScript jusqu'au moment de l'exécution.
Ceci est tiré du livre JavaScript- The Complete Reference by Thomas-Powell
name Vs id
name
- Nom de l'élément. Par exemple, utilisé par le serveur pour identifier les champs dans les soumissions de formulaire.
- Les éléments de support sont
<button>, <form>, <fieldset>, <iframe>, <input>, <keygen>, <object>, <output>, <select>, <textarea>, <map>, <meta>, <param> - Le nom ne doit pas nécessairement être unique.
- Souvent utilisé avec CSS pour styler un élément spécifique. La valeur de cet attribut doit être unique.
- Id est attributs globaux , ils peuvent être utilisés sur tous les éléments, bien que les attributs puissent n’avoir aucun effet sur certains éléments.
- Doit être unique dans tout le document.
- La valeur de cet attribut ne doit pas contenir d'espaces blancs, contrairement à l'attribut class qui autorise les valeurs séparées par des espaces.
- Utilisation de caractères autres que ASCII lettres et chiffres, '_', '-' et '.' peut entraîner des problèmes de compatibilité, car ils n'étaient pas autorisés dans HTML 4. Bien que cette restriction ait été levée dans HTML 5, un ID doit commencer par une lettre pour assurer la compatibilité.
L'ID d'un élément d'entrée de formulaire n'a rien à voir avec les données contenues dans l'élément. Les identifiants permettent de lier l'élément à JavaScript et CSS. Cependant, l'attribut name est utilisé dans la requête HTTP envoyée par votre navigateur au serveur en tant que nom de variable associé aux données contenues dans l'attribut value.
Par exemple:
<form>
<input type="text" name="user" value="bob">
<input type="password" name="password" value="abcd1234">
</form>
Lorsque le formulaire est soumis, les données du formulaire seront incluses dans l'en-tête HTTP comme suit:
Si vous ajoutez un attribut ID, cela ne changera rien dans l'en-tête HTTP. Cela facilitera simplement le raccordement avec CSS et JavaScript.
Si vous n'utilisez pas la méthode de soumission du formulaire pour envoyer des informations à un serveur (et le font plutôt à l'aide de javascript), vous pouvez utiliser l'attribut name pour attacher des informations supplémentaires à une entrée - un peu comme si vous l'associez à une valeur d'entrée masquée. mais semble plus soigné, car il est intégré à l'entrée.
Ce bit fonctionne toujours actuellement dans Firefox, bien que je suppose qu’à l’avenir il ne soit pas autorisé.
Vous pouvez avoir plusieurs champs de saisie avec la même valeur de nom, tant que vous ne prévoyez pas de soumettre à l'ancienne.
Basé sur des expériences personnelles et selon la description de W3 Schools pour les attributs:
ID est un attribut global et s'applique à pratiquement tous les éléments HTML. Il est utilisé pour identifier de manière unique des éléments sur la page Web et sa valeur est principalement accessible à partir de l'interface frontale (généralement via JavaScript ou jQuery).
name est un attribut utile pour des éléments spécifiques (tels que des éléments de formulaire, etc.) en HTML. Sa valeur est principalement envoyée au backend pour traitement.
ID i utilisé pour identifier de manière unique un élément.
Le nom est utilisé dans les formulaires. quand même vous soumettez un formulaire. et si vous ne donnez aucun nom, rien ne sera soumis. Et ceux avec l'attribut name seulement sortiront.
Id: 1) Il est utilisé pour identifier l'élément HTML par le biais du modèle d'objet de document (via Javascript ou stylisé avec CSS). 2) On s'attend à ce que l'id soit unique dans la page.
Nom correspond à l'élément de formulaire et identifie ce qui est renvoyé au serveur. Exemple :
<form action="action_page.php" id="Myform">
First name: <input type="text" name="FirstName"><br>
<input type="submit" value="Submit">
</form>
<p>The "Last name" field below is outside the form element, but still part of the form.</p>
Last name: <input type="text" name="LastName" form="Myform">
Vous trouverez ci-dessous une utilisation intéressante de l'attribut id. Il est utilisé dans la balise et permet d'identifier le formulaire pour les éléments situés en dehors des limites afin qu'ils soient inclus avec les autres champs du formulaire.
<form action="action_page.php" id="form1">
First name: <input type="text" name="fname"><br>
<input type="submit" value="Submit">
</form>
<p>The "Last name" field below is outside the form element, but still part of the form.</p>
Last name: <input type="text" name="lname" form="form1">