ブルマ-チェックボックスとラジオ

説明

ユーザーにプリセットオプションのリストから選択させる場合、チェックボックス（特定のリストから複数のオプションを選択）およびラジオボタン（特定のリストから1つのオプションのみを選択）を使用できます。 inputタグで_checkbox_クラスと_radio_クラスを使用して、ブラウザー間の互換性とユーザーエクスペリエンスを維持します。

チェックボックス

以下の例は、ブルマで_checkbox_クラスを使用してチェックボックスの作成を示しています-

<!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">
               Checkbox
            </span>
            <br>
            <br>

            <div class = "checkbox">
               <label class = "is-size-5">Fruits</label>
               <br>
               <label class = "checkbox">
                  <input type = "checkbox">
                  Orange
               </label>

               <label class = "checkbox">
                  <input type = "checkbox">
                  Apple
               </label>

               <label class = "checkbox">
                  <input type = "checkbox">
                  Grapes
               </label>

               <label class = "checkbox">
                  <input type = "checkbox">
                  Mango
               </label>
            </div>
            <br>
            <br>

            <label class = "is-size-5">Disabled Checkbox</label>
            <br>
            <label class = "checkbox" disabled>
               <input type = "checkbox" disabled>
               Orange
            </label>

         </div>
      </section>

   </body>
</html>

以下の出力が表示されます-

ラジオボタン

以下の例は、Bulmaでのラジオボタンの作成（ラベルで_radio_クラスを使用）を示しています-

<!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">
               Radio Button
            </span>
            <br>
            <br>

            <div class = "checkbox">
               <label class = "is-size-5">Fruits</label>
               <br>

               <label class = "radio">
                  <input type = "radio" name = "fruitdemo">
                  Orange
               </label>
               <label class = "radio">
                  <input type = "radio" name = "fruitdemo">
                  Apple
               </label>
            </div>
            <br>
            <br>

            <label class = "is-size-5">Disabled Radio Button</label>
            <br>

            <label class = "radio">
               <input type = "radio" name = "fruitdemo">
               Orange
            </label>
            <label class = "radio" disabled>
               <input type = "radio" name = "fruitdemo" disabled>
               Apple
            </label>
            <br>
            <br>

            <label class = "is-size-5">Using checked HTML attribute</label>
            <br>

            <label class = "radio">
               <input type = "radio" name = "fruitdemo" checked>
               Orange
            </label>
            <label class = "radio">
               <input type = "radio" name = "fruitdemo">
               Apple
            </label>

         </div>
      </section>

   </body>
</html>

以下の出力が表示されます-

Bulma-form-checkbox-radio

目次

ブルマ-チェックボックスとラジオ

説明

チェックボックス

ラジオボタン