Bulma - 表单控件

描述

Bulma 包含不同类型的表单控件类，用于创建各种表单。它支持以下表单控件类：

.label
.input
.textarea
.select
.checkbox
.radio
.button
.help

表单控件类可以包装在 .control 类容器中，并使用 .field 容器来保持表单控件类之间的间距。

以下简单示例描述了一些表单字段的使用，例如输入、下拉列表、复选框和单选按钮字段：

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <title>Bulma Forms Example</title>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
      <script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
   </head>
   
   <body>
      <section class = "section">
      
         <div class = "container">
         <span class = "title">
            Form Fields
         </span>
         <br>
         <br>
         <span class = "is-size-5">
            Input Fields
         </span>
         
         //field class container keeps the space between form control classes
         <div class = "field">
            <label class = "label">Name</label>
            //control class container wraps the form control classes 
            <div class = "control">
               <input class = "input" type = "text" placeholder = "enter your name...">
            </div>
         </div>
         <div class = "field">
            <label class = "label">Email</label>
            <div class = "control">
               <input class = "input" type = "email" placeholder = "enter your email...">
            </div>
         </div>
         <br>
         
         <span class = "is-size-5">
            Dropdown Field
         </span>
         
         <div class = "field">
            <div class = "control">
               <div class = "select">
                  <select>
                     <option>Option One</option>
                     <option>Option Two</option>
                  </select>
               </div>
            </div>
         </div>
         <br>
         
         <span class = "is-size-5">
            Checkbox Field
         </span>
         <div class = "field">
            <div class = "control">
               <label class = "checkbox">
               <input type = "checkbox">
                  I agree to the <a href = "#">terms and conditions</a>
               </label>
            </div>
         </div>
         <br>
         
         <span class = "is-size-5">
            Radio Button Fields
         </span>
         <div class = "field">
            <div class = "control">
               <label class = "radio">
                  <input type = "radio" name = "question">
                  Yes
               </label>
               <label class = "radio">
                  <input type = "radio" name = "question">
                  No
               </label>
            </div>
         </div>
         
         <span class = "is-size-5">
            Button Field
         </span>
         <div class = "field is-grouped">
            <div class = "control">
               <button class = "button is-link">Submit</button>
            </div>
         </div>
      </section>
      
   </body>
</html>

它显示以下输出：

带图标的表单字段

Bulma 在 control 类容器上提供了 2 种类型的修饰符。

has-icons-left
has-icons-right

您需要使用其他修饰符，例如 icon is-left 类与 has-icons-left 类一起使用，以及 icon is-right 类与 has-icons-right 类以及 icon 类一起使用。

以下简单示例描述了使用 has-icons-left 和 has-icons-right 类来创建带图标的表单字段：

实时演示

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <title>Bulma Forms Example</title>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
      <script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
   </head>
   <body>
      <section class = "section">
         <div class = "container">
            <span class = "title">
               Form Fields with Icons
            </span>
            <br>
            <br>
            
            <span class = "is-size-5">
               Input Fields
            </span>
            
            <div class = "field">
               <label class = "label">Name</label>
               <div class = "control">
                  <p class = "control has-icons-left has-icons-right">
                     <input class = "input" type = "email" placeholder = "Enter user name">
                     <span class = "icon is-small is-left">
                        <i class = "fas fa-user"></i>
                     </span>
                     <span class = "icon is-small is-right">
                        <i class = "fas fa-check"></i>
                     </span>
                  </p>
               </div>
            </div>
            
            <div class = "field">
               <label class = "label">Email</label>
               <div class = "control">
                  <p class = "control has-icons-left">
                     <input class = "input" type = "password" placeholder = "Enter your email id">
                     <span class = "icon is-small is-left">
                        <i class = "fas fa-envelope"></i>
                     </span>
                  </p>
               </div>
            </div>
            <br>    
            
            <span class = "is-size-5">
               Dropdown Field
            </span>
            
            <div class = "field">
               <p class = "control has-icons-left">
                  <span class = "select">
                     <select>
                        <option selected>Players</option>
                        <option>Sachin Tendulkar</option>
                        <option>M S Dhoni</option>
                     </select>
                  </span>
                  <span class = "icon is-small is-left">
                     <i class = "fas fa-globe"></i>
                  </span>
               </p>
            </div>
            <br>
            
            <span class = "is-size-5">
               Sizes of Input Fields
            </span>
            
            <div class = "field">
               <label class = "label is-small">Small Input</label>
               <div class = "control">
                  <p class = "control has-icons-left has-icons-right">
                     <input class = "input is-small" type = "email" placeholder = "Enter user name">
                     <span class = "icon is-small is-left">
                        <i class = "fas fa-user"></i>
                     </span>
                     <span class = "icon is-small is-right">
                        <i class = "fas fa-check"></i>
                     </span>
                  </p>
               </div>
            </div>
            
            <div class = "field">
               <label class = "label is-medium">Medium Input</label>
               <div class = "control">
                  <p class = "control has-icons-left has-icons-right">
                     <input class = "input is-medium" type = "email" placeholder = "Enter user name">
                     <span class = "icon is-small is-left">
                        <i class = "fas fa-user"></i>
                     </span>
                     <span class = "icon is-small is-right">
                        <i class = "fas fa-check"></i>
                     </span>
                  </p>
               </div>
            </div>
            
            <div class = "field">
               <label class = "label is-large">Large Input</label>
               <div class = "control">
                  <p class = "control has-icons-left has-icons-right">
                     <input class = "input is-large" type = "email" placeholder = "Enter user name">
                     <span class = "icon is-small is-left">
                        <i class = "fas fa-user"></i>
                     </span>
                     <span class = "icon is-small is-right">
                        <i class = "fas fa-check"></i>
                     </span>
                  </p>
               </div>
            </div>
            
         </div>
      </section>
      
   </body>
</html>

执行以上代码，您将获得以下输出：

表单附加组件和表单组

通过使用表单附加组件，您可以轻松地将文本或按钮添加到基于文本的输入的前面和后面。通过向输入字段添加前置和后置内容，您可以向用户的输入添加常用元素。表单控件可以使用 has-addons 修饰符组合在一起，并使用 is-grouped 修饰符在字段容器上对表单控件进行分组。

以下简单示例描述了表单附加组件（使用 has-addons 修饰符）和表单组（在字段容器上使用 is-grouped 修饰符）的使用：

实时演示

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <title>Bulma Forms Example</title>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
      <script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
   </head>
   
   <body>
      <section class = "section">
         <div class = "container">
            <span class = "title">
               Form Addons
            </span>
            <br>
            <br>
            
            <span class = "is-size-5">
               Search Box
            </span>
            
            <div class = "field has-addons">
               <div class = "control">
                  <input class = "input" type = "text" placeholder = "Search your product">
               </div>
               <div class = "control">
                  <a class = "button is-info">Search</a>
               </div>
            </div>
            <br> 
            
            <span class = "is-size-5">
               Static Button
            </span>
            <div class = "field has-addons">
               <p class = "control">
                  <input class = "input" type = "text" placeholder = "Your email id">
               </p>
               <p class = "control">
                  <a class = "button is-static">@gmail.com</a>
               </p>
            </div>
            <br>
            
            <span class = "is-size-5">
               Dropdown
            </span>
            <div class = "field has-addons">
               <div class = "control">
                  <div class = "select">
                     <select name = "country">
                        <option value = "one">One</option>
                        <option value = "two">Two</option>
                        <option value = "three">Three</option>
                        <option value = "four">Four</option>
                        <option value = "five">Five</option>
                     </select>
                  </div>
               </div>
               <div class = "control">
                  <button type = "submit" class = "button is-primary">Choose</button>
               </div>
            </div>
            <br>
            
            <span class = "title">
               Form Group
            </span>
            <br>
            <br>
            
            <div class = "field is-grouped">
               <p class = "control">
                  <a class = "button is-primary">Yes</a>
               </p>
               <p class = "control">
                  <a class = "button is-info">No</a>
               </p>
            </div>
            <span class = "is-size-5">
               Centered Form Group
            </span>
            <div class = "field is-grouped is-grouped-centered">
               <p class = "control">
                  <a class = "button is-primary">Yes</a>
               </p>
               <p class = "control">
                  <a class = "button is-info">No</a>
               </p>
            </div>
         </div>
      </section>
      
   </body>
</html>

它显示以下输出：

在表单的后续章节中，我们使用了各种颜色类，例如 is-primary、is-info、is-success、is-warning、is-danger，不同类型的尺寸，例如 is-small、is-medium 和 is-large 类以及状态，例如 is-hovered、is-focused 和 is-rounded 来显示输入字段。

bulma_form.htm

打印页面