Foundation 表单
Foundation 表单（Forms）详解（超级完整版，一次讲透）
我们继续你的 Foundation 系列，今天把表单（Forms）讲得清清楚楚！Foundation 6+ 的表单组件超级强大、响应式，支持网格布局对齐、输入组、前缀/后缀、错误状态、Abide 验证等，常用于登录、注册、搜索、联系表单等场景。
1. 基本结构（推荐用 XY Grid 布局）
<form><divclass="grid-x grid-padding-x"><divclass="cell small-12 medium-6"><label>用户名<inputtype="text"placeholder="请输入用户名"aria-describedby="exampleHelpText"></label><pclass="help-text"id="exampleHelpText">至少6个字符</p></div><divclass="cell small-12 medium-6"><label>密码<inputtype="password"placeholder="请输入密码"></label></div><divclass="cell"><buttontype="submit"class="button success">提交</button></div></div></form>2. 输入组 + 前缀/后缀（超级实用）
<divclass="input-group"><spanclass="input-group-label">@</span><inputclass="input-group-field"type="text"placeholder="邮箱"><divclass="input-group-button"><buttontype="submit"class="button">搜索</button></div></div>3. 常见表单元素
- 复选框 & 单选按钮：
<fieldset><legend>选择你的兴趣</legend><inputid="checkbox1"type="checkbox"><labelfor="checkbox1">阅读</label><inputid="radio1"type="radio"name="group"><labelfor="radio1">选项A</label></fieldset> - 开关（Switch）：
<divclass="switch"><inputclass="switch-input"id="exampleSwitch"type="checkbox"><labelclass="switch-paddle"for="exampleSwitch"><spanclass="show-for-sr">开启通知</span></label></div> - 文件上传：直接用
<input type="file">，自动美化。
4. 错误状态 + Abide 验证（推荐开启）
加data-abide和required/pattern：
<formdata-abidenovalidate><divclass="cell"><label>邮箱<small>必填</small><inputtype="email"requiredpattern="email"><spanclass="form-error">请输入有效邮箱！</span></label></div><buttontype="submit"class="button">提交</button></form>5. 今天直接给你抄的完整代码（复制就能跑）
<!DOCTYPEhtml><html><head><linkrel="stylesheet"href="https://cdn.jsdelivr.net/npm/foundation-sites@6.8.1/dist/css/foundation.min.css"></head><body><h3>Foundation Forms 表单全家福</h3><formdata-abidenovalidate><divclass="grid-x grid-padding-x"><divclass="cell medium-6"><label>用户名<inputtype="text"placeholder="用户名"required><spanclass="form-error">必填哦！</span></label></div><divclass="cell medium-6"><label>邮箱<inputtype="email"placeholder="example@domain.com"requiredpattern="email"><spanclass="form-error">邮箱格式不对！</span></label></div><divclass="cell medium-6"><divclass="input-group"><spanclass="input-group-label">$</span><inputclass="input-group-field"type="number"placeholder="金额"><divclass="input-group-button"><buttonclass="button">确认</button></div></div></div><divclass="cell medium-6"><divclass="switch large"><inputclass="switch-input"id="switch1"type="checkbox"><labelclass="switch-paddle"for="switch1"><spanclass="show-for-sr">订阅</span></label></div></div><divclass="cell"><buttontype="submit"class="button expanded success">提交表单</button></div></div></form><scriptsrc="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script><scriptsrc="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”
“帮我做登录表单”
“给我上传表单”
我立刻给你写好！