Pure.CSS 表单

17 Mar 2025 | 阅读 2 分钟

Pure.CSS 提供了非常美观且响应式的 CSS 用于表单设计。您需要将类名 "pure-form" 添加到 <form> 元素以创建表单。

以下是可用于使用 Pure 创建表单的 CSS 类列表。

索引	类名	描述
1)	pure-form	用于指定一个紧凑的内联表单。
2)	pure-form-stacked	用于表示标签下方带有输入元素的堆叠表单。它与 pure-form 一起使用。
3)	pure-form-aligned	用于表示标签下方带有输入元素的对齐表单。与 pure-form 一起使用。
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" 
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 表单的不同类型

默认表单
堆叠表单
对齐表单
多列表单
分组输入
输入大小表单

下一主题Pure.CSS 默认表单

Pure.CSS 表单

Pure.CSS 表单的类型

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

PureCSS 教程

Pure.CSS 输入框

Pure.CSS 表单

Pure.CSS 表格

面试题

Pure.CSS 表单

Pure.CSS 表单的类型

相关帖子

默认表单

堆叠表单

分组表单

对齐表单

输入大小表单

多列表单

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器