【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下拉列表
- Pure.CSS按钮用法示例
- Pure.CSS禁用输入元素
- Pure.CSS默认表格示例
- Pure.CSS默认表单示例
- xp系统下如何运用金山重装高手|金山重装高手的运用办法
- 萝卜家园XP系统怎样更改应用图标|XP系统下自定义应用图标的办法