.net column

.NET開発者のためのブログメディア
フォームのイメージ

Bootstrap4でフォームを作成する方法と新設された機能

2020年02月21日

申し込みフォームやアンケートフォームなど、フォームを利用する機会は意外と多くあります。そこで活躍するのが「Bootstrap」です。この記事では、Bootstrap4でフォームを作成する方法や新設された機能について解説します。ぜひ、参考にしてみてください。

PG
BootstrapはHTML・CSS・JavaScriptで構成されたWebアプリケーションフレームワークでしたね!
PL
そうですね。デザインの知識がなくても、短い時間でスタイリッシュなフォームを作成することができます。

Bootstrap4で新設された機能

はじめに、フォームに関するBootstrap4で新設された機能をいくつか紹介します。Bootstrap3とは少し記述方法が違う箇所もあるため、しっかり確認しておいてください。

  1. レンジ入力
  2. [.form-control-range]クラスの使用で、水平方向にスクロール可能な範囲の入力が設定可能です。

  3. 切り替えスイッチ
  4. [.custom-switch]クラスの使用で切り替えスイッチが表示されます。スイッチは[disabled]属性もサポートしています。

  5. 自動サイズ設定
  6. [.col]を[.col-auto]に変更することで、カラムが必要なだけのスペースを自動で調整できます。

このように、デザイン性や操作性を追求し、Bootstrapには機能が次々に追加されています。次項では、これらの機能を使って実際にフォームを作成してみましょう。

Bootstrap4でレンジと切り替えスイッチの実装

前項でご紹介したBootstrapの部品を使って実際にフォームを作成していきます。まずは、サンプルコードをご覧ください。

では、ブラウザでどのように見えるのか確かめてみましょう。

レンジとスイッチのフォーム

きちんと「レンジ」や「切り替えスイッチ」が表示されています。
今回はユーザー名とパスワードのみでしたが、住所や電話番号などを追加して色々と試してみてください。

PG
シンプルで使いやすそうなフォームができましたね。
PL
Bootstrapを使うことで、このくらいのフォームであれば15分ほどで作ることもできます。ぜひ、フォーム作成の際は使ってみてください。

Bootstrap4の新機能を導入して使いやすいフォームを作る

ここでは、Bootstrap4で新設された機能やフォームの作成方法を紹介しました。使いやすいシンプルなフォームは、それだけでユーザーの目に留まります。作成するのにそれほど時間もかからないので、この記事を参考にぜひ積極的に使ってみてはいかがでしょうか。


.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

求人一覧

また、直接のエントリーも受け付けております。

エントリー(応募フォーム)