Pure.CSS表单实现示例

Pure.CSS为表单设计提供了非常漂亮且响应迅速的CSS。你必须在< form> 元素中添加类名称” pure-form” 以创建表单。
以下是可用于使用Pure创建表单的CSS类列表。

Index	Class Name	Description
1)	pure-form	它用于指定紧凑的嵌入式表单。
2)	pure-form-stacked	它用于表示标签下方具有输入元素的堆叠形式。它与纯格式一起使用。
3)	pure-form-aligned	它用于表示带有对齐方式的表单, 其中输入元素位于标签下方。与纯格式一起使用。
4)	pure-input-rounded	用于显示带有圆角的表单控件
5)	pure-button	用于美化按钮。
6)	pure-checkbox	它用于美化复选框。
7)	pure-radio	它用于美化收音机。

【Pure.CSS表单实现示例】例子
让我们举一个使用上述所有类创建表单的示例。

< html> < head> < title> The PURE.CSS Forms< /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"> < /head> < body> < form class = "pure-form pure-form-aligned"> < fieldset> < div class = "pure-control-group"> < label for = "name"> Username< /label> < input id = "name" type = "text" placeholder = "Username" required> < /div> < div class = "pure-control-group"> < label for = "email"> Email< /label> < input id = "email" type = "text" placeholder = "Email Address" required> < /div> < div class = "pure-control-group"> < label for = "comments"> Comments< /label> < input id = "comments" type="text" placeholder = "Comments"> < /div> < div class = "pure-controls"> < labelfor = "married" class = "pure-checkbox"> < input id = "married" type = "checkbox" checked = "checked"> Married < /label> < br> < labelfor = "single" class = "pure-checkbox"> < input id = "single" type = "checkbox"> Single < /label> < br> < label for = "dontknow" class = "pure-checkbox"> < input id = "dontknow" type = "checkbox" disabled> Don't know (Disabled) < /label> < br> < br> < /div> < div class = "pure-controls"> < label for = "male" class = "pure-radio"> < input id = "male" type = "radio" name = "gender" value = "http://www.srcmini.com/male" checked> Male < /label> < br> < label for = "female" class= "pure-radio"> < input id = "female" type = "radio" name = "gender" value = "http://www.srcmini.com/female"> Female < /label> < br> < label for = "dontknow1" class = "pure-radio"> < input id = "dontknow1" type = "radio" name = "gender" value = "http://www.srcmini.com/female" disabled> Don't know (Disabled) < /label> < button type = "submit" class = "pure-button pure-button-primary"> Submit< /button> < /div> < /fieldset> < /form> < /body> < /html>

立即测试
输出