PHP小码农

Appearance

name 与 value ​

name 和 value 是表单控件最基础也是最重要的两个属性。name 定义了数据提交时的键名，value 定义了对应的值。理解这两个属性的工作方式是掌握表单数据提交机制的基础。

前置知识

阅读本节前，建议先了解：fieldset 与 legend

基础概念 ​

name 属性 ​

name 属性为表单控件指定一个名称，该名称用于：

  • 表单提交：作为 URL 编码或请求体中的键名
  • JavaScript 引用：通过 form.elements['name'] 或 form.name 访问
  • 单选按钮分组：同 name 的 radio 按钮形成互斥组
  • 复选框关联：同 name 的 checkbox 提交为数组

value 属性 ​

value 属性定义控件的值：

  • 提交值：表单提交时发送到服务器的值
  • 默认值：控件初始显示的值
  • 按钮文本：<input type="button/submit/reset"> 的显示文本

表单提交数据格式 ​

当用户提交表单时，数据以键值对形式发送：

username=zhangsan&password=123456&remember=on

语法 ​

基本用法 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>name 与 value 示例</title>
</head>
<body>
    <h2>登录表单</h2>
    <!-- 使用 GET 方法以便在地址栏查看提交数据 -->
    <form action="/login" method="get">
        <div>
            <label for="username">用户名：</label>
            <input type="text" id="username" name="username" value="admin">
        </div>
        <div>
            <label for="password">密码：</label>
            <input type="password" id="password" name="password" value="123456">
        </div>
        <div>
            <label>
                <input type="checkbox" name="remember" value="yes" checked>
                记住我
            </label>
        </div>
        <button type="submit">登录</button>
    </form>
    <!-- 提交后 URL：/login?username=admin&password=123456&remember=yes -->
</body>
</html>

各控件类型的 value 行为 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>各控件 value 行为</title>
</head>
<body>
    <h2>不同控件的 name/value</h2>
    <form action="/submit" method="get">
        <h3>文本输入</h3>
        <input type="text" name="nickname" value="张三">
        <!-- 提交：nickname=张三 -->

        <h3>单选按钮</h3>
        <input type="radio" name="gender" value="male" checked> 男
        <input type="radio" name="gender" value="female"> 女
        <!-- 提交：gender=male（只有选中的值） -->

        <h3>复选框</h3>
        <input type="checkbox" name="hobby" value="reading" checked> 阅读
        <input type="checkbox" name="hobby" value="music" checked> 音乐
        <input type="checkbox" name="hobby" value="sports"> 运动
        <!-- 提交：hobby=reading&hobby=music -->

        <h3>下拉框</h3>
        <select name="city">
            <option value="bj" selected>北京</option>
            <option value="sh">上海</option>
        </select>
        <!-- 提交：city=bj -->

        <h3>隐藏字段</h3>
        <input type="hidden" name="source" value="web">
        <!-- 提交：source=web -->

        <button type="submit" name="action" value="save">保存</button>
        <!-- 提交：action=save -->
    </form>
</body>
</html>

详细说明 ​

name 命名规范 ​

规范说明示例
使用小写避免大小写敏感问题user_name 而非 UserName
下划线/短横线分隔多单词使用分隔符user_name 或 user-name
避免特殊字符部分字符可能导致问题避免 user.name、user[0]
语义化命名反映数据含义email 而非 field1
数组命名多值使用方括号hobby[]（PHP 风格）

数组格式的 name ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>数组 name</title>
</head>
<body>
    <h2>数组格式的 name</h2>
    <form action="/submit" method="get">
        <!-- PHP 风格：hobby[] -->
        <input type="checkbox" name="hobby[]" value="reading" checked> 阅读
        <input type="checkbox" name="hobby[]" value="music" checked> 音乐
        <!-- 提交：hobby[]=reading&hobby[]=music -->

        <br>
        <!-- 索引风格：phone[0], phone[1] -->
        <input type="tel" name="phone[0]" value="13800001111">
        <input type="tel" name="phone[1]" value="13800002222">
        <!-- 提交：phone[0]=13800001111&phone[1]=13800002222 -->
    </form>
</body>
</html>

JavaScript 读取 name 和 value ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>JavaScript 读取 name/value</title>
</head>
<body>
    <h2>JavaScript 操作 name/value</h2>
    <form id="my-form">
        <input type="text" name="username" value="张三">
        <input type="email" name="email" value="zhangsan@example.com">
        <input type="radio" name="gender" value="male" checked> 男
        <input type="radio" name="gender" value="female"> 女
        <button type="button" id="read-btn">读取所有数据</button>
    </form>
    <div id="output" style="margin-top: 16px; white-space: pre-wrap;"></div>

    <script>
        document.getElementById('read-btn').addEventListener('click', function () {
            const form = document.getElementById('my-form');
            const data = new FormData(form);
            const output = document.getElementById('output');

            // 方式一：遍历 FormData
            let text = '=== FormData ===\n';
            for (const [key, value] of data.entries()) {
                text += `${key} = ${value}\n`;
            }

            // 方式二：通过 name 访问
            text += '\n=== 通过 name 访问 ===\n';
            text += `username: ${form.elements['username'].value}\n`;
            text += `email: ${form.elements['email'].value}\n`;
            text += `gender: ${form.elements['gender'].value}\n`;

            output.textContent = text;
        });
    </script>
</body>
</html>

没有 name 的控件不提交 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>无 name 不提交</title>
</head>
<body>
    <h2>name 的重要性</h2>
    <form action="/submit" method="get">
        <!-- 有 name，会提交 -->
        <input type="text" name="username" value="张三">

        <!-- 无 name，不会提交 -->
        <input type="text" value="搜索关键词" placeholder="搜索">

        <!-- 有 name 但 disabled，不会提交 -->
        <input type="text" name="readonly" value="只读" disabled>

        <button type="submit" name="action" value="search">搜索</button>
    </form>
    <!-- 提交后只有：?username=张三&action=search -->
</body>
</html>

实战示例 ​

动态表单数据收集 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>动态表单收集</title>
    <style>
        body { font-family: sans-serif; max-width: 600px; margin: 40px auto; }
        .preview { padding: 16px; background: #f8f9fa; border-radius: 8px; margin-top: 16px; }
        .preview code { display: block; white-space: pre-wrap; font-size: 14px; }
    </style>
</head>
<body>
    <h2>表单数据实时预览</h2>
    <form id="demo-form" oninput="previewData()">
        <div>
            <label for="name">姓名：</label>
            <input type="text" id="name" name="name" value="张三">
        </div>
        <div>
            <label for="age">年龄：</label>
            <input type="number" id="age" name="age" value="25">
        </div>
        <div>
            <label>
                <input type="checkbox" name="agree" value="1" checked onchange="previewData()">
                同意条款
            </label>
        </div>
    </form>

    <div class="preview">
        <h3>提交数据预览</h3>
        <code id="preview-text"></code>
    </div>

    <script>
        function previewData() {
            const form = document.getElementById('demo-form');
            const data = new FormData(form);
            const pairs = [];
            for (const [key, value] of data) {
                pairs.push(`${key}=${encodeURIComponent(value)}`);
            }
            document.getElementById('preview-text').textContent =
                pairs.join('&');
        }
        previewData();
    </script>
</body>
</html>

注意事项 ​

复选框未选中不提交 ​

未选中的复选框不会出现在提交数据中。服务端需要处理这种情况：

javascript
// 未选中的 checkbox 不会发送数据
// 服务端应默认处理为 false/0

单选按钮必须分组 ​

单选按钮通过相同的 name 形成互斥组。如果 name 不同，则属于不同的组，可以同时选中：

html
<!-- 正确：两个互斥 -->
<input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female"> 女

<!-- 错误：可以同时选中（非同一组） -->
<input type="radio" name="gender1" value="male"> 男
<input type="radio" name="gender2" value="female"> 女

button 的 value 与显示文本 ​

<button> 的 value 属性是提交值，标签内容是显示文本，两者独立：

html
<!-- 提交值为 "save"，显示为 "保存" -->
<button type="submit" name="action" value="save">保存</button>

最佳实践 ​

  1. 为所有需要提交的控件设置 name：没有 name 的值不会提交
  2. 使用有意义的 name：便于服务端处理和数据映射
  3. 统一命名风格：在项目中保持一致的命名规范
  4. 为 value 设置合理的默认值：减少用户输入负担
  5. 注意特殊字符：对 name 中的特殊字符进行编码处理

下一节

继续学习：placeholder 占位提示

参考链接 ​