Foundation 表单（Forms）详解（超级完整版，一次讲透）
我们继续你的 Foundation 系列，今天把 表单（Forms）讲得清清楚楚！Foundation 6+ 的表单组件超级强大、响应式，支持网格布局对齐、输入组、前缀/后缀、错误状态、Abide 验证等，常用于登录、注册、搜索、联系表单等场景。
1. 基本结构（推荐用 XY Grid 布局）
<form>
<div class="grid-x grid-padding-x">
<div class="cell small-12 medium-6">
<label>用户名
<input type="text" placeholder="请输入用户名" aria-describedby="exampleHelpText">
</label>
<p class="help-text" id="exampleHelpText">至少6个字符</p>
</div>
<div class="cell small-12 medium-6">
<label>密码
<input type="password" placeholder="请输入密码">
</label>
</div>
<div class="cell">
<button type="submit" class="button success">提交</button>
</div>
</div>
</form>2. 输入组 + 前缀/后缀（超级实用）
<div class="input-group">
<span class="input-group-label">@</span>
<input class="input-group-field" type="text" placeholder="邮箱">
<div class="input-group-button">
<button type="submit" class="button">搜索</button>
</div>
</div>3. 常见表单元素
- 复选框 & 单选按钮：
<fieldset>
<legend>选择你的兴趣</legend>
<input id="checkbox1" type="checkbox"><label for="checkbox1">阅读</label>
<input id="radio1" type="radio" name="group"><label for="radio1">选项A</label>
</fieldset>- 开关（Switch）：
<div class="switch">
<input class="switch-input" id="exampleSwitch" type="checkbox">
<label class="switch-paddle" for="exampleSwitch">
<span class="show-for-sr">开启通知</span>
</label>
</div>- 文件上传：直接用
<input type="file">，自动美化。
4. 错误状态 + Abide 验证（推荐开启）
加 data-abide 和 required/pattern：
<form data-abide novalidate>
<div class="cell">
<label>邮箱 <small>必填</small>
<input type="email" required pattern="email">
<span class="form-error">请输入有效邮箱！</span>
</label>
</div>
<button type="submit" class="button">提交</button>
</form>5. 今天直接给你抄的完整代码（复制就能跑）
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.8.1/dist/css/foundation.min.css">
</head>
<body>
<h3>Foundation Forms 表单全家福</h3>
<form data-abide novalidate>
<div class="grid-x grid-padding-x">
<div class="cell medium-6">
<label>用户名
<input type="text" placeholder="用户名" required>
<span class="form-error">必填哦！</span>
</label>
</div>
<div class="cell medium-6">
<label>邮箱
<input type="email" placeholder="example@domain.com" required pattern="email">
<span class="form-error">邮箱格式不对！</span>
</label>
</div>
<div class="cell medium-6">
<div class="input-group">
<span class="input-group-label">$</span>
<input class="input-group-field" type="number" placeholder="金额">
<div class="input-group-button"><button class="button">确认</button></div>
</div>
</div>
<div class="cell medium-6">
<div class="switch large">
<input class="switch-input" id="switch1" type="checkbox">
<label class="switch-paddle" for="switch1"><span class="show-for-sr">订阅</span></label>
</div>
</div>
<div class="cell">
<button type="submit" class="button expanded success">提交表单</button>
</div>
</div>
</form>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.8.1/dist/js/foundation.min.js"></script>
<script>$(document).foundation();</script>
</body>
</html>下面给你看真实效果（官方和项目中最标准的 Foundation Forms 示例）：
官方文档（最新版）：https://get.foundation/sites/docs/forms.html
你现在想干嘛？
→ 明天继续讲 Foundation 表格（Table）还是按钮（Button）？
→ 帮我做一个登录表单（用户名、密码、记住我、忘记密码）？
→ 给我一个带文件上传 + 进度条的完整表单？
直接回复下一句：
“明天讲 table”
“帮我做登录表单”
“给我上传表单”
我立刻给你写好！
