Maison > interface Web > tutoriel HTML > Exemple d'introduction et d'analyse de la différence entre les attributs id et name en entrée

Exemple d'introduction et d'analyse de la différence entre les attributs id et name en entrée

高洛峰
Libérer: 2017-03-06 16:59:29
original
1417 Les gens l'ont consulté

Je n'ai toujours pas compris la différence entre le nom et l'identifiant dans la saisie. J'ai rencontré ce problème pendant mes études, je vais trier les informations collectées pour une utilisation future. Je crée un site Web depuis longtemps, mais je n'ai toujours pas compris la différence entre le nom et l'identifiant en entrée. J'ai récemment appris jquery et j'ai de nouveau rencontré ce problème, j'ai donc collecté des informations en ligne. Après avoir vu cet article, je l'ai trié pour une utilisation ultérieure.

On peut dire que presque tous ceux qui ont fait du développement Web se sont demandé quelle est la différence entre l'ID et le nom d'un élément ? Pourquoi avons-nous besoin de Name quand nous avons ID ?! Et nous pouvons également obtenir la réponse la plus classique : ID est comme le numéro d'identification d'une personne, et Name est comme si son nom est évidemment unique, et Name est répétable.

La semaine dernière, j'ai également rencontré le problème de l'ID et du nom. J'ai entré un type d'entrée="hidden" sur la page et j'ai seulement écrit un ID='SliceInfo'. Après avoir attribué la valeur, soumettre et utiliser la requête dans. l'arrière-plan Params["SliceInfo"] ne peut pas obtenir la valeur. Plus tard, j'ai soudainement réalisé qu'il devait être marqué avec Name, j'ai donc ajouté Name='SliceInfo' à l'entrée, et tout allait bien.

La réponse à ID et Name dans le premier paragraphe est trop générale. Bien sûr, cette explication est tout à fait correcte pour ID, qui est l'identité de l'élément HTML côté client. Name est en réalité beaucoup plus compliqué, car Name a de nombreuses utilisations, il ne peut donc pas être complètement remplacé par ID, ce qui l'annule. Les utilisations spécifiques sont :

Utilisation 1 : En tant qu'indicateur côté serveur des éléments HTML qui peuvent interagir avec le serveur, tels que la saisie, la sélection, la zone de texte et le bouton. Nous pouvons obtenir la valeur soumise par l'élément via Request.Params en fonction de son nom côté serveur.
Utilisez 2 : élément HTML Type d'entrée = regroupement 'radio', on sait que le contrôle du bouton radio est dans la même classe de regroupement, l'opération de vérification est mutex, une seule radio peut être sélectionnée en même temps, ce regroupement est basé sur le même attribut Name réalisé.
Objectif 3 : Créer un point d'ancrage dans la page. Nous savons que link est utilisé pour obtenir un lien hypertexte de page. Si vous n'utilisez pas l'attribut href, utilisez Nom. à la place, comme : < ;a name="PageBottom">, nous obtenons une ancre de page.
Utilisez 4 : Identité en tant qu'objet, tel qu'applet, objet, intégration et autres éléments. Par exemple, dans une instance d’objet Applet, nous utiliserons son nom pour faire référence à l’objet.
Objectif 5 : Lors de l'association entre des éléments IMG et des éléments MAP, si vous souhaitez définir la zone de hotspot d'IMG, vous devez utiliser son attribut usemap, donc usemap="#name" (Nom de l'élément MAP associé ).
Utilisation 6 : Attributs de certains éléments spécifiques, tels que l'attribut, la méta et le param. Par exemple, définissez les paramètres pour Object ou

Évidemment, ces utilisations ne peuvent pas être simplement remplacées par ID, donc la différence entre ID et Nom des éléments HTML n'est pas la différence entre le numéro d'ID et le nom. Ils ont des fonctions différentes.

Bien sûr, l'attribut Name de l'élément HTML peut également jouer un rôle d'ID dans la page, car dans l'arborescence des objets DHTML, nous pouvons utiliser document.getElementsByName pour obtenir un tableau d'objets contenant tous les noms spécifiés. éléments dans la page. Il y a un autre problème avec l'attribut Name. Lorsque nous créons dynamiquement un élément pouvant contenir l'attribut Name, nous ne pouvons pas simplement utiliser l'affectation element.name = "..." pour ajouter son Name. Nous devons utiliser document.createElement( when. la création de l'élément. '') ajoute l'attribut Name à l'élément. Qu'est-ce que cela signifie? Il suffit de regarder l'exemple ci-dessous pour comprendre.

Le code est le suivant :

<script language="JavaScript"> 
var input = document.createElement(&#39;INPUT&#39;); 
input.id = &#39;myId&#39;; 
input.name = &#39;myName&#39;; 
alert(input.outerHTML); 
< /script>
Copier après la connexion


Le résultat affiché dans la boîte de message est : .

Le code est le suivant :

< script language="JavaScript"> 
var input = document.createElement(&#39;<INPUT name="myName">&#39;); 
input.id = &#39;myId&#39;; 
alert(input.outerHTML); 
< /script>
Copier après la connexion


消息框里显示的结果是:
初始化Name属性的这个设计不是IE的缺陷,因为MSDN里说了要这么做的,可是这样设计的原理什么呢?我暂时没有想太明白。

这里再顺便说一下,要是页面中有n(n>1)个HTML元素的ID都相同了怎么办?在DHTML对象中怎么引用他们呢?如果我们使用ASPX页面,这样的情况是不容易发生的,因为aspnet进程在处理aspx页面时根本就不允许有ID非唯一,这是页面会被抛出异常而不能被正常的render。要是不是动态页面,我们硬要让ID重复那IE怎么搞呢?这个时候我们还是可以继续使用document.getElementById获取对象,只不过我们只能获取ID重复的那些对象中在HTML Render时第一个出现的对象。而这时重复的ID会在引用时自动变成一个数组,ID重复的元素按Render的顺序依次存在于数组中。

表单元素(form input textarea select)与框架元素(iframe frame)用 name
这些元素都与表单(框架元素作用于form的target)提交有关, 在表单的接收页面只
接收有name的元素, 赋ID的元素通过表单是接收不到值的, 你自己可以验证一下.
有一个例外: A 可以赋 name 作为锚点, 也可以赋ID

当然上述元素也可以赋ID值, 赋ID值的时候引用这些元素的方法就要变一下了.
赋 name: document.formName.inputName document.frames("frameName")
赋 ID : document.getElementById("inputID") document.all.frameID

只能赋ID不能赋name的元素:(除去与表单相关的元素都只能赋ID)
body li table tr td th p p span pre dl dt dd font b 等等

更多input中id和name属性的区别示例介绍分析相关文章请关注PHP中文网!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal