ダウンロード

ここから始めましょう

機能

Sassツール

カスタマイズ

CSSライブラリ

CSSヘルパー

スポンサー

Password.link

フォームコントロール

一貫性を保つために設計された、すべての汎用的なフォームコントロール

Bulmaは、以下のネイティブなHTMLフォーム要素をサポートしています：<form> <button> <input> <textarea> および <label>。

以下のCSSクラスがサポートされています

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

均一なバランスのとれたデザインを維持するために、Bulmaはフォームコントロールをラップできる非常に便利なcontrolコンテナを提供します。
複数のコントロールをフォームで組み合わせる場合は、スペーシングを常に維持するために、fieldクラスをコンテナとして使用します。

フォームの完全な例 #

例

このユーザー名は使用可能です

このメールアドレスは無効です

HTML 

<div class="field">
  <label class="label">Name</label>
  <div class="control">
    <input class="input" type="text" placeholder="Text input">
  </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="Text input" value="bulma">
    <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>
  </div>
  <p class="help is-success">This username is available</p>
</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="Email input" value="hello@">
    <span class="icon is-small is-left">
      <i class="fas fa-envelope"></i>
    </span>
    <span class="icon is-small is-right">
      <i class="fas fa-exclamation-triangle"></i>
    </span>
  </div>
  <p class="help is-danger">This email is invalid</p>
</div>

<div class="field">
  <label class="label">Subject</label>
  <div class="control">
    <div class="select">
      <select>
        <option>Select dropdown</option>
        <option>With options</option>
      </select>
    </div>
  </div>
</div>

<div class="field">
  <label class="label">Message</label>
  <div class="control">
    <textarea class="textarea" placeholder="Textarea"></textarea>
  </div>
</div>

<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>

<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>

<div class="field is-grouped">
  <div class="control">
    <button class="button is-link">Submit</button>
  </div>
  <div class="control">
    <button class="button is-link is-light">Cancel</button>
  </div>
</div>

Bulmaを最適に使用するには、可能な限り頻繁にcontrol要素を使用することをお勧めします。

フォームフィールド #

fieldコンテナは、以下のシンプルなコンテナです。

  • テキストlabel
  • フォームcontrol
  • オプションのhelpテキスト

例

これはヘルプテキストです

HTML 

<div class="field">
  <label class="label">Label</label>
  <div class="control">
    <input class="input" type="text" placeholder="Text input">
  </div>
  <p class="help">This is a help text</p>
</div>

このコンテナにより、フォームフィールドを均一に配置できます。

例

HTML 

<div class="field">
  <label class="label">Name</label>
  <div class="control">
    <input class="input" type="text" placeholder="e.g Alex Smith">
  </div>
</div>

<div class="field">
  <label class="label">Email</label>
  <div class="control">
    <input class="input" type="email" placeholder="e.g. [email protected]">
  </div>
</div>

フォームコントロール #

Bulmaのcontrolは、単一のフォームコントロールを強化することを目的とした汎用性の高いブロックコンテナです。ラップする要素と同じ高さであるため、以下のBulma要素のみを含めることができます。

  • input
  • select
  • button
  • アイコン

このコンテナを使用すると、

  • スペーシングを常に維持する
  • フォームコントロールをグループにまとめる
  • フォームコントロールをリストにまとめる
  • フォームコントロールにアイコンを追加および先頭に追加する

例

HTML 

<div class="control">
  <input class="input" type="text" placeholder="Text input">
</div>

例

HTML 

<div class="control">
  <div class="select">
    <select>
      <option>Select dropdown</option>
      <option>With options</option>
    </select>
  </div>
</div>

例

HTML 

<div class="control">
  <button class="button is-primary">Submit</button>
</div>

アイコン付き #

コントロールに2つの修飾子を追加できます

  • has-icons-left
  • および/またはhas-icons-right

また、アイコンにも修飾子を追加する必要があります

  • has-icons-leftを使用する場合はicon is-left
  • has-icons-rightを使用する場合はicon is-right

入力欄のサイズによって、アイコンコンテナのサイズが決まります。

例

HTML 

<div class="field">
  <p class="control has-icons-left has-icons-right">
    <input class="input" type="email" placeholder="Email">
    <span class="icon is-small is-left">
      <i class="fas fa-envelope"></i>
    </span>
    <span class="icon is-small is-right">
      <i class="fas fa-check"></i>
    </span>
  </p>
</div>
<div class="field">
  <p class="control has-icons-left">
    <input class="input" type="password" placeholder="Password">
    <span class="icon is-small is-left">
      <i class="fas fa-lock"></i>
    </span>
  </p>
</div>
<div class="field">
  <p class="control">
    <button class="button is-success">
      Login
    </button>
  </p>
</div>

セレクトドロップダウンにもアイコンを追加できます。

例

HTML 

<div class="field">
  <p class="control has-icons-left">
    <span class="select">
      <select>
        <option selected>Country</option>
        <option>Select dropdown</option>
        <option>With options</option>
      </select>
    </span>
    <span class="icon is-small is-left">
      <i class="fas fa-globe"></i>
    </span>
  </p>
</div>

コントロールにアイコンが含まれている場合、Bulmaは入力欄またはアイコンのサイズに関係なく、アイコンが常に中央揃えされるようにします。

例

HTML 

<div class="field">
  <label class="label is-small">Small input</label>
  <div class="control has-icons-left has-icons-right">
    <input class="input is-small" type="email" placeholder="Normal">
    <span class="icon is-small is-left">
      <i class="fas fa-envelope"></i>
    </span>
    <span class="icon is-small is-right">
      <i class="fas fa-check"></i>
    </span>
  </div>
</div>

例

HTML 

<div class="field">
  <label class="label">Normal input</label>
  <div class="control has-icons-left has-icons-right">
    <input class="input" type="email" placeholder="Extra small">
    <span class="icon is-small is-left">
      <i class="fas fa-envelope fa-xs"></i>
    </span>
    <span class="icon is-small is-right">
      <i class="fas fa-check fa-xs"></i>
    </span>
  </div>
</div>

<div class="field">
  <div class="control has-icons-left has-icons-right">
    <input class="input" type="email" placeholder="Normal">
    <span class="icon is-left">
      <i class="fas fa-envelope"></i>
    </span>
    <span class="icon is-right">
      <i class="fas fa-check"></i>
    </span>
  </div>
</div>

例

HTML 

<div class="field">
  <label class="label is-medium">Medium input</label>
  <div class="control has-icons-left has-icons-right">
    <input class="input is-medium" type="email" placeholder="Extra small">
    <span class="icon is-small is-left">
      <i class="fas fa-envelope fa-xs"></i>
    </span>
    <span class="icon is-small is-right">
      <i class="fas fa-check fa-xs"></i>
    </span>
  </div>
</div>

<div class="field">
  <div class="control has-icons-left has-icons-right">
    <input class="input is-medium" type="email" placeholder="Small">
    <span class="icon is-left">
      <i class="fas fa-envelope fa-sm"></i>
    </span>
    <span class="icon is-right">
      <i class="fas fa-check fa-sm"></i>
    </span>
  </div>
</div>

<div class="field">
  <div class="control has-icons-left has-icons-right">
    <input class="input is-medium" type="email" placeholder="Normal">
    <span class="icon is-medium is-left">
      <i class="fas fa-envelope"></i>
    </span>
    <span class="icon is-medium is-right">
      <i class="fas fa-check"></i>
    </span>
  </div>
</div>

例

HTML 

<div class="field">
  <label class="label is-large">Large input</label>
  <div class="control has-icons-left has-icons-right">
    <input class="input is-large" type="email" placeholder="Extra small">
    <span class="icon is-small is-left">
      <i class="fas fa-envelope fa-xs"></i>
    </span>
    <span class="icon is-small is-right">
      <i class="fas fa-check fa-xs"></i>
    </span>
  </div>
</div>

<div class="field">
  <div class="control has-icons-left has-icons-right">
    <input class="input is-large" type="email" placeholder="Small">
    <span class="icon is-left">
      <i class="fas fa-envelope fa-sm"></i>
    </span>
    <span class="icon is-right">
      <i class="fas fa-check fa-sm"></i>
    </span>
  </div>
</div>

<div class="field">
  <div class="control has-icons-left has-icons-right">
    <input class="input is-large" type="email" placeholder="Normal">
    <span class="icon is-large is-left">
      <i class="fas fa-envelope"></i>
    </span>
    <span class="icon is-large is-right">
      <i class="fas fa-check"></i>
    </span>
  </div>
</div>

<div class="field">
  <div class="control has-icons-left has-icons-right">
    <input class="input is-large" type="email" placeholder="Large">
    <span class="icon is-medium is-left">
      <i class="fas fa-envelope fa-lg"></i>
    </span>
    <span class="icon is-medium is-right">
      <i class="fas fa-check fa-lg"></i>
    </span>
  </div>
</div>

フォームアドオン #

コントロールを連結する場合は、fieldコンテナにhas-addons修飾子を使用します

例

HTML 

<div class="field has-addons">
  <div class="control">
    <input class="input" type="text" placeholder="Find a repository">
  </div>
  <div class="control">
    <button class="button is-info">
      Search
    </button>
  </div>
</div>

入力欄、ボタン、およびドロップダウンのみ連結できます。

静的ボタンを追加すると便利です。

例

@gmail.com

HTML 

<div class="field has-addons">
  <p class="control">
    <input class="input" type="text" placeholder="Your email">
  </p>
  <p class="control">
    <a class="button is-static">
      @gmail.com
    </a>
  </p>
</div>

残りのスペースを埋める要素（この場合は入力欄）にis-expanded修飾子を使用します

例

HTML 

<div class="field has-addons">
  <p class="control">
    <span class="select">
      <select>
        <option>$</option>
        <option>£</option>
        <option>€</option>
      </select>
    </span>
  </p>
  <p class="control">
    <input class="input" type="text" placeholder="Amount of money">
  </p>
  <p class="control">
    <button class="button">
      Transfer
    </button>
  </p>
</div>

<div class="field has-addons">
  <p class="control">
    <span class="select">
      <select>
        <option>$</option>
        <option>£</option>
        <option>€</option>
      </select>
    </span>
  </p>
  <p class="control is-expanded">
    <input class="input" type="text" placeholder="Amount of money">
  </p>
  <p class="control">
    <button class="button">
      Transfer
    </button>
  </p>
</div>

全幅のセレクトドロップダウンが必要な場合は、control is-expandedとselect is-fullwidthを組み合わせます。

例

HTML 

<div class="field has-addons">
  <div class="control is-expanded">
    <div class="select is-fullwidth">
      <select name="country">
        <option value="Argentina">Argentina</option>
        <option value="Bolivia">Bolivia</option>
        <option value="Brazil">Brazil</option>
        <option value="Chile">Chile</option>
        <option value="Colombia">Colombia</option>
        <option value="Ecuador">Ecuador</option>
        <option value="Guyana">Guyana</option>
        <option value="Paraguay">Paraguay</option>
        <option value="Peru">Peru</option>
        <option value="Suriname">Suriname</option>
        <option value="Uruguay">Uruguay</option>
        <option value="Venezuela">Venezuela</option>
      </select>
    </div>
  </div>
  <div class="control">
    <button type="submit" class="button is-primary">Choose</button>
  </div>
</div>

配置を変更するには、has-addons-centeredまたはhas-addons-right修飾子を使用します。

例

HTML 

<div class="field has-addons has-addons-centered">
  <p class="control">
    <span class="select">
      <select>
        <option>$</option>
        <option>£</option>
        <option>€</option>
      </select>
    </span>
  </p>
  <p class="control">
    <input class="input" type="text" placeholder="Amount of money">
  </p>
  <p class="control">
    <button class="button is-primary">
      Transfer
    </button>
  </p>
</div>

例

HTML 

<div class="field has-addons has-addons-right">
  <p class="control">
    <span class="select">
      <select>
        <option>$</option>
        <option>£</option>
        <option>€</option>
      </select>
    </span>
  </p>
  <p class="control">
    <input class="input" type="text" placeholder="Amount of money">
  </p>
  <p class="control">
    <button class="button is-primary">
      Transfer
    </button>
  </p>
</div>

フォームグループ #

コントロールをグループ化する場合は、fieldコンテナにis-grouped修飾子を使用します。

例

キャンセル

HTML 

<div class="field is-grouped">
  <p class="control">
    <button class="button is-primary">
      Submit
    </button>
  </p>
  <p class="control">
    <a class="button is-light">
      Cancel
    </a>
  </p>
</div>

配置を変更するには、is-grouped-centeredまたはis-grouped-right修飾子を使用します。

例

キャンセル

HTML 

<div class="field is-grouped is-grouped-centered">
  <p class="control">
    <button class="button is-primary">
      Submit
    </button>
  </p>
  <p class="control">
    <a class="button is-light">
      Cancel
    </a>
  </p>
</div>

例

キャンセル

HTML 

<div class="field is-grouped is-grouped-right">
  <p class="control">
    <button class="button is-primary">
      Submit
    </button>
  </p>
  <p class="control">
    <a class="button is-light">
      Cancel
    </a>
  </p>
</div>

残りのスペースを埋めるコントロール要素にis-expanded修飾子を追加します。

例

HTML 

<div class="field is-grouped">
  <p class="control is-expanded">
    <input class="input" type="text" placeholder="Find a repository">
  </p>
  <p class="control">
    <button class="button is-info">
      Search
    </button>
  </p>
</div>

コントロールが複数行になるようにするには、is-grouped-multiline修飾子を追加します。これは、長いコントロールリストに最適です。

例

HTML 

<div class="field is-grouped is-grouped-multiline">
  <p class="control">
    <button class="button">
      One
    </button>
  </p>
  <p class="control">
    <button class="button">
      Two
    </button>
  </p>
  <p class="control">
    <button class="button">
      Three
    </button>
  </p>
  <p class="control">
    <button class="button">
      Four
    </button>
  </p>
  <p class="control">
    <button class="button">
      Five
    </button>
  </p>
  <p class="control">
    <button class="button">
      Six
    </button>
  </p>
  <p class="control">
    <button class="button">
      Seven
    </button>
  </p>
  <p class="control">
    <button class="button">
      Eight
    </button>
  </p>
  <p class="control">
    <button class="button">
      Nine
    </button>
  </p>
  <p class="control">
    <button class="button">
      Ten
    </button>
  </p>
  <p class="control">
    <button class="button">
      Eleven
    </button>
  </p>
  <p class="control">
    <button class="button">
      Twelve
    </button>
  </p>
  <p class="control">
    <button class="button">
      Thirteen
    </button>
  </p>
</div>

ボタンのリスト

ボタンのリストのみが必要な場合は、新しいbuttonsクラスを試してください。これにより、複数行のボタンリストを作成できます。

横型フォーム #

横型フォームコントロールが必要な場合は、以下の要素を含むfieldコンテナにis-horizontal修飾子を使用します。

  • サイドラベル用のfield-label
  • 入力欄/セレクトボックス/テキストエリアコンテナ用のfield-body

子要素にはis-groupedまたはhas-addonsを使用できます。

例

+44

先頭のゼロを入力しないでください

このフィールドは必須です

HTML 

<div class="field is-horizontal">
  <div class="field-label is-normal">
    <label class="label">From</label>
  </div>
  <div class="field-body">
    <div class="field">
      <p class="control is-expanded has-icons-left">
        <input class="input" type="text" placeholder="Name">
        <span class="icon is-small is-left">
          <i class="fas fa-user"></i>
        </span>
      </p>
    </div>
    <div class="field">
      <p class="control is-expanded has-icons-left has-icons-right">
        <input class="input is-success" type="email" placeholder="Email" value="[email protected]">
        <span class="icon is-small is-left">
          <i class="fas fa-envelope"></i>
        </span>
        <span class="icon is-small is-right">
          <i class="fas fa-check"></i>
        </span>
      </p>
    </div>
  </div>
</div>

<div class="field is-horizontal">
  <div class="field-label"></div>
  <div class="field-body">
    <div class="field is-expanded">
      <div class="field has-addons">
        <p class="control">
          <a class="button is-static">
            +44
          </a>
        </p>
        <p class="control is-expanded">
          <input class="input" type="tel" placeholder="Your phone number">
        </p>
      </div>
      <p class="help">Do not enter the first zero</p>
    </div>
  </div>
</div>

<div class="field is-horizontal">
  <div class="field-label is-normal">
    <label class="label">Department</label>
  </div>
  <div class="field-body">
    <div class="field is-narrow">
      <div class="control">
        <div class="select is-fullwidth">
          <select>
            <option>Business development</option>
            <option>Marketing</option>
            <option>Sales</option>
          </select>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="field is-horizontal">
  <div class="field-label">
    <label class="label">Already a member?</label>
  </div>
  <div class="field-body">
    <div class="field is-narrow">
      <div class="control">
        <label class="radio">
          <input type="radio" name="member">
          Yes
        </label>
        <label class="radio">
          <input type="radio" name="member">
          No
        </label>
      </div>
    </div>
  </div>
</div>

<div class="field is-horizontal">
  <div class="field-label is-normal">
    <label class="label">Subject</label>
  </div>
  <div class="field-body">
    <div class="field">
      <div class="control">
        <input class="input is-danger" type="text" placeholder="e.g. Partnership opportunity">
      </div>
      <p class="help is-danger">
        This field is required
      </p>
    </div>
  </div>
</div>

<div class="field is-horizontal">
  <div class="field-label is-normal">
    <label class="label">Question</label>
  </div>
  <div class="field-body">
    <div class="field">
      <div class="control">
        <textarea class="textarea" placeholder="Explain how we can help you"></textarea>
      </div>
    </div>
  </div>
</div>

<div class="field is-horizontal">
  <div class="field-label">
    <!-- Left empty for spacing -->
  </div>
  <div class="field-body">
    <div class="field">
      <div class="control">
        <button class="button is-primary">
          Send message
        </button>
      </div>
    </div>
  </div>
</div>

各タイプとサイズのコントロールとの垂直方向の配置を維持するために、field-labelには4つのサイズ修飾子が用意されています。

  • is-small
  • inputまたはbuttonにはis-normal
  • is-medium
  • is-large

例

HTML 

<div class="field is-horizontal">
  <div class="field-label">
    <label class="label">No padding</label>
  </div>
  <div class="field-body">
    <div class="field">
      <div class="control">
        <label class="checkbox">
          <input type="checkbox">
          Checkbox
        </label>
      </div>
    </div>
  </div>
</div>

<div class="field is-horizontal">
  <div class="field-label is-small">
    <label class="label">Small padding</label>
  </div>
  <div class="field-body">
    <div class="field">
      <div class="control">
        <input class="input is-small" type="text" placeholder="Small sized input">
      </div>
    </div>
  </div>
</div>

<div class="field is-horizontal">
  <div class="field-label is-normal">
    <label class="label">Normal label</label>
  </div>
  <div class="field-body">
    <div class="field">
      <div class="control">
        <input class="input" type="text" placeholder="Normal sized input">
      </div>
    </div>
  </div>
</div>

<div class="field is-horizontal">
  <div class="field-label is-medium">
    <label class="label">Medium label</label>
  </div>
  <div class="field-body">
    <div class="field">
      <div class="control">
        <input class="input is-medium" type="text" placeholder="Medium sized input">
      </div>
    </div>
  </div>
</div>

<div class="field is-horizontal">
  <div class="field-label is-large">
    <label class="label">Large label</label>
  </div>
  <div class="field-body">
    <div class="field">
      <div class="control">
        <input class="input is-large" type="text" placeholder="Large sized input">
      </div>
    </div>
  </div>
</div>

無効なフォーム #

disabledHTML属性を持つfieldsetでコントロールのセットをラップすることで、フォームの一部または全体を無効にできます。

例

HTML 

<fieldset disabled>
  
<div class="field">
  <label class="label">Name</label>
  <div class="control">
    <input class="input" type="text" placeholder="e.g Alex Smith">
  </div>
</div>

<div class="field">
  <label class="label">Email</label>
  <div class="control">
    <input class="input" type="email" placeholder="e.g. [email protected]">
  </div>
</div>

</fieldset>
Sass変数
CSS変数
値
Sass変数
CSS変数
値

Bulmaへの支援方法

一括寄付

弊社のスポンサーをご覧ください

月額寄付

スポンサーになる
#native_company# #native_desc#
#native_cta#