Bulmaのフォーム Form [CSSフレームワーク]

ユーザーの入力を受け付けるフォーム（Form）は、デザインによってその操作性は大きく異なってきます。
文字の大きさの調整や、適度な余白、アイコンによる視覚的な入力の補助など、様々な要件が重要になります。

BulmaにはHTMLのフォームをスタイリングするためのクラスが用意されています。

今回は、Bulmaでフォームを扱う際に使用するクラスなどを紹介します。

Bulmaのフォーム

Bulmaはフォームに配置する要素が一貫性を保つようにスタイルが設計されています。

BulmaではHTMLのフォーム用の要素の<form><button><input><textarea><select>などがサポートされています。

Bulmaが用意しているクラスをフォーム要素に適用することで、デザインのバランスを均等に保つことができます。

Bulmaはフォームに配置するコントロール要素をラップするコントロールコンテナのcontrolクラスを提供してます。
また、複数のコントロール（コンテナ）を組み合わせる場合のフィールドコンテナのfieldクラスを提供しています。

Bulmaのフォームコントロールコンテナ controlクラス

controlは、フォームコントロールを強化することを目的とした用途の広いブロックコンテナです。
コンテナには、inputクラス、selectクラス、buttonクラス、iconクラスを含むことができます。

例1 テキストボックス input

以下はテキストボックスを配置する例です。

HTML

例2 セレクトボックス select

以下はセレクトボックスを配置する例です。

HTML

例3 ボタン button

以下はボタン を配置する例です。

HTML

Bulmaのフォームフィールドコンテナ fieldクラス

fieldは、ラベル（表題）、コントロール（入力要素）、ヘルプ（メッセージ）のためのコンテナです。

コンテナには、labelクラス、controlクラス、helpクラス、buttonクラスを含むことができます。

例1 基本的な例

HTML

例2 複数のフィールド

HTML

例3 複数のコントロール

HTML

フォームコントロールのアイコン

フォームのコントロールにアイコンを配置する際には、controlクラスを指定した要素にhas-icons-leftクラス、またはhas-icons-rightを追加します。
has-icons-leftクラスは、コントロールの左端にアイコンを追加するかどうかを表し、has-icon-rightクラスは、コントロールの右端にアイコンを追加するかどうかを表します。
controlクラスを指定した要素の子要素にspan要素を使用してアイコン要素を配置します。
span要素にはis-leftクラス、またはis-rightクラスを指定して、左右いずれにアイコンを表示するかを指定します。

例1: 左端にアイコンを表示する

HTML

例2: 右端にアイコンを表示する

HTML

例3: 左右両方にアイコンを表示する

HTML

Bulmaでのフォームの作成例

ここでは、本記事の冒頭に掲載したフォームのサンプルの実装（HTML）を記載します。

HTML

Bulma 入門 Tips 一覧