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 | 它用于美化收音机。 |
例子
让我们举一个使用上述所有类创建表单的示例。
<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">
<label for = "married" class = "pure-checkbox">
<input id = "married" type = "checkbox" checked = "checked">
Married
</label>
<br>
<label for = "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 = "male" checked>
Male
</label>
<br>
<label for = "female" class= "pure-radio">
<input id = "female" type = "radio" name = "gender" value = "female">
Female
</label>
<br>
<label for = "dontknow1" class = "pure-radio">
<input id = "dontknow1" type = "radio" name = "gender" value = "female" disabled>
Don't know (Disabled)
</label>
<button type = "submit" class = "pure-button pure-button-primary">Submit</button>
</div>
</fieldset>
</form>
</body>
</html>立即测试
输出
Pure.CSS表单的类型
以下是不同类型的Pure.CSS形式：
- 预设表格
- 堆叠形式
- 对齐形式
- 多栏式
- 分组输入
- 输入尺寸表
