Web Front-end
HTML Tutorial
Example introduction to the difference between id and name attributes in input_HTML/Xhtml_Web page production
Example introduction to the difference between id and name attributes in input_HTML/Xhtml_Web page production
I have been building a website for a long time, but I still haven’t figured out the difference between name and id in input. I recently learned jquery and encountered this problem again, so I collected information online. After seeing 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 the ID and Name of an element? Why do we need Name when we have ID?! And we can also get the most classical answer: ID is like a person's ID number, and Name is like his name. ID is obviously unique, and Name is repeatable.
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, submit and use Request in the background. Params["SliceInfo"] cannot get the value. Later, I suddenly realized that it should be marked with Name, so I added Name='SliceInfo' to 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. Name is actually much more complicated, because Name has many uses, so it cannot be completely replaced by ID, thus canceling it. Specific uses are:
Use 1: As a server-side indicator of HTML elements that can interact 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.
Use 2: HTML element Input type='radio' grouping, we know that the radio button control is in the same grouping class, the check operation is mutex, only one radio can be selected at the same time, this grouping is based on the same Name attribute realized.
Use 3: Establish an anchor point in the page. We know that link is to obtain a page hyperlink. If you do not use the href attribute, use Name instead, such as: < ;a name="PageBottom">, we get a page anchor.
Use 4: Identity as an object, such as Applet, Object, Embed and other elements. For example, in an Applet object instance, we will use its Name to refer to the object.
Purpose 5: When associating between IMG elements and MAP elements, if you want to define the hotspot area of IMG, you need to use its attribute usemap, so usemap="#name" (Name of the associated MAP element).
Use 6: Attributes of certain specific elements, such as attribute, meta and param. For example, define parameters for Object or in Meta.
Obviously these uses cannot be simply replaced by ID, so the difference between ID and Name of HTML elements is not the difference between ID number and name. They have different functions. .
Of course, the Name attribute of the HTML element can also play a role as an ID in the page, because in the DHTML object tree, we can use document.getElementsByName to obtain an object array containing all specified Name elements in the page. . There is another problem with the Name attribute. When we dynamically create an element that can contain the Name attribute, we cannot simply use the assignment element.name = "..." to add its Name. We must use document.createElement( when creating the Element. '
var input = document.createElement('INPUT');
input.id = 'myId';
input.name = 'myName';
alert(input.outerHTML);
< /script>
The result displayed in the message box is: .
< script language="JavaScript"> ;
var input = document.createElement('');
input.id = 'myId';
alert(input.outerHTML);
< ; /script>
The result displayed in the message box is: .
The design of initializing the Name attribute is not a defect of IE, because MSDN says it should be done this way, but what is the principle of this design? I haven't thought too clearly yet.
By the way, what if there are n (n>1) HTML elements in the page with the same ID? How to reference them in DHTML objects? If we use ASPX pages, such a situation is not easy to happen, because the aspnet process does not allow non-unique IDs when processing aspx pages. This means that the page will throw an exception and cannot be rendered normally. If it is not a dynamic page and we insist on repeating the ID, what should we do with IE? At this time, we can still use document.getElementById to obtain objects, but we can only obtain the first object that appears during HTML Render among those objects with duplicate IDs. At this time, the repeated ID will automatically become an array when referenced, and the elements with repeated IDs will exist in the array in order of Render.
Form elements (form input textarea select) and frame elements (iframe frame) are named
These elements are related to form submission (frame elements act on the target of the form). On the receiving page of the form, only
Receive elements with name. Elements assigned ID cannot receive values through the form. You can verify it yourself.
There is an exception: A can be assigned name as an anchor or ID
Of course, the above elements can also be assigned ID values. When assigning ID values, the method of referencing these elements will change.
Assign name: document.formName.inputName document.frames("frameName")
Assign ID: document.getElementById("inputID") document.all.frameID
Only IDs can be assigned but not names: (except for elements related to the form, only IDs can be assigned)
body li table tr td th p div span pre dl dt dd font b etc.
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1386
52
Fix event ID 55, 50, 98, 140 disk error in event viewer
Mar 19, 2024 am 09:43 AM
If you find event ID 55, 50, 140 or 98 in the Event Viewer of Windows 11/10, or encounter an error that the disk file system structure is damaged and cannot be used, please follow the guide below to resolve the issue. What does Event 55, File system structure on disk corrupted and unusable mean? At session 55, the file system structure on the Ntfs disk is corrupted and unusable. Please run the chkMSK utility on the volume. When NTFS is unable to write data to the transaction log, an error with event ID 55 is triggered, which will cause NTFS to fail to complete the operation unable to write the transaction data. This error usually occurs when the file system is corrupted, possibly due to the presence of bad sectors on the disk or the file system's inadequacy of the disk subsystem.
This Apple ID is not yet in use in the iTunes Store: Fix
Jun 10, 2024 pm 05:42 PM
When logging into iTunesStore using AppleID, this error saying "This AppleID has not been used in iTunesStore" may be thrown on the screen. There are no error messages to worry about, you can fix them by following these solution sets. Fix 1 – Change Shipping Address The main reason why this prompt appears in iTunes Store is that you don’t have the correct address in your AppleID profile. Step 1 – First, open iPhone Settings on your iPhone. Step 2 – AppleID should be on top of all other settings. So, open it. Step 3 – Once there, open the “Payment & Shipping” option. Step 4 – Verify your access using Face ID. step
Where can I find Alibaba ID?
Mar 08, 2024 pm 09:49 PM
In Alibaba software, once you successfully register an account, the system will assign you a unique ID, which will serve as your identity on the platform. But for many users, they want to query their ID, but don't know how to do it. Then the editor of this website will bring you detailed introduction to the strategy steps below. I hope it can help you! Where can I find the answer to Alibaba ID: [Alibaba]-[My]. 1. First open the Alibaba software. After entering the homepage, we need to click [My] in the lower right corner; 2. Then after coming to the My page, we can see [id] at the top of the page; Alibaba Is the ID the same as Taobao? Alibaba ID and Taobao ID are different, but the two
![Event ID 4660: Object deleted [Fix]](https://img.php.cn/upload/article/000/887/227/168834320512143.png?x-oss-process=image/resize,m_fill,h_207,w_330)
Event ID 4660: Object deleted [Fix]
Jul 03, 2023 am 08:13 AM
Some of our readers encountered event ID4660. They're often not sure what to do, so we explain it in this guide. Event ID 4660 is usually logged when an object is deleted, so we will also explore some practical ways to fix it on your computer. What is event ID4660? Event ID 4660 is related to objects in Active Directory and will be triggered by any of the following factors: Object Deletion – A security event with Event ID 4660 is logged whenever an object is deleted from Active Directory. Manual changes – Event ID 4660 may be generated when a user or administrator manually changes the permissions of an object. This can happen when changing permission settings, modifying access levels, or adding or removing people or groups
Where to check Tencent Video ID
Feb 24, 2024 pm 06:25 PM
Where can I check the Tencent Video ID? There is an exclusive ID in the Tencent Video APP, but most users do not know how to check the Tencent Video ID. Next is the graphic tutorial on how to check the Tencent Video ID brought by the editor for users who are interested. Users come and take a look! Tencent Video Usage Tutorial Where to check Tencent Video ID 1. First open the Tencent Video APP and enter the special area through [Personal Center] in the lower right corner of the main page; 2. Then enter the Personal Center page and select the [Settings] function; 3. Then go to Settings page, click [Exit Account] at the bottom; 4. Finally, you can view the exclusive ID number on the page shown below.
How to encapsulate input components and unified form data in vue3
May 12, 2023 pm 03:58 PM
Preparation Use vuecreateexample to create a project. The parameters are roughly as follows: use native input. Native input is mainly value and change. The data needs to be synchronized when changing. App.tsx is as follows: import{ref}from'vue';exportdefault{setup(){//username is the data constusername=ref('Zhang San');//When the input box changes, synchronize the data constonInput=;return( )=>({
How to implement laravel input hidden field
Dec 12, 2022 am 10:07 AM
How to implement the laravel input hidden field: 1. Find and open the Blade template file; 2. Use the method_field method in the Blade template to create a hidden field. The creation syntax is "{{ method_field('DELETE') }}".
What should I do if vue cannot get the id attribute?
Jan 29, 2023 pm 02:03 PM
Vue cannot obtain the id attribute because getElementById is used in the "created()" hook function, and Vue has not completed mounting; the solution is to "created() {let serachBox = document.getElementById('searchBox') ;...}" code can be migrated to the "mounted()" hook function.
