类名”
pure-form-stacked”
用于创建带有标签下方输入元素的堆叠表单。 “
pure-form-stacked”
类名用于<
form>
元素和纯表单。
例子
<
html>
<
head>
<
title>
The PURE.CSS Default Form<
/title>
<
meta name = "viewport" content = "width = device-width, initial-scale = 1">
<
link rel="stylesheet"
href="https://unpkg.com/purecss@1.0.0/build/pure-min.css"
integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w"
crossorigin="anonymous">
<
form class="pure-form pure-form-stacked">
<
fieldset>
<
legend>
A Stacked Form<
/legend>
<
label for="email">
Email<
/label>
<
input id="email" type="email" placeholder="Email">
<
span class="pure-form-message">
This is a required field.<
/span>
<
label for="password">
Password<
/label>
<
input id="password" type="password" placeholder="Password">
<
label for="state">
State<
/label>
<
select id="state">
<
option>
Delhi<
/option>
<
option>
UP<
/option>
<
option>
Haryana<
/option>
<
/select>
<
label for="remember" class="pure-checkbox">
<
input id="remember" type="checkbox">
Remember me
<
/label>
<
button type="submit" class="pure-button pure-button-primary">
Sign in<
/button>
<
/fieldset>
<
/form>
<
/html>
立即测试
【Pure.CSS堆叠表单】输出
文章图片
文章图片
推荐阅读
- Pure.CSS剥离表格用例
- Pure.CSS舍入输入
- Pure.CSS响应式设计示例
- Pure.CSS必需的输入
- Pure.CSS只读输入元素
- Pure.CSS菜单组件用法
- Pure.CSS多列表单示例
- Pure.CSS输入尺寸表单
- windows8.1系统在高分屏下软件界面显示含糊怎样办