HTML表单的name属性是表单元素的核心属性之一，它主要用于标识表单元素的名称，在表单提交、JavaScript操作表单等场景中发挥着关键作用。正确设置name属性是保证表单功能正常运行的基础。
HTML表单name属性的核心作用
1. 标识表单提交的数据字段
当表单触发提交行为时，浏览器会将表单内带有name属性的元素的值，按照name=value的格式组装成提交数据。如果没有设置name属性，该表单元素的值不会被提交到后端。比如输入框的name是username，用户输入了张三，提交时就会携带username=张三的参数。
2. 实现单选、复选框的分组
对于<input type="radio">单选框，只有name属性相同的元素才会被归为同一组，同一组内只能选择一个选项。对于<input type="checkbox">复选框，name相同的元素属于同一组，提交时会将选中的多个值合并为同一个字段的数组形式提交。
3. 方便JavaScript获取表单元素
可以通过document.getElementsByName()方法根据name属性值获取对应的表单元素集合，也可以通过form元素.name属性值的方式快速获取指定表单内的元素，便于后续对元素进行值修改、事件绑定等操作。
不同表单元素的name属性设置方法
输入框类元素
文本输入框、密码输入框、隐藏域等元素直接设置name属性即可，示例如下：
<form action="/submit" method="post"> <!-- 文本输入框 --> <label>用户名：<input type="text" name="username"></label> <br> <!-- 密码输入框 --> <label>密码：<input type="password" name="password"></label> <br> <!-- 隐藏域 --> <input type="hidden" name="user_id" value="1001"> </form>
单选与复选框
单选框需要保证同一组name一致，复选框同一组的name也需要一致，通常复选框的name会加[]后缀便于后端识别数组，示例如下：
<form action="/submit" method="post"> <!-- 单选框分组，name都是gender --> <p>性别：</p> <label><input type="radio" name="gender" value="male">男</label> <label><input type="radio" name="gender" value="female">女</label> <br> <!-- 复选框分组，name都是hobby[] --> <p>爱好：</p> <label><input type="checkbox" name="hobby[]" value="reading">阅读</label> <label><input type="checkbox" name="hobby[]" value="sports">运动</label> <label><input type="checkbox" name="hobby[]" value="music">音乐</label> </form>
下拉框与文本域
下拉框<select>的name属性设置在标签上，文本域<textarea>直接设置name属性，示例如下：
<form action="/submit" method="post">
<!-- 下拉框 -->
<label>城市：
<select name="city">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="guangzhou">广州</option>
</select>
</label>
<br>
<!-- 文本域 -->
<label>简介：
<textarea name="intro" rows="4" cols="20"></textarea>
</label>
</form>
name属性设置的注意事项
- 同一表单内，不同元素的name属性可以重复，但是如果是需要独立提交的不同字段，建议设置不同的name值，避免数据覆盖。
- name属性的值不要包含特殊字符，建议使用英文、数字和下划线的组合，符合后端参数命名规范。
- 如果表单不需要提交，只是用于页面展示或者纯前端交互，也可以不设置name属性，但是如果有后续操作需求，建议提前规划好name值。
JavaScript操作name属性的示例
通过name属性获取元素并修改值的示例如下：
// 获取name为username的输入框
var usernameInput = document.getElementsByName('username')[0];
// 修改输入框的值
usernameInput.value = '李四';
// 获取表单元素后通过name获取内部元素
var form = document.querySelector('form');
var passwordInput = form.password;
console.log(passwordInput.value);