An example of the difference between the id and name attributes in input

I have been making websites for a long time, but I still haven't figured out the difference between name and id in input. Recently, I was learning jquery and encountered this problem again, so I collected information on the Internet. When I saw this article, I sorted it out for later use.

It can be said that almost everyone who has done web development has asked, what is the difference between an element's ID and Name? Why do we need a Name if we have an ID?! We can also get the most classic answer: ID is like a person’s ID number, and Name is like his name. ID is obviously unique, while Name can be repeated.

Last week I also encountered the problem of ID and Name. I entered an input type="hidden" on the page and only wrote an ID='SliceInfo'. After assigning the value and submitting it, I used Request.Params["SliceInfo"] in the background but could not get the value. Later I realized that I should use Name to mark it, so I added Name='SliceInfo' in the input, and everything was ok.

The answer to ID and Name in the first paragraph is too general. Of course, that explanation is completely correct for ID, which is the Identity of the HTML element on the client side. The Name is actually much more complicated, because the Name has many uses, so it cannot be completely replaced by the ID and thus canceled. Specific uses include:

Purpose 1: As a server-side marker for HTML elements that can exchange data with the server, such as input, select, textarea, and button. We can get the value submitted by the element through Request.Params based on its Name on the server side.
Usage 2: Grouping of HTML element Input type='radio'. We know that radio button controls are in the same group class, and the check operation is mutex. Only one radio can be selected at a time. This grouping is achieved based on the same Name attribute.
Use 3: Create an anchor in the page. We know that <a href="URL">link</a> is to get a page hyperlink. If we do not use the href attribute but use Name instead, such as: <a name="PageBottom"></a>, we will get a page anchor.
Application 4: As the identity of an object, such as Applet, Object, Embed, and other elements. For example, in the Applet object instance, we will use its Name to reference the object.
Use 5: When associating an IMG element with a MAP element, if you want to define the hotspot area of the IMG, you need to use its attribute usemap, so that usemap="#name" (the Name of the associated MAP element).
Usage 6: Attributes of certain specific elements, such as attribute, meta, and param. For example, define a parameter <PARAM NAME = "appletParameter" VALUE = "value"> for an Object or <META NAME = "Author" CONTENT = "Dave Raggett"> in Meta.

Obviously, these uses cannot be simply replaced by ID, so the difference between ID and Name of HTML element is not like the difference between ID number and name, they are basically things with different functions.

Of course, the Name attribute of the HTML element can also play a little role as an ID in the page, because in the DHTML object tree, we can use document.getElementsByName to get an object array containing all the specified Name elements in the page. There is another problem with the Name attribute. When we dynamically create an element that can contain a Name attribute, we cannot simply use the assignment element.name = "..." to add its Name. Instead, we must use document.createElement('<element name = "myName"></element>') to add the Name attribute to the element when creating the element. What does this mean? Take a look at the following example to understand.

Copy code

The code is as follows:

The result displayed in the message box is: <INPUT id=myId>.

Copy code

The code is as follows:

< script language="JavaScript">
var input = document.createElement('<INPUT name="myName">');
input.id = 'myId';
alert(input.outerHTML);
</script>

The result displayed in the message box is: <INPUT id=myId name=myName>.
The design of initializing the Name property is not a defect of IE, because MSDN says to do so, but what is the principle of this design? I haven’t figured it out yet.

By the way, what if there are n (n>1) HTML elements with the same ID on the page? How to reference them in DHTML objects? If we use ASPX pages, this situation is not likely to happen, because the aspnet process does not allow non-unique IDs when processing aspx pages. In this case, an exception will be thrown on the page and it cannot be rendered normally. If it is not a dynamic page, and we insist on repeating the ID, what should IE do? At this time, we can still continue to use document.getElementById to get the object, but we can only get the first object that appears in HTML Render among those objects with duplicate IDs. At this time, the duplicate ID will automatically become an array when referenced, and the elements with duplicate IDs will exist in the array in the order of Render.

Form elements (form input textarea select) and frame elements (iframe frame) use name
These elements are all related to form submission (frame elements act on the target of form). Only elements with names are received on the receiving page of the form. Elements with IDs cannot receive values through the form. You can verify it yourself.
There is one exception: A can be assigned a name as an anchor, or an ID

Of course, the above elements can also be assigned ID values. When assigning ID values, the method of referencing these elements needs to be changed.
Assign name: document.formName.inputName document.frames("frameName")
Assign ID: document.getElementById("inputID") document.all.frameID

Elements that can only be assigned IDs but not names: (Except for form-related elements, which can only be assigned IDs)
body li table tr td th p div span pre dl dt dd font b etc.

<<: A very detailed explanation of Linux C++ multi-thread synchronization

>>: The latest collection of 18 green style web design works

An example of the difference between the id and name attributes in input

JavaScript to switch multiple pictures

Problem with resizing tables using relative widths

The whole process record of introducing Vant framework into WeChat applet

How to enable Flash in Windows Server 2016

Teach you how to install docker on windows 10 home edition

Solution to the MySQL installation prompt "Please type NET HELPMSG 3534 for more help"

MySQL Quick Data Comparison Techniques

How to isolate users in docker containers

Basic usage of find_in_set function in mysql

Element uses scripts to automatically build new components

Recommend

MySQL query optimization: a table optimization solution for 1 million data

0.1 seconds worth! A brief discussion on the problem of speeding up the front-end web pages

Troubleshooting and solutions for MySQL auto-increment ID oversize problem

Solution to the problem that MySQL commands cannot be entered in Chinese

Analysis of the method of setting up scheduled tasks in mysql

Tutorial on installing MySQL 5.6 using RPM in CentOS

When Navicat connects to MySQL, it reports 10060, 1045 errors and the location of my.ini

Steps to install cuda10.1 on Ubuntu 20.04 (graphic tutorial)

Implementation of CSS child element selection parent element

Overview of the Differences between Linux TTY/PTS

UDP simple server client code example

Realize map aggregation and scattering effects based on vue+openlayer

Implementation of vue3.0+vant3.0 rapid project construction

Bootstrap 3.0 learning notes button style

Markup language - specify CSS styles for text