HTML中id和name属性之间的区别

html HTML

Tony老丝

2020-03-17

idname属性有什么区别它们似乎都具有提供标识符的相同目的。

我想知道(特别是关于HTML表单)出于某种原因是否有必要或同时使用两者。

第1948篇《HTML中id和name属性之间的区别》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

16个回答
Davaid西里 2020.03.17

ID is used to uniquely identify an element.

Name is used in forms.Although you submit a form, if you dont give any name, nothing will will be submitted. Hence form elements need a name to get identified by form methods like "get or push".

And the ones only with name attribute will go out.

神无樱 2020.03.17

There is no literal difference between an id and name. name is identifier and is used in http request sent by browser to server as a variable name associated with data contained in the value attribute of element.

The id on the other hand is a unique identifier for browser, client side and JavaScript.Hence form needs an id while its elements need a name . id is more specicifically used in adding attributes to unique elements.In DOM methods,Id is used in Javascript for referencing the specific element you wantyour action to take place on.For example:-

<html>
<body>

<h1 id="demo"></h1>

<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>
</body>
</html>

Same can be achieved by name attribute,but its preffered to use id in form and name for small form elements like the input tag or select tag.

小小阿飞小胖 2020.03.17

Based on personal experiences and according to the W3 Schools description for attributes:

ID is a Global Attribute and applies to virtually all elements in HTML. It is used to uniquely identify elements on the Web page, and its value is mostly accessed from the frontend (typically through JavaScript or jQuery).

name is an attribute that is useful to specific elements (such as form elements, etc) in HTML. Its value is mostly sent to the backend for processing.

https://www.w3schools.com/tags/ref_attributes.asp

TomLEY 2020.03.17

Below is an interesting use of the id attribute. It is used within the tag and used to identify the form for elements outside of the boundaries so that they will be included with the other fields within the form.

 <form action="action_page.php" id="form1">
 First name: <input type="text" name="fname"><br>
 <input type="submit" value="Submit">
 </form>

 <p>The "Last name" field below is outside the form element, but still part of the form.</p>
 Last name: <input type="text" name="lname" form="form1">
Harry乐Gil 2020.03.17

Id : 1) It is used to identify the HTML element through the Document Object Model (via Javascript or styled with CSS). 2) Id is expected to be unique within the page.

Name corresponds to the form element and identifies what is posted back to the server. Example :

<form action="action_page.php" id="Myform">
 First name: <input type="text" name="FirstName"><br>
 <input type="submit" value="Submit">
 </form>

 <p>The "Last name" field below is outside the form element, but still part of the form.</p>
 Last name: <input type="text" name="LastName" form="Myform">
小小Eva斯丁 2020.03.17

该链接具有相同基本问题的答案,但基本上,id用于脚本标识,名称用于服务器端。

http://www.velocityreviews.com/forums/t115115-id-vs-name-attribute-for-html-controls.html

Pro逆天猿 2020.03.17

The ID of a form input element has nothing to do with the data contained within the element. IDs are for hooking the element with JavaScript and CSS. The name attribute, however, is used in the HTTP request sent by your browser to the server as a variable name associated with the data contained in the value attribute.

For instance:

<form>
    <input type="text" name="user" value="bob">
    <input type="password" name="password" value="abcd1234">
</form>

When the form is submitted, the form data will be included in the HTTP header like this:

If you add an ID attribute, it will not change anything in the HTTP header. It will just make it easier to hook it with CSS and JavaScript.

Tom神奇 2020.03.17

name对于链接目标已弃用,在HTML5中无效。它至少在最新的Firefox(v13)中不再起作用。更改<a name="hello"><a id="hello">

目标不需要是<a>标签,可以是<p id="hello">或<h2 id="hello">等等,这通常是更干净的代码。

正如其他帖子所明确指出的那样,name表格仍在使用(需要)。它也仍在META标签中使用。

Tom理查德逆天 2020.03.17
<form action="demo_form.asp">
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male"><br>
<label for="female">Female</label>
<input type="radio" name="sex" id="female" value="female"><br>
<input type="submit" value="Submit">
</form>
米亚十三Harry 2020.03.17

Generally, it is assumed that name is always superseded by id. This is true, to some extent, but not for form fields and frame names, practically speaking. For example, with form elements the name attribute is used to determine the name-value pairs to be sent to a server-side program and should not be eliminated. Browsers do not use id in that manner. To be on the safe side, you could use name and id attributes on form elements. So, we would write the following:

<form id="myForm" name="myForm">
     <input type="text" id="userName" name="userName" />
</form>

To ensure compatibility, having matching name and id attribute values when both are defined is a good idea. However, be careful—some tags, particularly radio buttons, must have nonunique name values, but require unique id values. Once again, this should reference that id is not simply a replacement for name; they are different in purpose. Furthermore, do not discount the old-style approach, a deep look at modern libraries shows such syntax style used for performance and ease purposes at times. Your goal should always be in favor of compatibility.

Now in most elements, the name attribute has been deprecated in favor of the more ubiquitous id attribute. However, in some cases, particularly form fields (<button>, <input>, <select>, and <textarea>), the name attribute lives on because it continues to be required to set the name-value pair for form submission. Also, we find that some elements, notably frames and links, may continue to use the name attribute because it is often useful for retrieving these elements by name.

id和name之间有明显的区别。通常,当名称继续出现时,我们可以将值设置为相同。但是,id必须是唯一的,在某些情况下,名称应该不是唯一的-想想单选按钮。令人遗憾的是,虽然id值的唯一性虽然受到标记验证的约束,但并没有达到应有的一致性。浏览器中的CSS实现将为共享ID值的对象设置样式;因此,直到运行时,我们才可能捕获可能影响JavaScript的标记或样式错误。

摘自JavaScript- The Complete Reference by Thomas-Powell

NearAStafan 2020.03.17

我考虑和使用它的方式很简单:

id用于CSS和JavaScript / jQuery(在页面中必须是唯一的)

通过HTML提交表单时,名称用于PHP中的表单处理(在表单中必须唯一-在某种程度上,请参见下面的Paul的评论)

老丝路易神乐 2020.03.17

ID标签-CSS使用的ID标签,定义div,span或其他元素唯一实例。出现在Javascript DOM模型中,使您可以通过各种函数调用来访问它们。

字段的名称标签-每个表单的名称标签都是唯一的-除非您要传递给PHP /服务器端处理的数组。您可以按名称通过Javascript访问它,但我认为它不会作为DOM中的节点出现,或者可能会受到一些限制(例如,如果我没记错的话,则不能使用.innerHTML)。

古一Green 2020.03.17

看到这个http://mindprod.com/jgloss/htmlforms.html#IDVSNAME

有什么不同?简短的答案是,请同时使用两者,不要担心。但是,如果您想了解这种愚蠢的做法,请参考以下内容:

id =用作这样的目标:<some-element id="XXX"></some-element>对于这样的链接:<a href="#XXX"

当您单击表单中的“提交”时,name =还用于标记通过HTTP(超文本传输​​协议)GET或POST发送到服务器的消息中的字段。

id= labels the fields for use by JavaScript and Java DOM (Document Object Model). The names in name= must be unique within a form. The names in id= must be unique within the entire document.

Sometimes the the name= and id= names will differ, because the server is expecting the same name from various forms in the same document or various radio buttons in the same form as in the example above. The id= must be unique; the name= must not be.

JavaScript needed unique names, but there were too many documents already out here without unique name= names, so the W3 people invented the id tag that was required to be unique. Unfortunately older browsers did not understand it. So you need both naming schemes in your forms.

NOTE: attribute "name" for some tags like <a> is not supported in HTML5.

GreenStafan 2020.03.17

这是一个简短的摘要:

  • id用于通过文档对象模型(通过JavaScript或CSS样式)识别HTML元素id在页面内应该是唯一的。

  • name对应于form元素,并标识发布回服务器的内容

GOJinJin 2020.03.17

name属性用于表单控件(例如<input><select>),因为这是表单提交时在POSTGET调用中使用的标识符

id每当您需要使用CSS,JavaScript或片段标识符来寻址特定的HTML元素时,请使用属性也可以通过名称查找元素,但是通过ID 查找元素更简单,更可靠

小宇宙Itachi 2020.03.17

name在表单提交中发送数据时使用属性。不同的控件反应不同。例如,您可能有几个单选按钮,它们具有不同的id属性,但属性相同name提交后,响应中只有一个值-您选择的单选按钮。

当然,这还不止于此,但是它一定会让您思考正确的方向。

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android