HTML 中的 id 和 name 属性有什么区别?
ID 属性
ID 是输入表单元素，与元素中包含的数据无关。输入元素 id 用于将元素与 JavaScript 和 CSS 挂钩。通过使用 id 属性，我们可以在客户端验证和操作元素的值。
在 java 脚本中，使用 id 属性我们可以获取输入元素的值。
document.getElementById("id").value;
在 CSS 中，ID 属性以 # 字符引用。
#id
如果我们考虑 HTML 元素，ID 属性是唯一标识符，它区分大小写并以字母开头，在 URL 中 ID 属性可以用作锚点引用。
示例
以下是示例，演示了 ID 属性的用法 −
<!DOCTYPE html>
<html>
<head>
<style>
#myId {
background-color: yellow;
color: black;
padding: 40px;
text-align: center;
}
</style>
</head>
<body>
<h1 id="myId">TutorialsPoint</h1>
</body>
</html>
当我们运行上述程序时，输出将显示为居中黑色文本和黄色背景颜色的 Tutorialspoint 文本。
Name 属性
name 属性用于 HTTP 请求，该请求由浏览器发送到服务器，作为与 value 属性中包含的数据相关联的变量名。使用 name 属性，我们可以在服务器端验证和操作元素的值。
在服务器端，使用 name 属性我们可以获取输入元素的值。
request.getParameter("name");
Name 属性也区分大小写，以字母开头，但 name 属性不是唯一的。
在 java 脚本中，name 属性通过以下方式引用:
getElementsByName();
在 CSS 中，name 属性不能被引用。
HTML 中 Name 属性的用法
在 <form> 元素中，name 属性用作提交数据的引用。
示例
以下示例显示了 form 标签中 Name 属性的用法 −
<form action="action.php" method="get"> Select the course: <button name="course" type="submit" value="HTML">HTML</button> <button name="course" type="submit" value="JavaScript"> JavaScript</button> <button name="course" type="submit" value="CSS">CSS</button> </form>
示例
以下示例显示了 iframe 标签中 Name 属性的用法。
在 <iframe> 元素中，name 属性用于定位表单提交。
<iframe src="sample.html name="iframe1"></iframe> <a href=https://www.tutorialspoint.com/index.htm target="iframe1"> TutrialsPoint.com </a>
示例
以下示例显示了 map 元素中 Name 属性的用法。
在 <meta>元素中，name 属性表示内容值的名称。
<img src="Flower.jpg" height="120" width="140" alt="Flower" usemap="#flowermap"> <map name="flowermap"> <area shape="circle" cords="120,54,8" href="rose.htm" alt="Rose"> </map>
示例
以下示例显示了 meta 元素中 Name 属性的用法。在 <meta> 元素中，name 属性表示内容值的名称。
<head> <meta name="desc" content ="Tutorials"> <meta name="keywords" content="CSS, JavaScript"> </head>
示例
以下示例演示了 Name 属性的用法 −
<!DOCTYPE html>
<html>
<body>
<h1>Select Name attribute</h1>
<p>The name attribute mention the names of course in drop down list:</p>
<form action="page1.php">
<label for="course">Choose a course:</label>
<select name="course" id="course">
<option value="html">HTML5</option>
<option value="css">CSS</option>
<option value="java">JAVA</option>
<option value="oracle">ORACLE</option>
</select>
<br>
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>
当我们运行上述程序时，将显示带有课程选项下拉列表的名称属性。并且可以看到标有提交的按钮，用于提交输入的信息。
HTML 中 ID 和 Name 属性之间的差异
以下是 ID 和 Name 属性之间的一些差异 −
ID 属性 |
Name 属性 |
|---|---|
ID 属性在 HTML 中是唯一的 |
Name 属性不是唯一的 |
它被称为整个 HTML 元素的标识符 |
在 HTML 中，它被称为名称-值的标识符对。 |
ID 属性可以应用于 CSS 样式表和 JavaScript |
Name 属性只能在 JavaScript 中使用，不适用于 CSS |
元素内与数据没有对应关系 |
元素内与数据有对应关系 |
与 Name 属性相比，ID 性能更高 |
与 ID 属性相比，Name 属性性能较低 |
在 JavaScript 中，ID 属性用作 document.getElementById("id").value; |
在 JavaScript 中，Name 属性是引用为 getElementsByName(); |
ID 是从前端访问的全局属性 |
Name 是在后端编码时插入的本地属性 |
