BlazorでのWebアプリケーション開発手法１【C#】D15_チェックボックスにラベルを付ける

チェックボックスは、単体で使うよりもラベル（説明文）と一緒に表示することがほとんどです。今回は、Bootstrapが提供するサンプルを参考にしながら、チェックボックスにラベルを付ける方法を解説します。

Bootstrapのサンプルを確認する

Bootstrap公式サイトの「チェックボックスとラジオ」のページを見ると、input要素のcheckboxとlabel要素が一緒に使われています。labelにはclass=”form-check-label”が指定されています。

図1 Bootstrap公式サイトのチェックボックスのサンプル（form-check-label）

この書き方をそのまま参考にして、自分のプログラムにも同じようにラベルを追加していきます。

labelタグを追加する

現在のコードは、次のようにinput要素だけでlabelがありません。

図2 ラベルを付ける前のコード（input要素のみ）

input要素の下にlabel要素を追加し、「自動更新」という文字を入れます。これがラベルとして表示される文字になります。あわせて、labelにBootstrapのform-check-labelクラスを指定します。

<input type="checkbox" class="form-check-input"
       @bind="_isAuto"
       @bind:after="AutoChanged" />
<label class="form-check-label">自動更新</label>

図3 labelにform-check-labelクラスを指定したコード

この状態で実行すると、チェックボックスと「自動更新」の文字が並んで表示されます。

図4 実行結果（ラベル追加直後）

2つの問題点

実行結果を見ると、2つの問題があることが分かります。1つ目は、チェックボックスとラベルの高さが揃っていないこと。2つ目は、「自動更新」の文字をクリックしてもチェックボックスが反応しないことです。本来は、ラベルの文字をクリックしただけでもチェックが付いてほしいところですが、現状ではそれができていません。

図5 高さのズレとラベルクリック時の反応を確認

idとforでinputとlabelを対応付ける

ラベルをクリックしてチェックボックスを反応させるには、input側にid属性を指定し、label側で同じ文字列をfor属性に指定します。こうすることで、このinputとlabelは同じもの（対になっている）とブラウザーに伝わり、ラベルをクリックしてもinput側が反応するようになります。

Bootstrapのサンプルでも、input側にid=”flexCheckDefault”、label側にfor=”flexCheckDefault”が指定されており、「Default checkbox」という文字をクリックするとチェックが切り替わるようになっています。

図6 サンプルのid/for属性とラベルクリックによる連動

この考え方にならって、checkbox側にid=”autoCheckBox”を指定します。この名前は自由に付けて構いません。

図7 checkbox側にid属性を追加

そして、対にしたいlabel側に、同じ文字列をfor属性として指定します。これで、このcheckboxとlabelは同じものだとブラウザーに伝わり、ラベルをクリックしてもcheckboxが反応するようになります。

<input type="checkbox" class="form-check-input"
       @bind="_isAuto"
       @bind:after="AutoChanged"
       id="autoCheckBox" />
<label class="form-check-label"
       for="autoCheckBox">自動更新</label>

図8 id/forを対応付けたコード

div要素でスタイルをまとめる

残るもう1つの問題（チェックボックスとラベルの高さが揃っていない見た目）は、スタイルを合わせることで解決できます。Bootstrapのサンプルでは、input要素とlabel要素全体をdivタグで囲み、そのdivにclass=”form-check”を指定しています。

このdivは、Windowsフォームで言うところのパネルやグループボックスのようなもので、コンテナ（ここからここまでを1つのグループとしてまとめる箱）の役割を果たします。form-checkクラスを指定しておくと、チェックボックスとラベルのスタイルが揃い、きれいに表示されるようになります。

そこで、input要素の前に<div>タグを追加します。

図9 div要素を追加する（class未指定の状態）

</div>タグは、label要素の下（閉じタグの後）に配置し、inputとlabelをひとまとめにグルーピングします。divのclassには、IntelliSenseの候補一覧からform-checkを選択します。

図10 IntelliSenseからform-checkクラスを選択

最終的なコードは次のようになります。

<div class="form-check">
  <input type="checkbox" class="form-check-input"
         @bind="_isAuto"
         @bind:after="AutoChanged"
         id="autoCheckBox" />
  <label class="form-check-label"
         for="autoCheckBox">自動更新</label>
</div>

図11 form-checkクラスを指定した最終的なコード

実行結果の確認

この状態で実行すると、チェックボックスとラベルの高さが揃い、見た目もきれいに表示されるようになりました。

図12 form-check適用後の実行結果

チェックボックスを使う際は、このようにlabelタグを組み合わせ、id/forで対応付け、form-checkクラスでスタイルをまとめる、という3点を意識して実装してみてください。