BlazorでのWebアプリケーション開発手法１【C#】D01_入力エリア

ここまでは主にデータを画面に表示することを中心にやってきました。今回からは入力、つまり文字などをユーザーに入力してもらう部分を扱っていきます。

inputタグの基本

入力エリアを作るには、基本的にHTMLのinputタグを使います。Home.razorを開き、「Hello, world!」の下に入力エリアを追加していきます。

図1　ソリューションエクスプローラーからHome.razorを開く

図2　Home.razorの編集前の状態

h1タグの下に、次のようにinputタグを追加します。

<input />

図3　inputタグを追加したところ

inputタグには type 属性があり、何も指定しない場合や文字を入力したい場合は type=”text” を指定します。

<input type="text" />

図4　type=”text” を指定したところ

ブラウザーで確認すると、次のように文字を入力できる欄が表示されます。

図5　ブラウザーで確認した入力エリア

type属性の種類

type属性にはtext以外にもさまざまな種類が用意されています。Visual Studioの入力候補（IntelliSense）を見ると、date、datetime、email、file、hiddenなど多くの候補が一覧表示されます。

図6　type属性の入力候補一覧

type属性は見た目に影響するものもありますし、たとえばemailを選んでおくと入力チェック（バリデーション）に利用できたり、スマートフォンなどで入力欄をタップしたときに表示されるキーボードの種類が変わったりします。通常のtextであればアルファベット中心のキーボードになりますが、emailであれば@マークが押しやすいキーボードが表示されるようになります。基本的には、どのようなデータを入力してもらいたいかを考えて、それに合ったtypeを選ぶことになります。

value属性で初期値を表示する

入力エリアに初期値を表示したい場合は、value属性を使います。

<input type="text" value="AAA" />

図7　value=”AAA” を追加したところ

ブラウザーで確認すると、入力エリアに「AAA」が初期値として表示されます。

図8　初期値「AAA」が表示された入力エリア

Bootstrapで見た目を整える

このままでも入力エリアとして機能しますが、Bootstrapのクラスを使うともう少しおしゃれな見た目にできます。class属性に “form-control” を指定します。

<input type="text" value="AAA" class="form-control" />

図9　class=”form-control” を追加したところ

ブラウザーで確認すると、枠線や余白が整った見た目のよい入力エリアになります。

図10　form-controlクラスを適用した入力エリア

Bootstrapについてもう少し詳しく調べたい場合は、「Bootstrap form」などで検索すると、公式サイトのフォーム関連のドキュメントにたどり着きます。「フォーム」のページから「フォームコントロール」を選ぶと、ラベル付きの入力欄の例が掲載されています。

図11　Bootstrap公式ドキュメントのフォームコントロールの例

その下にはHTMLのサンプルコードも掲載されており、たとえば次のように label タグと input type=”email” を組み合わせた例が確認できます。このように、欲しい見た目に近いサンプルを見つけたら、それをコピーして自分のプロジェクトに貼り付けるだけで同じような表示を再現できます。

図12　ドキュメントに掲載されているHTMLのサンプルコード

<div class="mb-3">
  <label for="exampleFormControlInput1" class="form-label">Email address</label>
  <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
</div>
<div class="mb-3">
  <label for="exampleFormControlTextarea1" class="form-label">Example textarea</label>
  <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>

図13　サンプルコードをHome.razorに貼り付けたところ

ブラウザーで確認すると、最初に作った入力エリアの下に、ラベル付きのメール入力欄とテキストエリアが表示されます。

図14　貼り付けたサンプルをブラウザーで確認したところ

今回はサンプルの確認だけなので、貼り付けた部分は一旦削除しておき、最初に作成したinputタグのみを残しておきます。

図15　サンプル部分を削除し、元のinputタグのみを残した状態

まとめ

このように、input タグを使うことで入力エリアを作成でき、Bootstrapのサイトから用途に合ったサンプルを探して貼り付ければ、見た目の良いフォームも簡単に作れます。今回は入力エリアを作成し、そこに文字を入力できることや、プログラム側から値を表示させる（value属性）ところまでを確認しました。入力した値を使って保存やチェックなど、プログラムの中で実際に活用する部分こそが入力エリアの本来の意味ですが、そのやり方については、次回以降に双方向データバインドなどの仕組みとあわせて扱っていきます。