.NET開発者のためのブログメディア
Bootstrap4でフォームを作成する方法と新設された機能
2020年02月21日
申し込みフォームやアンケートフォームなど、フォームを利用する機会は意外と多くあります。そこで活躍するのが「Bootstrap」です。この記事では、Bootstrap4でフォームを作成する方法や新設された機能について解説します。ぜひ、参考にしてみてください。
- PG
- BootstrapはHTML・CSS・JavaScriptで構成されたWebアプリケーションフレームワークでしたね！
- PL
- そうですね。デザインの知識がなくても、短い時間でスタイリッシュなフォームを作成することができます。
目次
Bootstrap4で新設された機能
はじめに、フォームに関するBootstrap4で新設された機能をいくつか紹介します。Bootstrap3とは少し記述方法が違う箇所もあるため、しっかり確認しておいてください。
- レンジ入力 [.form-control-range]クラスの使用で、水平方向にスクロール可能な範囲の入力が設定可能です。
- 切り替えスイッチ [.custom-switch]クラスの使用で切り替えスイッチが表示されます。スイッチは[disabled]属性もサポートしています。
- 自動サイズ設定 [.col]を[.col-auto]に変更することで、カラムが必要なだけのスペースを自動で調整できます。
このように、デザイン性や操作性を追求し、Bootstrapには機能が次々に追加されています。次項では、これらの機能を使って実際にフォームを作成してみましょう。
Bootstrap4でレンジと切り替えスイッチの実装
前項でご紹介したBootstrapの部品を使って実際にフォームを作成していきます。まずは、サンプルコードをご覧ください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Form Sample</title> <!-- BootstrapのCSS読み込み --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- jQuery読み込み --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <!-- BootstrapのJS読み込み --> <script src="js/bootstrap.min.js"></script> </head> <body> <br/><br/> <div class="container-fluid"> <!-- フォームの実装｜ここから --> <form class="needs-validation" novalidate> <div class="form-row"> <div class="col-md-4 mb-3"> <label for="userName">ユーザー名</label> <input type="text" class="form-control" id="userName" value="ユーザー名" required> <div class="valid-tooltip"> OK! </div> </div> </div> <div class="form-row"> <div class="col-md-4 mb-3"> <label for="password">パスワード</label> <input type="password" class="form-control" id="password" required> <div class="valid-tooltip"> OK! </div> </div> </div> <div class="form-row"> <div class="col-md-4 mb-3"> <!-- レンジ --> <label for="range">サービスの満足度を教えてね！</label> <input type="range" class="custom-range" id="range"> </div> </div> <!-- 切り替えスイッチ --> <div class="custom-control custom-switch"> <input type="checkbox" class="custom-control-input" id="switch"> <label class="custom-control-label" for="switch">お知らせメールを配信</label> </div><br/> <button class="btn btn-primary" type="submit">フォームを送信</button> </form> <!-- フォームの実装｜ここまで --> </div> </body> </html> |
では、ブラウザでどのように見えるのか確かめてみましょう。
きちんと「レンジ」や「切り替えスイッチ」が表示されています。
今回はユーザー名とパスワードのみでしたが、住所や電話番号などを追加して色々と試してみてください。
- PG
- シンプルで使いやすそうなフォームができましたね。
- PL
- Bootstrapを使うことで、このくらいのフォームであれば15分ほどで作ることもできます。ぜひ、フォーム作成の際は使ってみてください。
Bootstrap4の新機能を導入して使いやすいフォームを作る
ここでは、Bootstrap4で新設された機能やフォームの作成方法を紹介しました。使いやすいシンプルなフォームは、それだけでユーザーの目に留まります。作成するのにそれほど時間もかからないので、この記事を参考にぜひ積極的に使ってみてはいかがでしょうか。
