在HTML表单开发中，value和name是两个核心属性，它们的功能定位不同，在文本框和下拉菜单中的表现也存在明显差异，理解两者的作用能帮助开发者更高效地完成表单开发工作。
name属性的核心作用
name属性用于为表单元素定义一个唯一的标识名称，当表单提交时，浏览器会将每个表单元素的name和对应的value组合成键值对，发送给后端服务器。如果表单元素没有设置name属性，那么该元素的值不会被提交。
对于文本框和下拉菜单来说，name属性的设置规则是一致的，都是用来标识当前字段的含义，比如用户名的文本框可以设置name为username，下拉菜单选择城市可以设置name为city。
文本框的name属性示例
<form action="/submit" method="post"> <!-- 文本框设置name为username，提交时键为username --> <label>用户名：</label> <input type="text" name="username"> <button type="submit">提交</button> </form>
下拉菜单的name属性示例
<form action="/submit" method="post">
<!-- 下拉菜单设置name为city，提交时键为city -->
<label>所在城市：</label>
<select name="city">
<option value="bj">北京</option>
<option value="sh">上海</option>
</select>
<button type="submit">提交</button>
</form>
value属性的不同表现
value属性用来设置或获取表单元素的当前值，但是在不同类型的表单元素中，value的作用和表现有明显区别。
文本框中的value属性
对于文本框类型的<input>元素，value属性表示当前输入框中的内容。开发者可以通过设置value属性来给文本框设置默认值，当用户修改输入框内容时，value的值会同步更新，提交表单时，value的当前值就是该字段提交的值。
<form action="/submit" method="post"> <label>用户名：</label> <!-- 设置默认值admin --> <input type="text" name="username" value="admin"> <button type="submit">提交</button> </form>
上述代码中，文本框默认显示admin，用户修改后提交的内容就是修改后的文本，对应的键值对是username: 用户输入的内容。
下拉菜单中的value属性
下拉菜单由<select>和<option>组成，value属性的设置位置在<option>元素上，而不是<select>元素上。<select>元素的value值由当前被选中的<option>的value决定，如果没有设置value，那么<option>的文本内容会作为value提交。
<form action="/submit" method="post">
<label>所在城市：</label>
<select name="city">
<!-- 设置value为bj，提交时如果选中该项，值为bj -->
<option value="bj">北京</option>
<!-- 未设置value，选中时提交的值为上海 -->
<option>上海</option>
</select>
<button type="submit">提交</button>
</form>
如果用户选择第一个选项，提交的键值对是city: bj；如果选择第二个选项，提交的键值对是city: 上海。
两者的配合使用
在实际开发中，name和value需要配合使用才能完成表单数据的正确提交。name负责标识字段，value负责提供字段的值，缺少任何一个都无法完成正常的数据提交。
| 元素类型 | name属性作用 | value属性作用 |
|---|---|---|
| 文本框 | 标识输入字段，作为提交键 | 设置默认值，存储当前输入内容 |
| 下拉菜单 | 标识选择字段，作为提交键 | 定义每个选项的提交值，选中项的值作为字段值 |
需要注意的是，如果多个表单元素设置了相同的name属性，提交时这些元素的值会以数组的形式发送给后端，这种场景常见于多选框或者单选框的组中，文本框和下拉菜单一般不建议设置重复的name属性。