Question Entrée HTML - nom et identifiant


En utilisant le HTML <input> tag, quelle est la différence entre l'utilisation de la name et id attributs en particulier que j'ai trouvé qu'ils sont parfois nommés le même?


461
2017-09-19 11:33


origine


Réponses:


Dans HTML4.01:

pré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 les boutons radio et les cases à cocher
  • Impossible de référencer 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 le id attribut
  • Doit commencer par une lettre
  • Selon les spécifications est sensible à la casse, mais la plupart des navigateurs modernes ne semblent pas suivre cette
  • Utilisé sur les éléments de formulaire pour soumettre des informations. Seulement les tags d'entrée avec un name attribut sont soumis au serveur

Id Attribut

  • Valable sur tout élément sauf <base>, <html>, <head>, <meta>, <param>, <script>, <style>, <title>
  • Chaque identifiant doit être unique dans le page comme rendu dans le navigateur, qui peut ou peut ne pas être tout dans le même fichier
  • Peut être utilisé comme référence d'ancre dans l'URL
  • Est référencé en CSS ou URL avec # signe
  • Est référencé dans JS avec getElementById(), et jQuery par $(#<id>)
  • Partage le même espace de nom que l'attribut de nom
  • 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 (-), les deux points (:), ou des périodes (.)
  • Est insensible à la casse

En (X) HTML5, tout est pareil sauf:

prénom Attribut

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

Id Attribut

  • Valable sur n'importe quel élément
  • XHTML dit que tout doit être en minuscules, mais la plupart des navigateurs ne le suivent pas

Cette question a été écrite quand HTML4.01 était la norme, et beaucoup de navigateurs et de dispositifs étaient différents d'aujourd'hui.


262
2017-09-19 11:38



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

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

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

$_POST["message_name"];

L'id est utilisé pour le style, comme dit précédemment, pour quand vous voulez utiliser css spécifique.

#message_id
{
    background-color: #cccccc;
}

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

De plus, le nom peut être utilisé pour plus d'éléments, comme lorsque vous utilisez des radiobuttons. Le nom 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 dire plus comment id est utilisé, parce que vous voudrez probablement une étiquette avec votre radiobutton. L'étiquette a un attribut for, qui utilise l'id de votre entrée pour lier cette étiquette à votre entrée (lorsque vous cliquez sur l'étiquette, le bouton est coché). L'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>

Et je suppose que c'est à peu près tout.


150
2017-09-19 11:45



Les identifiants doivent être uniques

... dans l'arborescence des éléments DOM, donc chaque contrôle est accessible individuellement par son id côté client (dans la page du navigateur) par

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

Avoir des identifiants non uniques sur votre page rendra toujours votre page, mais elle ne sera certainement pas valide. Les navigateurs sont très indulgents lors de l'analyse du code HTML invalide. mais ne le faites pas simplement parce que il semble que ça marche.

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

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

Addendum à 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 paires nom-valeur où prénom est le name du contrôle HTML d'entrée et valeur est son value comme entré / sélectionné par l'utilisateur. Ceci est toujours vrai pour les requêtes non-Ajax. Dans Ajax demande des paires nom-valeur pouvez être indépendant 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 forcément le cas.

Quand les noms peuvent être dupliqués

Il peut parfois être utile que les noms soient partagés entre les contrôles de tout type d’entrée de formulaire. Mais quand? Vous n'avez pas indiqué ce que votre plate-forme serveur peut être, mais si vous avez utilisé 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, de sorte qu'il entrera uniquement des données avec un seul élément et l'enverra au serveur

Donc 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 SomeType.

Que diriez-vous du partage de nom alors?

Chaque article est emballé dans son propre FORM Les éléments element et input en ont les mêmes noms, donc quand les données arrivent sur le serveur (à partir de n'importe quel élément), elles sont correctement liées au type de chaîne attendu par l'action du contrôleur.

Ce scénario particulier peut être vu sur mon Histoires créatives mini-site. Vous ne comprendrez pas la langue, mais vous pouvez vérifier ces multiples formulaires et noms partagés. Ça n'a pas d'importance IDs sont é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.


64
2017-09-19 11:35



  • name identifie forme des champs* ; ils peuvent donc être partagés par des contrôles représentant plusieurs 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 aussi habitué identifier les ancres locales, mais ceci est obsolète et «id» est la méthode préférée pour le faire de nos jours.


25
2018-01-22 16:56



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

le id peut être utilisé comme ancre aussi. Dans les vieux jours, <a name a été utilisé pour cela, mais vous devriez utiliser le id pour les ancres aussi. name est seulement pour poster des données de formulaire.


10
2017-09-19 11:36



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

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


8
2018-05-03 10:12



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 requête POST ou GET.

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


5
2017-09-19 11:36



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

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


4
2017-09-24 06:16