表单

Posted on 9 月 21, 2026 by

Foundation 表单样式与开关组件

一、Fieldset 字段集

<fieldset> 用于对表单中的相关控件进行分组，<legend> 提供分组标题：

<fieldset>
    <legend>Fieldset Legend</legend>
    <label>Name
        <input type="text" placeholder="First Name..">
    </label>
    <label>Email
        <input type="text" placeholder="Enter email..">
    </label>
</fieldset>Code language: HTML, XML (xml)

二、错误样式

为 <label> 添加 .error 类，配合 <small class="error"> 提示信息，实现表单校验错误反馈：

<form>
    <label class="error">错误
        <input type="text" placeholder="Name..">
    </label>
    <small class="error">输入错误</small>

    <textarea rows="4" placeholder="Address"></textarea>
    <small class="error">输入错误</small>
</form>Code language: HTML, XML (xml)

三、输入框尺寸

结合 Foundation 栅格系统控制输入框宽度，不同断点下可设置不同列数：

<form>
    <div class="row">
        <div class="large-10 medium-7 columns">
            <label>large-10 medium-7 (100% on small)
                <input type="text" placeholder="Name">
            </label>
        </div>
    </div>

    <div class="row">
        <div class="small-5 columns">
            <label>small-5
                <input type="text" placeholder="Name">
            </label>
        </div>
    </div>

    <div class="row">
        <div class="medium-3 columns">
            <label>medium-3 (100% on small)
                <input type="text" placeholder="Name">
            </label>
        </div>
    </div>
</form>Code language: HTML, XML (xml)

四、内联标签

使用栅格将标签放在输入框左侧，并为 <label> 添加 .inline 和 .right 类实现垂直居中对齐：

<form>
    <div class="row">
        <div class="small-8">
            <div class="row">
                <div class="small-3 columns">
                    <label for="name" class="inline right">Name</label>
                </div>
                <div class="small-9 columns">
                    <input type="text" id="name" placeholder="First Name..">
                </div>
            </div>
        </div>
    </div>
</form>Code language: HTML, XML (xml)

五、前置和后置标签

在 <div class="row collapse"> 中使用 .prefix（前置）或 .postfix（后置）类，配合栅格控制尺寸。可添加 .prefix-radius / .postfix-radius 实现圆角：

<form>
    <div class="row">
        <div class="large-6 columns">
            <div class="row collapse prefix-radius">
                <div class="small-3 columns">
                    <span class="prefix">Prefix</span>
                </div>
                <div class="small-9 columns">
                    <input type="text" placeholder="Value">
                </div>
            </div>
        </div>
        <div class="large-6 columns">
            <div class="row collapse postfix-radius">
                <div class="small-9 columns">
                    <input type="text" placeholder="Value">
                </div>
                <div class="small-3 columns">
                    <span class="postfix">Postfix</span>
                </div>
            </div>
        </div>
    </div>
</form>Code language: HTML, XML (xml)

前置/后置按钮

将 <span> 替换为 <a class="button"> 即可实现按钮形式的前置/后置元素：

<form>
    <div class="row">
        <div class="large-6 columns">
            <div class="row collapse">
                <div class="small-3 columns">
                    <a class="button prefix">Go</a>
                </div>
                <div class="small-9 columns">
                    <input type="text" placeholder="Search...">
                </div>
            </div>
        </div>
        <div class="large-6 columns">
            <div class="row collapse">
                <div class="small-9 columns">
                    <input type="text" placeholder="Email address">
                </div>
                <div class="small-3 columns">
                    <a class="button postfix">Submit</a>
                </div>
            </div>
        </div>
    </div>
</form>Code language: HTML, XML (xml)

六、开关（Switch）组件

6.1 概述

开关组件用于在”开”和”关”两种状态之间切换，底层使用 <input type="checkbox"> 或 <input type="radio"> 实现。

元素类 / 属性作用
<div>.switch开关容器
<input>type="checkbox" 或 type="radio"状态控制（需设置唯一 id）
<label>for="对应id"视觉开关滑块

6.2 基础开关

<div class="switch">
    <input id="mySwitch" type="checkbox">
    <label for="mySwitch"></label>
</div>Code language: JavaScript (javascript)

6.3 开关尺寸

使用 .large、.small、.tiny 类控制开关大小：

<div class="switch large">
    <input id="mySwitchLarge" type="checkbox">
    <label for="mySwitchLarge"></label>
</div>

<div class="switch">
    <input id="mySwitchDefault" type="checkbox">
    <label for="mySwitchDefault"></label>
</div>

<div class="switch small">
    <input id="mySwitchSmall" type="checkbox">
    <label for="mySwitchSmall"></label>
</div>

<div class="switch tiny">
    <input id="mySwitchTiny" type="checkbox">
    <label for="mySwitchTiny"></label>
</div>Code language: HTML, XML (xml)

6.4 圆角开关

使用 .radius（圆角）或 .round（圆形）类：

<div class="switch">
    <input id="switchRadius" type="checkbox">
    <label for="switchRadius"></label>
</div>

<div class="switch radius">
    <input id="switchRadius2" type="checkbox">
    <label for="switchRadius2"></label>
</div>

<div class="switch round">
    <input id="switchRound" type="checkbox">
    <label for="switchRound"></label>
</div>Code language: HTML, XML (xml)

6.5 开关组（单选模式）

使用 type="radio" 并设置相同的 name 属性，实现互斥单选开关：

<div class="switch">
    <input id="mySwitch1" type="radio" name="myGroup">
    <label for="mySwitch1"></label>
</div>

<div class="switch">
    <input id="mySwitch2" type="radio" name="myGroup" checked>
    <label for="mySwitch2"></label>
</div>Code language: JavaScript (javascript)

七、完整可运行示例

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Foundation 表单样式与开关组件示例</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="foundation-5.5.3/css/foundation.css" rel="stylesheet" />
    <script src="foundation-5.5.3/js/vendor/jquery.js"></script>
    <script src="foundation-5.5.3/js/foundation.min.js"></script>
    <script src="foundation-5.5.3/js/vendor/modernizr.js"></script>
    <script>
        $(document).ready(function () {
            $(document).foundation();
        })
    </script>
    <style>
        body {
            padding: 20px 0;
        }
        form {
            margin-bottom: 30px;
        }
        .switch {
            margin-bottom: 10px;
        }
    </style>
</head>
<body>

<div class="row">
    <div class="medium-12 columns">

        <h3>Fieldset 字段集</h3>
        <fieldset>
            <legend>用户信息</legend>
            <label>姓名
                <input type="text" placeholder="请输入姓名">
            </label>
            <label>邮箱
                <input type="text" placeholder="请输入邮箱">
            </label>
        </fieldset>

        <hr />

        <h3>错误样式</h3>
        <form>
            <label class="error">用户名
                <input type="text" placeholder="请输入用户名">
            </label>
            <small class="error">用户名不能为空</small>

            <label class="error">地址
                <textarea rows="3" placeholder="请输入地址"></textarea>
            </label>
            <small class="error">地址格式不正确</small>
        </form>

        <hr />

        <h3>输入框尺寸</h3>
        <form>
            <div class="row">
                <div class="large-10 medium-7 columns">
                    <label>large-10 medium-7
                        <input type="text" placeholder="Name">
                    </label>
                </div>
            </div>
            <div class="row">
                <div class="small-5 columns">
                    <label>small-5
                        <input type="text" placeholder="Name">
                    </label>
                </div>
            </div>
            <div class="row">
                <div class="medium-3 columns">
                    <label>medium-3
                        <input type="text" placeholder="Name">
                    </label>
                </div>
            </div>
        </form>

        <hr />

        <h3>内联标签</h3>
        <form>
            <div class="row">
                <div class="small-8">
                    <div class="row">
                        <div class="small-3 columns">
                            <label for="inlineName" class="inline right">姓名</label>
                        </div>
                        <div class="small-9 columns">
                            <input type="text" id="inlineName" placeholder="请输入姓名">
                        </div>
                    </div>
                </div>
            </div>
        </form>

        <hr />

        <h3>前置和后置标签</h3>
        <form>
            <div class="row">
                <div class="large-6 columns">
                    <div class="row collapse prefix-radius">
                        <div class="small-3 columns">
                            <span class="prefix">搜索</span>
                        </div>
                        <div class="small-9 columns">
                            <input type="text" placeholder="输入关键词...">
                        </div>
                    </div>
                </div>
                <div class="large-6 columns">
                    <div class="row collapse postfix-radius">
                        <div class="small-9 columns">
                            <input type="text" placeholder="输入金额...">
                        </div>
                        <div class="small-3 columns">
                            <span class="postfix">元</span>
                        </div>
                    </div>
                </div>
            </div>
        </form>

        <hr />

        <h3>前置和后置按钮</h3>
        <form>
            <div class="row">
                <div class="large-6 columns">
                    <div class="row collapse">
                        <div class="small-3 columns">
                            <a class="button prefix">搜索</a>
                        </div>
                        <div class="small-9 columns">
                            <input type="text" placeholder="Search...">
                        </div>
                    </div>
                </div>
                <div class="large-6 columns">
                    <div class="row collapse">
                        <div class="small-8 columns">
                            <input type="email" placeholder="Email address">
                        </div>
                        <div class="small-4 columns">
                            <a class="button postfix">Subscribe</a>
                        </div>
                    </div>
                </div>
            </div>
        </form>

        <hr />

        <h3>开关组件（Switch）</h3>
        <h5>基础开关</h5>
        <div class="switch">
            <input id="demoSwitch1" type="checkbox">
            <label for="demoSwitch1"></label>
        </div>

        <h5>不同尺寸</h5>
        <div class="switch large">
            <input id="demoSwitchLarge" type="checkbox">
            <label for="demoSwitchLarge"></label>
        </div>
        <div class="switch">
            <input id="demoSwitchDefault" type="checkbox" checked>
            <label for="demoSwitchDefault"></label>
        </div>
        <div class="switch small">
            <input id="demoSwitchSmall" type="checkbox">
            <label for="demoSwitchSmall"></label>
        </div>
        <div class="switch tiny">
            <input id="demoSwitchTiny" type="checkbox" checked>
            <label for="demoSwitchTiny"></label>
        </div>

        <h5>圆角与圆形</h5>
        <div class="switch radius">
            <input id="demoSwitchRadius" type="checkbox">
            <label for="demoSwitchRadius"></label>
        </div>
        <div class="switch round">
            <input id="demoSwitchRound" type="checkbox" checked>
            <label for="demoSwitchRound"></label>
        </div>

        <h5>开关组（单选）</h5>
        <div class="switch">
            <input id="demoRadio1" type="radio" name="demoGroup">
            <label for="demoRadio1"></label>
        </div>
        <div class="switch">
            <input id="demoRadio2" type="radio" name="demoGroup" checked>
            <label for="demoRadio2"></label>
        </div>
        <div class="switch">
            <input id="demoRadio3" type="radio" name="demoGroup">
            <label for="demoRadio3"></label>
        </div>

    </div>
</div>

</body>
</html>Code language: HTML, XML (xml)

八、使用要点小结

表单样式

功能实现方式
字段分组<fieldset> + <legend>
错误提示.error 类 + <small class="error">
输入框尺寸配合栅格 .columns 控制
内联标签.inline + .right + 栅格左右分栏
前置标签.prefix / .prefix-radius
后置标签.postfix / .postfix-radius
前置/后置按钮<a class="button prefix/postfix">
栅格折叠.row.collapse

开关组件

功能实现方式
创建开关<div class="switch"> + <input type="checkbox"> + <label>
大号.large
小号.small
迷你.tiny
圆角.radius
圆形.round
单选开关组type="radio" + 相同 name
JS 初始化$(document).foundation()
Posted in Foundation教程

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注