表单容器

表单容器负责标签宽度、必填标记与校验提示的统一布局。水平模式下标签右对齐宽度 120px，移动端自动切换为垂直布局。

返回组件库
22 · FORM · 表单容器
水平布局（Horizontal）
用户名长度为 4-20 个字符
密码不能少于 6 位
内联布局（Inline）
<section id="form" class="section">
    <div class="section-title">22 · FORM · 表单容器</div>

    <div class="demo-sub">水平布局（Horizontal）</div>
    <div class="demo-box">
      <div style="max-width:500px">
        <div style="display:flex;align-items:flex-start;margin-bottom:20px">
          <label style="width:120px;text-align:right;padding-right:12px;padding-top:8px;font-size:14px;font-weight:500;color:#3F3F46;flex-shrink:0"><span style="color:#DC2626;margin-right:4px">*</span>用户名</label>
          <div style="flex:1">
            <input type="text" style="width:100%;padding:8px 12px;border:1px solid #E4E4E7;border-radius:6px;font-size:14px;outline:none" placeholder="请输入用户名" />
            <div style="font-size:12px;color:#71717A;margin-top:4px">用户名长度为 4-20 个字符</div>
          </div>
        </div>
        <div style="display:flex;align-items:flex-start;margin-bottom:20px">
          <label style="width:120px;text-align:right;padding-right:12px;padding-top:8px;font-size:14px;font-weight:500;color:#3F3F46;flex-shrink:0"><span style="color:#DC2626;margin-right:4px">*</span>密码</label>
          <div style="flex:1">
            <input type="password" style="width:100%;padding:8px 12px;border:1px solid #DC2626;border-radius:6px;font-size:14px;outline:none" value="123" />
            <div style="font-size:12px;color:#DC2626;margin-top:4px">密码不能少于 6 位</div>
          </div>
        </div>
        <div style="display:flex;align-items:flex-start;margin-bottom:20px">
          <label style="width:120px;text-align:right;padding-right:12px;padding-top:8px;font-size:14px;font-weight:500;color:#3F3F46;flex-shrink:0">备注</label>
          <div style="flex:1">
            <textarea style="width:100%;padding:8px 12px;border:1px solid #E4E4E7;border-radius:6px;font-size:14px;outline:none;resize:vertical;min-height:60px" placeholder="选填"></textarea>
          </div>
        </div>
      </div>
    </div>

    <div class="demo-sub">内联布局（Inline）</div>
    <div class="demo-box">
      <div style="display:flex;flex-wrap:wrap;gap:16px;align-items:center">
        <div style="display:inline-flex;align-items:center;gap:8px">
          <label style="font-size:14px;font-weight:500;color:#3F3F46">姓名</label>
          <input type="text" style="padding:7px 12px;border:1px solid #E4E4E7;border-radius:6px;font-size:13px;width:140px;outline:none" />
        </div>
        <div style="display:inline-flex;align-items:center;gap:8px">
          <label style="font-size:14px;font-weight:500;color:#3F3F46">科室</label>
          <input type="text" style="padding:7px 12px;border:1px solid #E4E4E7;border-radius:6px;font-size:13px;width:140px;outline:none" />
        </div>
        <button style="padding:8px 16px;background:#185058;color:#fff;border:none;border-radius:6px;font-size:13px;font-weight:500;cursor:pointer">查询</button>
      </div>
    </div>
  </section>

安装

在页面中引入组件样式与 Tailwind 配置即可。组件样式只包含组件本身，不包含站点外壳。

<link rel="stylesheet" href="design-system/assets/design-system.css" />
<script src="https://cdn.tailwindcss.com"></script>
<script src="design-system/tokens/tailwind.config.js"></script>

使用方式

在 Code 标签页复制完整标记，替换其中的文案与数据即可。颜色、字号、圆角与阴影一律引用 tokens/design-tokens.json 中的 token，不要写入未定义的颜色值。

组件在浅色主题下设计；若页面启用暗色模式，请先用 token 覆盖背景与文字色，再复用组件结构。

设计规范

完整的尺寸、状态与反模式说明见 DESIGN.md。开发完成后请按 §28 检查清单逐项核对。