1. 前言
在 HTML 中，id 与 name 是两个非常常见的属性。它们都可以用来标识 HTML 标签的某一个元素或对象。那么，它们有什么区别呢？在这篇文章中，我们将会详细介绍 id 和 name 的区别，以及它们分别在 HTML 中的应用。
2. id 与 name 的定义
2.1 id 属性
id 属性是 HTML 标签中的一个全局属性，用于为一个 HTML 元素定义唯一的标识符。每个页面中的 id 应该是唯一的。id 属性常被用于 JavaScript 或 CSS 中，以定位和修改特定的 HTML 元素。通过 JavaScript 可以通过 getElementById() 方法来获取特定 id 属性所对应元素的引用。
<div id="example">This is an example.</div>
例如，上面这个例子中，我们用 id="example" 来标识这个 div 标签。在 JavaScript 中，我们可以通过以下代码来获取这个元素并修改它的属性：
const exampleDiv = document.getElementById('example');
exampleDiv.style.backgroundColor = 'red';
2.2 name 属性
name 属性也是 HTML 标签中的一个全局属性，但是它的应用范围比 id 更加广泛。name 属性通常被用于表单元素中，它为表单元素定义了一个名称，这个名称在提交表单时会被用作键（key）的一部分。在提交表单数据时，可以通过表单元素的 name 属性来获取表单数据。
<input type="text" name="username">
例如，上面这个例子中，我们用 name="username" 来标识这个 input 标签。在提交表单时，我们可以通过该 input 元素的 name 属性来获取表单数据的值。
3. id 与 name 的区别
3.1 作用范围不同
id 属性是全局属性，它的唯一标识符只在一个页面中起作用。而 name 属性是定义在表单元素内部的属性，它的唯一标识符只在表单元素内部起作用。一个 name 属性的值可以在同一个表单中出现多次，以表示一组相关的控件。
3.2 对 JavaScript 的支持不同
id 属性在 JavaScript 中的支持比 name 属性更加完善。通过 id 属性可以简单地用 document.getElementById() 获取一个元素的引用。而在 JavaScript 中获取 name 属性所对应的元素比较麻烦，需要通过 document.getElementsByName() 方法来获取元素的引用。
3.3 用途不同
id 属性通常被用于标识一个具体的元素，并可以通过 JavaScript 或 CSS 来访问和修改它。而 name 属性通常被用于表单元素中，用于表示表单数据的键名，以便在提交表单数据时能够正确地获取值。
4. 实例分析
在实际应用中，id 和 name 属性常常被用于不同的场景。下面我们通过一个实例来详细介绍它们的应用。
我们假设有一个注册页面，需要用户输入用户名、密码和电子邮箱。代码如下：
<form action="/" method="post">
<label for="username">Username:</label>
<input type="text" name="username" id="username">
<label for="password">Password:</label>
<input type="password" name="password" id="password">
<label for="email">Email:</label>
<input type="email" name="email" id="email">
<input type="submit" value="Register">
</form>
在这个表单中，我们将用户名、密码和电子邮箱显式地用 name 和 id 属性进行标识。这样，在提交表单时我们就可以获取到这些数据的值，以便进行进一步的处理。
对于用户名和密码，我们通常需要进行一些特殊的验证，如判断长度、字符合法性等等。在 JavaScript 中可以很方便地获取用户名和密码的元素引用，如下所示：
const usernameInput = document.getElementById('username');
const passwordInput = document.getElementById('password');
// Validate input
if (usernameInput.value.length < 6) {
alert('Username too short');
}
if (passwordInput.value.length < 8) {
alert('Password too short');
}
对于电子邮箱，我们通常需要使用表单的合法性检查功能，确保用户输入的是一个合法的电子邮件地址。在这种情况下，我们可以使用 name 属性来获取表单数据，并将数据传递给 HTML5 内置的表单验证器进行验证。例如：
<form action="/" method="post">
<label for="email">Email:</label>
<input type="email" name="email" id="email" required>
<input type="submit" value="Register">
</form>
在这个例子中，我们在电子邮箱 input 元素中添加了一个 required 属性，表示这个字段是必填的。这样，在提交表单时，如果用户没有填写电子邮箱或者填写了一个不符合规范的邮箱地址，浏览器会自动提示用户进行修正。通过 name 属性，我们可以在表单提交时获取这个 email 的值，并将它传递给 HTML5 内置的表单验证器进行验证。
5. 总结
在 HTML 中，id 和 name 属性都是非常重要的属性。它们都可以用来标识 HTML 元素或对象，并在 JavaScript 或表单提交时对其进行操作。虽然它们有很多的相似之处，但是它们分别适用于不同的场景。在实际应用中，我们需要根据具体的需求来选择使用 id 或 name 属性。