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
列印頁面
上一頁
下一頁
廣告

© . All rights reserved.