数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究HTML 中 id 和 name 属性有什么区别？
ID 属性
ID 是一个输入表单元素，与元素中包含的数据无关。输入元素 ID 用于将元素与 JavaScript 和 CSS 关联。通过使用 id 属性，我们可以在客户端验证和操作元素的值。
在 JavaScript 中，使用 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 属性不是唯一的。
在 JavaScript 中，name 属性用以下方式引用：
getElementsByName();
在 CSS 中，无法引用 name 属性。
Name 属性在 HTML 中的用法
在 <form> 元素中，name 属性用作提交数据的参考。
示例
以下示例显示了 Name 属性在 form 标签中的用法：
<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>
示例
以下示例显示了 Name 属性在 iframe 标签中的用法。
在 <iframe> 元素中，name 属性用于指定表单提交的目标。
<iframe src=”sample.html name=”iframe1”></iframe> <a href=https://tutorialspoint.com/index.htm target=”iframe1”> TutrialsPoint.com </a>
示例
以下示例显示了 Name 属性在 map 元素中的用法。
在 <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>
示例
以下示例显示了 Name 属性在 meta 元素中的用法。在 <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>
当我们运行以上程序时，会显示带有课程选项下拉列表的 name 属性。并且观察到标有“提交”的按钮用于提交输入的信息。
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 是一个本地属性，在后端编码时插入 |
2K+ 阅读量
