HTML name 语法
在 HTML 中，name 属性用来为某些元素指定一个 “名字”，这个名字在表单提交、脚本操作等场景中非常有用。
name 属性可以应用在以下几类元素上：
- 表单元素：包括 input、textarea、select、button 等。
- iframe：用于指定 iframe 的名称，可以在脚本中引用，或作为链接的目标 (target)。
- map：用于 img 元素的 usemap 属性引用。
- meta：用于定义文档级别的元数据，如 name="description" 或 name="keywords"。
语法：
<element name="名称" >说明：
对于 name 属性来说，小伙伴们要清楚以下几点：
- 对于表单元素来说，name 是必须的：如果你不给一个表单控件设置 name，当用户提交表单时，它的值就不会被发送到服务器。也就是说，服务器根本不知道用户填写了什么。
- 单选按钮的互斥效果依赖 name：在同一个表单中，如果你想让一组单选按钮互相排斥（用户只能选一个），它们必须拥有相同的 name 值。
- 在 JavaScript 中获取元素：你可以用 document.getElementsByName("名称") 来获取所有拥有这个 name 的元素。这个方法返回的是一个 “集合”（NodeList），可以像数组那样访问。
id 和 name 的区别
id 和 name 这两个都是表单元素中常用的属性，它们之间的区别如下：
id：是元素的唯一身份证。主要用于 CSS 样式钩子（#id）、JavaScript 获取元素（getElementById）以及 label 标签的绑定。它主要在客户端（浏览器）发挥作用。name：是元素的数据名称。主要用于在表单提交时，告诉服务器这个数据是什么，以及单选按钮或复选框的分组。它主要在与服务器交互时发挥作用。
HTML name 摘要
| 适用元素 | input、textarea、select、button、iframe、map、meta |
|---|---|
| 使用频率 | 高 |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
HTML name 示例
接下来，我们将通过几个简单的例子来讲解一下 HTML name 属性是如何使用的。
示例 1：name 属性用于文本框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h3>用户登录</h3>
<form action="/login" method="post">
<p>
<label>
账号：
<input type="text" name="account" required>
</label>
</p>
<p>
<label>
密码：
<input type="password" name="password" required>
</label>
</p>
<p>
<button type="submit">登录</button>
</p>
</form>
</body>
</html>页面效果如下图所示。
分析：
当我们点击【登录】按钮后，如果 “账号” 填写的内容为 “Jack”，然后 “密码” 填写的内容为 “666”，那么服务器会收到类似于下面这样的数据。
account=Jack&password=666name 属性的值是服务器端用来识别接收到的数据的键。如果没有 name 属性，这些输入的值将不会被发送。
示例 2：name 属性用于单选按钮
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form method="post">
<fieldset>
<legend>性别:</legend>
<p>
<label>
<input type="radio" name="gender" value="男">
男
</label>
<label>
<input type="radio" name="gender" value="女">
女
</label>
</p>
</fieldset>
<fieldset>
<legend>年龄:</legend>
<p>
<label>
<input type="radio" name="age" value="80后">
80后
</label>
<label>
<input type="radio" name="age" value="90后">
90后
</label>
<label>
<input type="radio" name="age" value="00后">
00后
</label>
</p>
</fieldset>
<p>
<button type="submit">提交</button>
</p>
</form>
</body>
</html>页面效果如下图所示。
分析：
对于同一组的单选按钮，必须要设置一个相同的 name，这样才会把这些选项归为同一个组上面。上面例子定义了两组单选按钮，在每一组中，选项之间都是互斥的。也就是说，在同一组中，只能选中其中一项。
如果我们把 name 属性去掉，此时浏览器是无法判断哪些单选按钮是同一组的，从而导致所有单选按钮都可以被选中（此时不存在互斥效果）。小伙伴们可以自行试一下。
