分组输入表单

2025 年 3 月 17 日 | 阅读 1 分钟

如果您想要对基于文本的输入元素集合进行分组，则必须将它们包装在带有 pure-group 类名的 <fieldset> 元素中。分组输入表单最适合注册表单，并且在移动设备上看起来很棒。

示例

让我们举一个例子来演示分组输入表单

<!DOCTYPE html>
<html>

<link rel="stylesheet" 
href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" 
crossorigin="anonymous">

<link rel="stylesheet" 
href="https://unpkg.com/purecss@1.0.0/build/grids-responsive-min.css">

<form class="pure-form">
    <fieldset class="pure-group">
        <input type="text" class="pure-input-1-2" placeholder="Username">
        <input type="text" class="pure-input-1-2" placeholder="Password">
        <input type="email" class="pure-input-1-2" placeholder="Email">
    </fieldset>

    <fieldset class="pure-group">
        <input type="text" class="pure-input-1-2" placeholder="A title">
        <textarea class="pure-input-1-2" placeholder="Textareas work too"></textarea>
    </fieldset>

    <button type="submit" class="pure-button pure-input-1-2 pure-button-primary">Sign in</button>
</form>
</html>

立即测试

输出