HTML表单name属性怎么用_HTML表单元素name属性的作用与设置方法-html教程-PHP中文网

HTML表单name属性怎么用_HTML表单元素name属性的作用与设置方法

雪夜

发布： 2025-11-20 22:06:32

原创

928人浏览过

name属性是表单数据提交的关键标识，服务器通过其对应的值接收数据，如username=admin&password=123；它用于定义表单控件名称，支持JavaScript操作元素，并使单选按钮和复选框按组工作；每个可提交的表单元素都需设置name属性，且应语义清晰、避免特殊字符；无name属性的元素不会被提交。

html表单name属性怎么用_html表单元素name属性的作用与设置方法

HTML表单中的 name 属性 是一个非常关键的设置，它决定了表单数据在提交时如何被识别和处理。没有正确设置 name 属性，服务器端就无法获取对应的数据。

name 属性的作用

name 属性 主要用于标识表单控件，在表单提交时，浏览器会将控件的 name 和 value 组合成键值对发送给服务器。例如：username=admin&password=123 中的 "username" 和 "password" 就是 name 属性的值。

主要作用包括：

作为服务器端接收数据的字段名
在 JavaScript 中通过 name 获取或操作表单元素
为单选按钮、复选框等分组提供依据（相同 name 的单选按钮互斥）

常见表单元素的 name 设置方法

每个需要提交数据的表单控件都应设置 name 属性。以下是常见用法示例：

立即学习“前端免费学习笔记（深入）”；

幻舟AI

专为短片创作者打造的AI创作平台

279

查看详情

<form action="/submit" method="post">
<!-- 文本输入框 -->
<input type="text" name="username" placeholder="请输入用户名"></p><p><!-- 密码框 -->
<input type="password" name="password"></p><p><!-- 单选按钮：同组使用相同 name -->
<input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female"> 女</p><p><!-- 复选框 -->
<input type="checkbox" name="hobby" value="reading"> 阅读
<input type="checkbox" name="hobby" value="music"> 音乐</p><p><!-- 下拉选择框 -->
<select name="city">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
</select></p><p><!-- 提交按钮 -->
<input type="submit" value="提交">
</form></p>

登录后复制

提交后，服务器收到的数据类似：

username=Tom&password=abc123&gender=male&hobby=reading&city=beijing