布尔玛形式Bulma是一个基于 Flexbox 的免费开源 CSS 框架。它组件丰富、兼容且文档齐全。它本质上是高度响应的。它使用类来实现其设计。 Bulma 框架支持并允许用户使用 Bulma表单控件构建表单。该框架支持 HTML 的 、 、 、 </strong>和<strong><label></strong>元素。用户可以使用 Bulma 构建完整的表单，因为它提供了最佳的 UI 设计。 Bulma 使用<strong>控制</strong>容器来维护表单的流程。它使用字段类作为在表单元素之间添加相等间距的容器。表单控件中使用了各种类，它们将在下面讨论。</p><div class="textBasedMannualAds"></div><p><strong>布尔玛表格类：</strong></p><ul><li> <strong>field：</strong>它是一个容器，其中标签、控件等用于创建表单。</li><li><strong>控件：</strong>该类用作块容器，由输入、关卡、文本区域、选择元素组成。</li><li> <strong>label：</strong>此类用于为输入元素添加标签。</li><li> <strong>input：</strong>该类用于从用户获取文本输入。</li><li> <strong>textarea：</strong>此类用于从用户那里获取大文本输入。</li><li> <strong>select：</strong>此类用于从下拉菜单的列表中选择一个选项。</li><li> <strong>radio：</strong>该类用于添加 Bulma 形式的单选按钮。</li><li> <strong>button：</strong>该类用于在 Bulma 表单中添加按钮。</li><li> <strong>checkbox：</strong>该类用于在 Bulma 表单中添加一个复选框，用于选择多个选项输入。</li></ul><p><strong>句法：</strong> </p><div class="hcb_wrap"><pre class="prism undefined-numbers lang-css" data-lang="CSS"><code class="replace"><form> <div class="field"> <label class="label">Label</label> <div class="control"> <input class="input" type="text" placeholder="Text input"> <input class="input" type="radio"> <input class="input" type="checkbox"> .... </div> </div> </form></code></pre></div><p><strong>示例：</strong>以下示例说明了 Bulma 表格。</p><div class="noIdeBtnDiv"><div><h5 class="code">HTML</h5><div class="hcb_wrap"><pre class="prism undefined-numbers lang-html" data-lang="HTML"><code class="replace"><!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css" /> <script src= "https://use.fontawesome.com/releases/v5.15.4/js/all.js"> </script> </head> <body> <div class="container box p-6 has-background-light"> <h1 class="title has-text-centered has-text-success"> GeeksforGeeks </h1> <h2 class="subtitle has-text-centered"> Sign Up Form </h2> <form action=""> <div class="field"> <label class="label">Name</label> <div class="control"> <input class="input" type="text" placeholder="Enter your name" /> </div> </div> <div class="field"> <label class="label">Username</label> <div class="control has-icons-left has-icons-right"> <input class="input is-success" type="text" placeholder="Enter your username" /> <span class="icon is-small is-left"> <i class="fas fa-user"></i> </span> </div> </div> <div class="field"> <label class="label">Email</label> <div class="control has-icons-left has-icons-right"> <input class="input is-danger" type="email" placeholder="Enter your email" /> <span class="icon is-small is-left"> <i class="fas fa-envelope"></i> </span> </div> </div> <div class="field"> <label class="label">Password</label> <div class="control has-icons-left has-icons-right"> <input class="input is-danger" type="password" placeholder="Enter your password" /> <span class="icon is-small is-left"> <i class="fas fa-key"></i> </span> </div> </div> <div class="field"> <label class="label"> Choose your Course </label> <div class="control"> <div class="select"> <select> <option>Java</option> <option>C++</option> <option>Python</option> </select> </div> </div> </div> <div class="field"> <label class="label"> Something Else </label> <div class="control"> <textarea class="textarea" placeholder="Want to tell anything?" >