Pure.CSS多列表单示例 _表单

类名称pure-grid用于创建响应式多列表单。它要求在页面上显示纯响应网格。
【Pure.CSS多列表单示例】Pure响应网格为：

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

例子
让我们以创建响应式多列表单为例。

< !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 pure-form-stacked"> < fieldset> < legend> Legend< /legend> < div class="pure-g"> < div class="pure-u-1 pure-u-md-1-3"> < label for="first-name"> First Name< /label> < input id="first-name" class="pure-u-23-24" type="text"> < /div> < div class="pure-u-1 pure-u-md-1-3"> < label for="last-name"> Last Name< /label> < input id="last-name" class="pure-u-23-24" type="text"> < /div> < div class="pure-u-1 pure-u-md-1-3"> < label for="email"> E-Mail< /label> < input id="email" class="pure-u-23-24" type="email" required> < /div> < div class="pure-u-1 pure-u-md-1-3"> < label for="city"> City< /label> < input id="city" class="pure-u-23-24" type="text"> < /div> < div class="pure-u-1 pure-u-md-1-3"> < label for="state"> State< /label> < select id="state" class="pure-input-1-2"> < option> AL< /option> < option> CA< /option> < option> IL< /option> < /select> < /div> < /div> < label for="terms" class="pure-checkbox"> < input id="terms" type="checkbox"> I've read the terms and conditions < /label> < button type="submit" class="pure-button pure-button-primary"> Submit< /button> < /fieldset> < /form> < /html>

立即测试
输出