Foundation 表单

Foundation 提供了丰富的表单样式和组件。本章将介绍 Foundation 表单的各种用法。

基本表单

<form>
    <label>
        用户名
        <input type="text" placeholder="请输入用户名">
    </label>

    <label>
        密码
        <input type="password" placeholder="请输入密码">
    </label>

    <label>
        邮箱
        <input type="email" placeholder="请输入邮箱">
    </label>

    <label>
        <input type="checkbox"> 记住我
    </label>

    <button class="button" type="submit">登录</button>
</form>

表单布局

堆叠表单（默认）

<form>
    <label>姓名</label>
    <input type="text">

    <label>邮箱</label>
    <input type="email">

    <button class="button" type="submit">提交</button>
</form>

水平表单

<form>
    <div class="grid-x grid-padding-x">
        <div class="cell small-3">
            <label for="name" class="text-right middle">姓名</label>
        </div>
        <div class="cell small-9">
            <input type="text" id="name" placeholder="请输入姓名">
        </div>
    </div>
    <div class="grid-x grid-padding-x">
        <div class="cell small-3">
            <label for="email" class="text-right middle">邮箱</label>
        </div>
        <div class="cell small-9">
            <input type="email" id="email" placeholder="请输入邮箱">
        </div>
    </div>
</form>

内联表单

<form class="grid-x grid-padding-x align-bottom">
    <div class="cell auto">
        <label>
            邮箱
            <input type="email" placeholder="输入邮箱">
        </label>
    </div>
    <div class="cell shrink">
        <button class="button" type="submit">订阅</button>
    </div>
</form>

输入框类型

文本输入

<input type="text" placeholder="文本输入">
<input type="email" placeholder="邮箱">
<input type="password" placeholder="密码">
<input type="number" placeholder="数字">
<input type="tel" placeholder="电话">
<input type="url" placeholder="网址">
<input type="date">
<input type="time">
<input type="datetime-local">

文本域

<textarea placeholder="请输入内容..." rows="5"></textarea>

选择框

<select>
    <option value="">请选择...</option>
    <option value="1">选项 1</option>
    <option value="2">选项 2</option>
    <option value="3">选项 3</option>
</select>

<!-- 多选 -->
<select multiple>
    <option value="1">选项 1</option>
    <option value="2">选项 2</option>
    <option value="3">选项 3</option>
</select>

复选框

<fieldset>
    <legend>选择你的兴趣</legend>
    <input type="checkbox" id="music" name="hobbies">
    <label for="music">音乐</label>

    <input type="checkbox" id="sports" name="hobbies">
    <label for="sports">运动</label>

    <input type="checkbox" id="reading" name="hobbies">
    <label for="reading">阅读</label>
</fieldset>

单选按钮

<fieldset>
    <legend>选择性别</legend>
    <input type="radio" id="male" name="gender" value="male">
    <label for="male">男</label>

    <input type="radio" id="female" name="gender" value="female">
    <label for="female">女</label>
</fieldset>

输入框组

<!-- 前置标签 -->
<div class="input-group">
    <span class="input-group-label">@</span>
    <input class="input-group-field" type="text" placeholder="用户名">
</div>

<!-- 后置按钮 -->
<div class="input-group">
    <input class="input-group-field" type="search" placeholder="搜索...">
    <div class="input-group-button">
        <button class="button" type="button">搜索</button>
    </div>
</div>

<!-- 前后都有 -->
<div class="input-group">
    <span class="input-group-label">$</span>
    <input class="input-group-field" type="number" placeholder="金额">
    <span class="input-group-label">.00</span>
</div>

表单验证样式

<!-- 错误状态 -->
<label class="is-invalid-label">
    邮箱
    <input type="email" class="is-invalid-input" value="invalid-email">
    <span class="form-error is-visible">请输入有效的邮箱地址</span>
</label>

<!-- 正确状态（需自定义） -->
<style>
    .is-valid-input {
        border-color: #3adb76;
    }
    .is-valid-label {
        color: #3adb76;
    }
</style>

Abide 表单验证

Foundation 的 Abide 插件提供表单验证功能：

<form data-abide novalidate>
    <div data-abide-error class="alert callout" style="display: none;">
        <p>表单中有错误，请检查后重新提交。</p>
    </div>

    <label>
        用户名 <small>必填</small>
        <input type="text" required placeholder="用户名">
        <span class="form-error">请输入用户名</span>
    </label>

    <label>
        邮箱 <small>必填</small>
        <input type="email" required placeholder="邮箱">
        <span class="form-error">请输入有效的邮箱地址</span>
    </label>

    <label>
        密码 <small>必填</small>
        <input type="password" id="password" required pattern="[a-zA-Z0-9]{8,}" placeholder="密码">
        <span class="form-error">密码至少8位，包含字母和数字</span>
    </label>

    <label>
        确认密码 <small>必填</small>
        <input type="password" required data-equalto="password" placeholder="确认密码">
        <span class="form-error">两次密码不一致</span>
    </label>

    <button class="button" type="submit">注册</button>
</form>

验证模式

<!-- 自定义正则 -->
<input type="text" pattern="[0-9]{11}" placeholder="手机号码">

<!-- 使用内置模式 -->
<input type="text" pattern="url" placeholder="网址">
<input type="text" pattern="email" placeholder="邮箱">
<input type="text" pattern="integer" placeholder="整数">
<input type="text" pattern="number" placeholder="数字">
<input type="text" pattern="alpha" placeholder="字母">
<input type="text" pattern="alpha_numeric" placeholder="字母数字">

禁用和只读

<!-- 禁用 -->
<input type="text" disabled placeholder="禁用的输入框">

<!-- 只读 -->
<input type="text" readonly value="只读内容">

帮助文本

<label>
    密码
    <input type="password" placeholder="密码">
</label>
<p class="help-text">密码至少8位，包含字母和数字</p>

完整示例

<!DOCTYPE html>
<html class="no-js" lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Foundation 表单示例</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/css/foundation.min.css">
    <style>
        .demo-section {
            margin-bottom: 40px;
            padding: 20px;
            background: #f8f8f8;
            border-radius: 4px;
        }
        .demo-section h3 {
            margin-bottom: 20px;
            border-bottom: 1px solid #ddd;
            padding-bottom: 10px;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <h1>Foundation 表单展示</h1>

        <div class="demo-section">
            <h3>登录表单</h3>
            <div class="grid-x grid-margin-x">
                <div class="cell medium-6">
                    <form data-abide novalidate>
                        <label>
                            用户名
                            <input type="text" required placeholder="请输入用户名">
                            <span class="form-error">用户名不能为空</span>
                        </label>
                        <label>
                            密码
                            <input type="password" required placeholder="请输入密码">
                            <span class="form-error">密码不能为空</span>
                        </label>
                        <div class="grid-x">
                            <div class="cell auto">
                                <input type="checkbox" id="remember">
                                <label for="remember">记住我</label>
                            </div>
                            <div class="cell shrink">
                                <a href="#">忘记密码？</a>
                            </div>
                        </div>
                        <button class="button expanded" type="submit">登录</button>
                    </form>
                </div>
            </div>
        </div>

        <div class="demo-section">
            <h3>注册表单</h3>
            <form data-abide novalidate>
                <div class="grid-x grid-margin-x">
                    <div class="cell medium-6">
                        <label>
                            姓名 <small>必填</small>
                            <input type="text" required placeholder="请输入姓名">
                            <span class="form-error">姓名不能为空</span>
                        </label>
                    </div>
                    <div class="cell medium-6">
                        <label>
                            邮箱 <small>必填</small>
                            <input type="email" required placeholder="请输入邮箱">
                            <span class="form-error">请输入有效的邮箱</span>
                        </label>
                    </div>
                    <div class="cell medium-6">
                        <label>
                            密码 <small>必填</small>
                            <input type="password" id="reg-password" required pattern=".{8,}" placeholder="至少8位">
                            <span class="form-error">密码至少8位</span>
                        </label>
                    </div>
                    <div class="cell medium-6">
                        <label>
                            确认密码 <small>必填</small>
                            <input type="password" required data-equalto="reg-password" placeholder="确认密码">
                            <span class="form-error">两次密码不一致</span>
                        </label>
                    </div>
                    <div class="cell">
                        <fieldset>
                            <legend>性别</legend>
                            <input type="radio" id="reg-male" name="gender" value="male" required>
                            <label for="reg-male">男</label>
                            <input type="radio" id="reg-female" name="gender" value="female">
                            <label for="reg-female">女</label>
                        </fieldset>
                    </div>
                    <div class="cell">
                        <input type="checkbox" id="agree" required>
                        <label for="agree">我已阅读并同意 <a href="#">服务条款</a></label>
                    </div>
                    <div class="cell">
                        <button class="button" type="submit">注册</button>
                        <button class="button secondary" type="reset">重置</button>
                    </div>
                </div>
            </form>
        </div>

        <div class="demo-section">
            <h3>输入框组</h3>
            <div class="grid-x grid-margin-x">
                <div class="cell medium-6">
                    <label>带前置标签</label>
                    <div class="input-group">
                        <span class="input-group-label">@</span>
                        <input class="input-group-field" type="text" placeholder="用户名">
                    </div>
                </div>
                <div class="cell medium-6">
                    <label>带后置按钮</label>
                    <div class="input-group">
                        <input class="input-group-field" type="search" placeholder="搜索...">
                        <div class="input-group-button">
                            <button class="button" type="button">搜索</button>
                        </div>
                    </div>
                </div>
                <div class="cell medium-6">
                    <label>金额输入</label>
                    <div class="input-group">
                        <span class="input-group-label">¥</span>
                        <input class="input-group-field" type="number" placeholder="0">
                        <span class="input-group-label">.00</span>
                    </div>
                </div>
                <div class="cell medium-6">
                    <label>网址输入</label>
                    <div class="input-group">
                        <span class="input-group-label">https://</span>
                        <input class="input-group-field" type="text" placeholder="example.com">
                    </div>
                </div>
            </div>
        </div>

        <div class="demo-section">
            <h3>选择框</h3>
            <div class="grid-x grid-margin-x">
                <div class="cell medium-4">
                    <label>
                        单选下拉
                        <select>
                            <option value="">请选择...</option>
                            <option value="1">选项 1</option>
                            <option value="2">选项 2</option>
                            <option value="3">选项 3</option>
                        </select>
                    </label>
                </div>
                <div class="cell medium-4">
                    <label>
                        多选下拉
                        <select multiple style="height: 100px;">
                            <option value="1">选项 1</option>
                            <option value="2">选项 2</option>
                            <option value="3">选项 3</option>
                            <option value="4">选项 4</option>
                        </select>
                    </label>
                </div>
                <div class="cell medium-4">
                    <label>
                        分组下拉
                        <select>
                            <optgroup label="水果">
                                <option>苹果</option>
                                <option>香蕉</option>
                            </optgroup>
                            <optgroup label="蔬菜">
                                <option>胡萝卜</option>
                                <option>西红柿</option>
                            </optgroup>
                        </select>
                    </label>
                </div>
            </div>
        </div>

        <div class="demo-section">
            <h3>联系表单</h3>
            <form>
                <div class="grid-x grid-margin-x">
                    <div class="cell medium-6">
                        <label>
                            姓名
                            <input type="text" placeholder="您的姓名">
                        </label>
                    </div>
                    <div class="cell medium-6">
                        <label>
                            邮箱
                            <input type="email" placeholder="您的邮箱">
                        </label>
                    </div>
                    <div class="cell">
                        <label>
                            主题
                            <select>
                                <option>一般咨询</option>
                                <option>技术支持</option>
                                <option>商务合作</option>
                                <option>其他</option>
                            </select>
                        </label>
                    </div>
                    <div class="cell">
                        <label>
                            消息
                            <textarea rows="5" placeholder="请输入您的消息..."></textarea>
                        </label>
                    </div>
                    <div class="cell">
                        <button class="button" type="submit">发送消息</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/js/foundation.min.js"></script>
    <script>$(document).foundation();</script>
</body>
</html>

表单最佳实践

1. 使用 label：始终为输入框关联 label
2. 清晰的提示：提供占位符和帮助文本
3. 验证反馈：实时显示验证状态
4. 可访问性：确保表单可以通过键盘操作
5. 响应式布局：使用网格系统适应不同屏幕

总结

本章我们学习了：

• 基本表单元素
• 表单布局（堆叠、水平、内联）
• 输入框组
• Abide 表单验证
• 各种输入类型和状态

下一章，我们将学习 Foundation 输入框尺寸。