Pure.CSS 默认表单

表单是每个 Web 应用程序和网站的基本和交互式功能。表单有助于获取用户信息、订阅页面帐户和查看产品。

"pure-form" 类用于 form 标签中以创建内联表单。它是创建表单的基本类，无需任何 CSS 样式标签或 JavaScript 脚本。

语法

语法显示了使用 pure css 的默认表单。

pure-css 类如何工作

1. 表单结构

• 默认表单使用 pure-form 类来应用带有内联标签的表单元素。
• 表单使用 <fieldset> 标签来分组与表单相关的控件，并使用 <legend> 标签作为表单标题。

2. 表单输入

• 表单包括标签中的 <input>、复选框、按钮、单选按钮和 <textarea> 元素。
• 我们可以将默认样式与表单和表单元素一起使用。
• 表单输入显示了带有类和标签的响应式设计。

3. 提交按钮

• 提交按钮在 pure-button 和 pure-button-primary 类中使用，以获得简洁样式的按钮。

Pure.css 默认表单的关键功能

pure.css 默认表单提供以下功能。

1. 轻量级且兼容的大小
   • css 默认表单旨在获得小而轻量的表单。
   • 它对您的网站性能提供快速且最小的影响。
2. 模块化
   • css 的构建考虑了模块化。您只能包含项目所需的组件。
   • 如果您需要内联表单样式，请在整个框架中包含 pure-form 类。
3. 响应式
   • 默认表单具有响应式设计，适用于所有设备尺寸。
   • pure-form 用于创建响应式布局，无需额外的复杂性和类。
4. 跨浏览器兼容性
   • css 默认表单旨在适用于独立的平台，例如 Chrome、Safari、Firefox 和 Internet Explorer。
5. 可定制
   • Pure.css 默认表单可以轻松定制以满足独特的需求。
   • 您可以使用 pure CSS 表单类来处理默认样式。
6. JavaScript 兼容性
   • pure-form 类与 React、Angular 等 JavaScript 框架相结合。

示例

以下示例显示了使用 pure css 类的默认表单。

示例 1

让我们举个例子，创建一个紧凑的内联表单。

输出

输出显示了基本的内联表单。

说明

• 我们可以使用电子邮件和密码输入来写入数据。
• 复选框类型允许保存数据的权限。
• 我们可以使用 button 标签来保存用户数据。

示例 2

pure-form 类与 break 标签和 pure-checkbox 类一起运行。

输出

输出显示了 pure css 默认表单。

说明

• 带有 <br> 标签的 form 标签中的 pure-form 类。
• pure-checkbox 类用于在表单中检查值。

示例 3

pure-form 类与 label 和 required 关键字一起使用。

输出

输出显示了 pure css 默认表单。

说明

• 带有 label 标签的 form 标签中的 pure-form 类。
• required 关键字用于在表单中应用必要的条件。

示例 4

pure-form 类使用其他表单类及其输入标签。

输出

输出显示了带有组表单的 pure css 默认表单。

说明

• 带有 pure-group 类的 form 标签中的 pure-form 类。
• pure-group 类用于默认表单内的 <fieldset> 标签中。
• pure-form 类是表单的每个类和类别的默认类。

结论

pure CSS 默认表单用于创建表单和修改 UI。我们可以使用带有新样式类的表单的每种格式的默认表单。