锐客网

  1. 首页 > 生活百科 > it技术 > >

Pure.CSS分组输入表单示例

Pure.CSSIT知识

【Pure.CSS分组输入表单示例】如果要对基于文本的输入元素集进行分组, 则必须将它们包装在具有纯组类名的< fieldset> 元素中。分组输入表单最适合注册表单, 并且在移动设备上看起来很棒。
例子
让我们以一个示例来演示分组的输入形式：

< !DOCTYPE html> < html> < link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" 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>

立即测试
输出
Pure.CSS分组输入表单示例

文章图片

    推荐阅读


    上一篇：Pure.CSS表单实现示例

    下一篇：Pure.CSS图标用法