64. fieldset legend 与 disabled/readonly

表单一长就乱。分组能让用户一项一项填，不会迷失。

fieldset：表单分组

把相关的表单控件包在一起，浏览器会给它加一个边框。

<fieldset>
  <legend>个人信息</legend>
  <label>姓名：<input type="text" name="name"></label>
  <label>年龄：<input type="number" name="age"></label>
</fieldset>

<fieldset>
  <legend>账号信息</legend>
  <label>邮箱：<input type="email" name="email"></label>
  <label>密码：<input type="password" name="pwd"></label>
</fieldset>

legend：分组标题

<legend> 是 fieldset 的标题，显示在边框的左上角。

<fieldset>
  <legend>收货地址</legend>
  <!-- 地址相关的输入框 -->
</fieldset>

disabled：禁用

禁用的控件变灰，不能点击、不能输入、不能提交。

<input type="text" name="code" value="AUTO-001" disabled>

禁用的字段：

• 用户无法交互
• 数据不会提交
• 样式变灰

禁用整个组

<fieldset disabled>
  <legend>此功能暂未开放</legend>
  <input type="text" name="field1">
  <input type="text" name="field2">
</fieldset>

在 fieldset 上加 disabled，里面所有控件一起禁用。不用一个一个加。

readonly：只读

只读字段可以聚焦、可以选中复制，但不能修改。

<input type="text" name="order_no" value="ORD-20260728" readonly>

只读字段：

• 用户可以聚焦
• 用户可以选中文本复制
• 用户不能修改
• 数据会提交

两者对比

属性	可聚焦	可编辑	数据提交	样式
disabled	否	否	否	变灰
readonly	是	否	是	正常

什么时候用哪个

• readonly：展示用户需要看到但不能改的订单号、用户ID
• disabled：暂时不可用的功能、前置条件未满足的字段

配合 JavaScript 动态切换

// 禁用按钮直到用户勾选同意
const agree = document.getElementById('agree');
const submitBtn = document.getElementById('submitBtn');

agree.addEventListener('change', () => {
  submitBtn.disabled = !agree.checked;
});

用户不勾选同意按钮，提交按钮一直灰色不可点。

完整示例

<form>
  <fieldset>
    <legend>基本信息</legend>
    <p>
      <label>用户ID：
        <input type="text" name="user_id" value="U10086" readonly>
      </label>
    </p>
    <p>
      <label>姓名：
        <input type="text" name="name" required>
      </label>
    </p>
    <p>
      <label>邮箱：
        <input type="email" name="email" required>
      </label>
    </p>
  </fieldset>

  <fieldset>
    <legend>附加选项</legend>
    <p>
      <label>
        <input type="checkbox" name="newsletter" value="yes">
        订阅邮件通知
      </label>
    </p>
    <p>
      <label>优惠码：
        <input type="text" name="coupon" placeholder="请输入优惠码">
      </label>
    </p>
  </fieldset>

  <p>
    <button type="submit" id="submitBtn">提交</button>
  </p>
</form>

用户 ID 是只读展示，其他字段正常填写。两组信息清晰分开。