深入解析HTML中name与id属性的核心差异与最佳实践
一、基础概念
id 属性是HTML元素的唯一标识符，在同一文档中必须唯一；name 属性最初是为表单控件设计的名称，可重复，主要用于表单提交流程。
二、核心区别对比
| 对比维度 | id | name |
|---|---|---|
| 唯一性 | 必须唯一 | 可以重复（如单选按钮组使用相同name） |
| 作用于元素 | 所有HTML元素 | 表单元素（input, select, textarea, button, form等）以及锚点（a）和map/object等 |
| CSS样式 | 可通过 #id 选择器应用样式 | 不能直接选择（通常使用 [name=xxx] 属性选择器） |
| JavaScript获取 | document.getElementById('id') 或 document.querySelector('#id') | document.getElementsByName('name') 返回类数组；或通过表单元素的name属性（如 form.elements['name']） |
| 表单提交 | 默认不发送到服务器 | 作为键值对的键提交给服务器 |
| URL锚点 | 通过 #id 跳转到元素位置 | 旧版可通过 #name 锚点（HTML5已不推荐） |
三、典型场景与注意事项
1. 表单应用
每个输入控件都需要name才能被浏览器识别并提交数据。id通常用于<label for='id'>关联文本。
<label for='username'>用户名：</label>
<input type='text' id='username' name='username'>2. 单选框/复选框分组
同一组选项使用相同的name值，但每个选项必须有唯一的id以便独立操作。
<input type='radio' name='gender' id='male' value='male'>
<label for='male'>男</label>3. JavaScript交互
优先使用id获取单个元素（速度快、语义清晰）。对于表单控件集合，使用name配合form.elements更方便。
4. 锚点功能
现代HTML推荐使用id作为锚点，name锚点已过时（仅部分浏览器支持）。
四、总结
- id：全局唯一，用于标识、选择、样式、锚点，但不参与表单提交。
- name：非唯一，主要用于表单控件的数据提交和分组，也可在旧版锚点中使用。
- 两者可共存于同一元素，分工明确：用id操作元素，用name传输数据。