HTML CSS JAVASCRIPT PYTHON PYTHON2 JAVA C C++ C# SQL Excel Linux AI BOOTSTRAP PHP 教程库 参考手册 技术文章 测验 练习 HOWTO FAQ
❮ 上一节 下一节 ❯

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>
         
         //字段类容器保留表单控件类之间的空间
         <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">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.html

❮ 上一节 下一节 ❯