web-dev-qa-db-fra.com

Entrée HTML - nom vs id

Lors de l'utilisation de la balise HTML <input>, quelle est la différence entre l'utilisation des attributs name et id, en particulier du fait que j'ai parfois constaté qu'ils portent le même nom?

htmlhtml-input
500
Simplicity

En HTML4.01:

Nom Attribut

  • Valable uniquement sur <a>, <form>, <iframe>, <img>, <map>, <input>, <select>, <textarea>
  • Le nom ne doit pas nécessairement être unique et peut être utilisé pour regrouper des éléments tels que des boutons radio et des cases à cocher
  • Ne peut pas être référencé dans l'URL, bien que JavaScript et PHP puissent voir l'URL, il existe des solutions de contournement.
  • Est référencé dans JS avec getElementsByName()
  • Partage le même espace de noms que l'attribut id
  • Doit commencer par une lettre
  • Selon les spécifications, la casse est respectée, mais la plupart des navigateurs modernes ne semblent pas suivre cela.
  • Utilisé sur les éléments de formulaire pour soumettre des informations. Seules les balises d'entrée portant un attribut name sont soumises au serveur.

Id Attribut

  • Valable sur tout élément sauf <base>, <html>, <head>, <meta>, <param>, <script>, <style>, <title>
  • Chaque identifiant doit être unique dans la page telle que restituée dans le navigateur, ce qui peut ne pas être identique fichier
  • Peut être utilisé comme référence d'ancrage dans l'URL
  • Est référencé en CSS ou en URL avec le signe #
  • Est référencé dans JS avec getElementById() et jQuery par $(#<id>)
  • Partage le même espace de nom que l'attribut name
  • Doit contenir au moins un caractère
  • Doit commencer par une lettre
  • Ne doit contenir rien d'autre que des lettres, des chiffres, des traits de soulignement (_), des tirets (-), des deux points (:) ou des points (.)
  • Est insensible à la casse

En (X) HTML5, tout est pareil sauf:

Nom Attribut

  • Non valide sur <form> plus
  • XHTML dit que ce doit être en minuscule, mais la plupart des navigateurs ne suivent pas cela

Id Attribut

  • Valable sur tout élément
  • XHTML dit que ce doit être en minuscule, mais la plupart des navigateurs ne suivent pas cela

Cette question a été écrite alors que HTML4.01 était la norme et de nombreux navigateurs et fonctionnalités étaient différents de ceux d'aujourd'hui.

273
Kumar Akarsh

l'attribut name est utilisé pour la publication sur, par exemple, un serveur web. L'identifiant est principalement utilisé pour css (et javascript). Supposons que vous ayez cette configuration:

<input id="message_id" name="message_name" type="text" />

afin d'obtenir la valeur avec PHP lors de la publication de votre formulaire, il utilisera l'attribut name, comme ceci:

$_POST["message_name"];

Comme indiqué précédemment, l'identifiant est utilisé pour le style lorsque vous souhaitez utiliser un css spécifique.

#message_id
{
    background-color: #cccccc;
}

Bien sûr, vous pouvez utiliser la même dénomination pour votre identifiant et votre attribut de nom. Ces deux ne vont pas interférer les uns avec les autres.

de plus, name peut être utilisé pour plusieurs éléments, comme lorsque vous utilisez des radiobuttons. Name est ensuite utilisé pour regrouper vos boutons radio, vous ne pouvez donc sélectionner qu’une de ces options.

<input id="button_1" type="radio" name="option" />
<input id="button_2" type="radio" name="option" />

Et dans ce cas très spécifique, je peux vous dire comment vous utilisez id, car vous voudrez probablement une étiquette avec votre radiobutton. L'étiquette a un attribut for, qui utilise l'identifiant de votre entrée pour lier cette étiquette à votre entrée (lorsque vous cliquez sur l'étiquette, le bouton est coché). Exemple peut être trouvé ci-dessous

<input id="button_1" type="radio" name="option" /><label for="button_1">Text for button 1</label>
<input id="button_2" type="radio" name="option" /><label for="button_2">Text for button 2</label>
159
Michiel Standaert

Les identifiants doivent être uniques

... dans l'arborescence des éléments DOM de la page afin que chaque contrôle soit individuellement accessible par son iddu côté client (dans la page du navigateur) par

  • Scripts Javascript chargés dans la page
  • Styles CSS définis sur la page

Le fait d'avoir des identifiants non uniques sur votre page restituera toujours votre page, mais celle-ci ne sera certainement pas valide. Les navigateurs sont assez tolérants lors de l'analyse de code HTML non valide. mais ne le faites pas simplement parce que il semble que cela fonctionne.

Les noms sont assez souvent uniques mais peuvent être partagés

... dans la page DOM entre plusieurs contrôles du même type (pensez aux boutons radio), ainsi, lorsque les données sont POSTÉES au serveur, seule une valeur particulière est envoyée. Ainsi, lorsque vous avez plusieurs boutons radio sur votre page, seul le nom valuesélectionné est renvoyé sur le serveur, même s'il existe plusieurs contrôles de boutons radio associés avec le même namename__.

Addendum pour l'envoi de données au serveur : lorsque les données sont envoyées au serveur (généralement au moyen d'une requête HTTP POST), toutes les données sont envoyées as paires nom-valeur où nom est le namedu contrôle HTML d'entrée et valeur est son valuetel que saisi/sélectionné par l'utilisateur. Ceci est toujours vrai pour les requêtes non-Ajax. Dans les demandes Ajax, les paires nom-valeur peuvent être indépendantes des contrôles d'entrée HTML sur la page, car les développeurs peuvent envoyer ce qu'ils veulent au serveur. Très souvent, les valeurs sont également lues à partir des contrôles d'entrée, mais j'essaie simplement de dire que ce n'est pas nécessairement le cas.

Quand les noms peuvent être dupliqués

Il peut parfois être bénéfique que les noms soient partagés entre les contrôles de tout type Mais quand? Vous n'avez pas précisé quelle pouvait être votre plate-forme de serveur, mais si vous utilisiez quelque chose comme Asp.net MVC, vous bénéficiez de la validation automatique des données (client et serveur) et de la liaison des données envoyées aux types forts. Cela signifie que ces noms doivent correspondre aux noms de propriété de type.

Supposons maintenant que vous avez ce scénario:

  • vous avez une vue avec une liste d'éléments du même type
  • l'utilisateur travaille généralement avec un élément à la fois. Il ne saisit donc que les données d'un seul élément et les envoie au serveur.

Ainsi, le modèle de votre vue (puisqu'il affiche une liste) est de type IEnumerable<SomeType> mais votre côté serveur n'accepte qu'un seul élément de type SomeTypename__.

Que diriez-vous du partage de nom alors?

Chaque élément est encapsulé dans son propre élément FORMet les éléments d’entrée qu’il contient portent le même nom. Ainsi, lorsque les données parviennent au serveur (quel que soit l’élément), elles sont correctement liées au type de chaîne attendu par l’action du contrôleur.

Ce scénario particulier est visible sur mon mini-site Créations . Vous ne comprendrez pas la langue, mais vous pouvez consulter ces multiples formulaires et noms partagés. Peu importe que IDname__s soient également dupliqués (ce qui est une violation de règle), mais cela pourrait être résolu. Cela n'a pas d'importance dans ce cas.

68
Robert Koritnik
  • name identifie formulaire champs *; elles peuvent donc être partagées par des commandes représentant de multiples valeurs possibles pour un tel champ (boutons radio, cases à cocher). Ils seront soumis en tant que clés pour les valeurs de formulaire.
  • id identifie DOM éléments; afin qu'ils puissent être ciblés par CSS ou Javascript.

* noms également utilisé pour identifier les ancres locales, mais ceci est obsolète et "id" est un moyen privilégié pour le faire de nos jours.

26
Javarome

name est le nom utilisé lorsque la valeur est transmise (dans l'URL ou dans les données publiées). id est utilisé pour niquement identifier l'élément pour le style CSS et JavaScript.

id peut également être utilisé comme ancre. Auparavant, <a name était utilisé pour cela, mais vous devriez aussi utiliser id pour les ancres. name sert uniquement à poster des données de formulaire.

10
GolezTrol

nom est utilisé pour soumission du formulaire dans DOM (modèle d'objet de document).

ID est utilisé pour nom unique des contrôles HTML dans le DOM spécialement pour Javascript & CSS

8
Anjan Kant

Le nom définit le nom de l'attribut dès que le formulaire est soumis. Donc, si vous voulez lire cet attribut plus tard, vous le trouverez sous le "nom" dans la demande POST ou GET.

Considérant que l'id est utilisé pour adresser un champ ou un élément en javascript ou css.

8
Matschie

L'identifiant est utilisé pour identifier de manière unique un élément en JavaScript ou en CSS.

Le nom est utilisé dans la soumission du formulaire. Lorsque vous soumettez un formulaire, seuls les champs portant un nom seront soumis.

6
Viyaan Jhiingade

J'espère que le bref exemple suivant vous sera utile:

<!DOCTYPE html>
<html>
<head>
  <script>
    function checkGender(){
      if(document.getElementById('male').checked) {
         alert("Selected gender: "+document.getElementById('male').value)
      }else if(document.getElementById('female').checked) {
         alert("Selected gender: "+document.getElementById('female').value)
      }
      else{
         alert("Please choose your gender")
      }
    }
  </script>
</head>
<body>
<h1>Select your gender:</h1>

<form>
  <input type="radio" id="male" name="gender" value="male">Male<br>
  <input type="radio" id="female" name="gender" value="female">Female<br>
  <button onclick="checkGender()">Check gender</button> 
</form> 
</body>
</html>

Dans le code, notez que les deux attributs "name" sont les mêmes pour définir le caractère optionnel entre "male" ou "female", mais que les "id" ne sont pas égaux pour les différencier.

3
Clemencio Morales Lucas

L'attribut name d'une entrée est utilisé par son parent HTML <form>s pour inclure cet élément en tant que membre du formulaire HTTP dans une demande POST ou la chaîne de requête dans une demande GET.

id doit être unique, car il doit être utilisé par JavaScript pour sélectionner l'élément dans le DOM à manipuler et utilisé dans les sélecteurs CSS.

2
StuperUser

L'ajout de références réelles à la documentation W3 expliquant de manière authentique le rôle de l'attribut "name" sur les éléments de formulaire. (Pour ce qui en vaut la peine, je suis arrivé ici en explorant exactement le fonctionnement de Stripe.js pour mettre en place une interaction sécurisée avec la passerelle de paiement Stripe. En particulier, qu'est-ce qui fait qu'un élément de saisie de formulaire est soumis au serveur ou l'empêche de le soumettre? )

Les documents W3 suivants sont pertinents:

HTML 4: https://www.w3.org/TR/html401/interact/forms.html#control-name Section 17.2 Contrôles

HTML 5: https://www.w3.org/TR/html5/forms.html#form-submission- et https://www.w3.org/TR/ html5/forms.html # construction-du-formulaire-ensemble de données Section 4.10.22.4 Construction du jeu de données de formulaire.

Comme expliqué ici, un élément d'entrée sera soumis par le navigateur si et seulement si il possède un attribut 'nom' valide.

Comme d'autres l'ont noté, l'attribut 'id' identifie de manière unique les éléments DOM, mais n'intervient pas dans la soumission d'un formulaire normal. (Bien que "javascript" puisse utiliser "id" ou d'autres attributs, il est alors possible d'utiliser des valeurs de formulaire que javascript pourrait utiliser pour les envois AJAX, etc.)

Une anomalie concernant les réponses précédentes/les commentateurs s'inquiètent des valeurs de id et des valeurs de nom se trouvant dans le même espace de noms. Pour autant que je sache d'après les spécifications, cela s'appliquait à certaines utilisations déconseillées de l'attribut name (pas sur les éléments de formulaire). Par exemple https://www.w3.org/TR/html5/obsolete.html :

"Les auteurs ne doivent pas spécifier l'attribut name sur un élément. Si l'attribut est présent, sa valeur ne doit pas être la chaîne vide ni être égale à la valeur de l'un des ID de la sous-arborescence de départ de l'élément autre que son propre ID. , le cas échéant, ni égale à la valeur de l'un des autres attributs de nom sur un élément du sous-arbre racine de l'élément.Si cet attribut est présent et que l'élément possède un ID, sa valeur doit être égale à l'ID de l'élément. Dans les versions antérieures du langage, cet attribut était conçu pour permettre de spécifier les cibles possibles pour les identificateurs de fragment dans les URL. L'attribut id devrait plutôt être utilisé. "

Clairement, dans ce cas particulier, il existe un certain chevauchement entre les valeurs id et name pour les balises 'a'. Mais cela semble être une particularité du traitement des identifiants de fragment et non pas du partage général de l'espace de noms d'identifiants et de noms.

2
gwideman

Un cas intéressant d’utilisation du même nom: input éléments de type checkbox comme ceci:

<input id="fruit-1" type="checkbox" value="Apple"  name="myfruit[]">
<input id="fruit-2" type="checkbox" value="orange" name="myfruit[]">

Du moins si la réponse est traitée par PHP, si vous cochez les deux cases, vos données POST indiqueront:

$myfruit[0] == 'Apple' && $myfruit[1] == 'orange'

Je ne sais pas si ce type de construction de tableau se produirait avec d'autres langages côté serveur, ou si la valeur de l'attribut name est uniquement traitée comme une chaîne de caractères, et c'est un raccourci de PHP syntaxe qu'un tableau basé sur 0 soit construit en fonction de l'ordre des données dans la réponse POST, qui est simplement:

myfruit[]       Apple
myfruit[]       orange

Vous ne pouvez pas faire ce genre de tour avec des identifiants. Quelques réponses dans Quelles sont les valeurs valides pour l'attribut id en HTML? semblent citer les spécifications de HTML 4 (bien qu'elles ne donnent pas de citation):

Les jetons ID et NOM doivent commencer par une lettre ([A-Za-z]) et peuvent être suivis par un nombre quelconque de lettres, chiffres ([0-9]), traits d'union ("-"), traits de soulignement ("_") , deux points (":") et périodes (".").

Ainsi, les caractères [ et ] ne sont valides ni dans les identifiants ni dans les noms en HTML4 (ils seraient acceptables en HTML5). Mais comme pour beaucoup de choses html, ce n’est pas parce que ce n’est pas valide que cela ne fonctionnera pas ou n’est pas extrêmement utile.

1
sootsnoot

Si vous utilisez JavaScript/CSS, vous devez utiliser "id" de contrôle pour appliquer tout élément CSS/JavaScript dessus.

Si vous utilisez name, CSS ne fonctionnera pas pour ce contrôle. Par exemple, si vous utilisez un calendrier JavaScript associé à une zone de texte, vous devez utiliser id of text control pour lui attribuer le calendrier JavaScript.

0
Ravi Wadje