文章: 阅读:

Foundation 表单

CSSFoundation

前言

  • Foundation 表单。

1、表单

  • Foundation 会自动渲染表单为全局样式。

  • 所有 <textarea>, <select> 及 <input> 元素宽度都为 100%，且带有外边距、内边距、阴影和鼠标移动效果。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <form>
        Input:
        <input type="text" placeholder="Name" />

        Textarea:
        <textarea rows="4" placeholder="Address"></textarea>

        Select:
        <select>
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
        </select>
    </form>

  • 效果 🔗

2、标签

  • 在表单中使用 <label> 元素来设置标签，标签可以添加 for 属性和 id 属性。用户在点击标签或输入域时获取输入框焦点。

  • 如果需要设置标签右对齐，可以使用 .right 类:

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <form>
        <label for="name">Input
            <input type="text" placeholder="Name" id="name" />
        </label>

        <label for="address">Textarea
            <textarea rows="4" placeholder="Address" id="address"></textarea>
        </label>

        <label for="num" class="right">Select
            <select id="num">
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
            </select>
        </label>
    </form>

  • 效果 🔗

3、Fieldset

  • Foundation 渲染 <fieldset> 元素的样式如下：

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <form>
        <fieldset>
            <legend>fieldset Legend</legend>
            <label>Name
                <input type="text" placeholder="First Name.." />
            </label>
            <label>Email
                <input type="text" placeholder="Enter email.." />
            </label>
        </fieldset>
    </form>

  • 效果 🔗

4、错误状态

  • 使用 .error 类来设置错误的标签、输入框、文本框样式，需要使用 JavaScript 来更新用户输入的错误状态:

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <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>

  • 效果 🔗

5、输入框

  • 使用网格的列来设置输入框的大小，如 .large-6, .medium-6 等。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    <form>
        <div class="row">
            <h2>使用网格设置输入框大小</h2>
            <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>

        <div class="row">
            <div class="medium-4 columns">
                <label>medium-4 (100% on small, stacked)
                    <input type="text" placeholder="Name" />
                </label>
            </div>

            <div class="medium-4 columns">
                <label>medium-4 (100% on small, stacked)
                    <input type="text" placeholder="Name" />
                </label>
            </div>

            <div class="medium-4 columns">
                <label>medium-4 (100% on small, stacked)
                    <input type="text" placeholder="Name" />
                </label>
            </div>
        </div>
    </form>

  • 效果 🔗

5.1 相等大小列

  • 以下演示了相等大小列的实例:

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    <form>
        <div class="row">
            <div class="medium-4 columns">
                <label>medium-4 (100% on small, stacked)
                    <input type="text" placeholder="Name" />
                </label>
            </div>

            <div class="medium-4 columns">
                <label>medium-4 (100% on small, stacked)
                    <input type="text" placeholder="Name" />
                </label>
            </div>

            <div class="medium-4 columns">
                <label>medium-4 (100% on small, stacked)
                    <input type="text" placeholder="Name" />
                </label>
            </div>
        </div>
    </form>

  • 效果 🔗

5.2 内联标签

  • 如果希望标签内容显示在左边（不是上边），可以将标签元素 label 放在输入框左边的不同的列上，并使用 .inline 类来设置垂直居中:

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <form>
        <div class="row">
            <p><strong>提示:</strong> 如果你需要标签显示在左边，可以移除 .right 类。</p>
            <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>

  • 效果 🔗

5.3 前置和后置标签

  • 可以在 <div class="row collapse"> 中添加前置和后置标签，元素为：<element class="postfix"> 或 <element class="prefix">。可以使用网格系统来设置前置和后置标签的大小：

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    <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="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">后置</span>
                    </div>
                </div>
            </div>
        </div>
    </form>

  • 效果 🔗

5.4 前置和后置标签按钮

  • 可以使用 <a> 元素添加 .button 类来设置前置和后置按钮:

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <form>
        <div class="row">
            <div class="large-12 columns">
                <div class="row collapse">
                    <div class="small-10 columns">
                        <input type="text" placeholder="搜索" />
                    </div>
                    <div class="small-2 columns">
                        <a href="#" class="button postfix">提交</a>
                    </div>
                </div>
            </div>
        </div>
    </form>

  • 效果 🔗

5.5 前置和后置标签圆角按钮

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    <form>
        <div class="row">
            <p>圆角前置和后置标签:</p>
            <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>
        <div class="row">
            <p>圆形前置和后置标签按钮:</p>
            <div class="large-6 columns">
                <div class="row collapse prefix-round">
                    <div class="small-3 columns">
                        <a href="#" class="button prefix">Go</a>
                    </div>
                    <div class="small-9 columns">
                        <input type="text" placeholder="Value" />
                    </div>
                </div>
            </div>
            <div class="large-6 columns">
                <div class="row collapse postfix-round">
                    <div class="small-9 columns">
                        <input type="text" placeholder="Value" />
                    </div>
                    <div class="small-3 columns">
                        <a href="#" class="button postfix">Go</a>
                    </div>
                </div>
            </div>
        </div>
    </form>

  • 效果 🔗

如果您觉得阅读本文对您有帮助，请用微信、支付宝 or QQ 扫码赞助，您的支持是我写作最大的动力！欢迎各位转载，但是未经作者本人同意，转载文章之后必须在文章页面明显位置给出作者和原文链接，否则保留追究法律责任的权利。

Qian Chia

Posted @ 2019-11-12 20:21


评论


文章目录
  1. 1. 前言
  2. 2. 1、表单
  3. 3. 2、标签
  4. 4. 3、Fieldset
  5. 5. 4、错误状态
  6. 6. 5、输入框
    1. 6.1. 5.1 相等大小列
    2. 6.2. 5.2 内联标签
    3. 6.3. 5.3 前置和后置标签
    4. 6.4. 5.4 前置和后置标签按钮
    5. 6.5. 5.5 前置和后置标签圆角按钮
隐藏目录