.NET開発者のためのブログメディア
Bootstrap4でフォームを作成する方法と新設された機能
公開日時： 更新日時：
申し込みフォームやアンケートフォームなど、フォームを利用する機会は意外と多くあります。そこで活躍するのが「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で新設された機能やフォームの作成方法を紹介しました。使いやすいシンプルなフォームは、それだけでユーザーの目に留まります。作成するのにそれほど時間もかからないので、この記事を参考にぜひ積極的に使ってみてはいかがでしょうか。
Search キーワード検索
Popular 人気の記事
-
【VB.NET入門】DataGridViewの使い方まとめ
公開: 更新:
reccomended おすすめ記事
-
【.NETが統合】.NET 5の概要と今後のリリース予定
公開: 更新:
Categories 連載一覧
Tags タグ一覧
Jobs 新着案件
-
開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク
月給29万～30万円東京都品川区(大崎駅) -
遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク
月給45万～60万円東京都港区(六本木駅) -
病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク
月給30万～30万円東京都豊島区(池袋駅) -
開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク
月給50万～50万円東京都豊島区(大塚駅) -
債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務
月給62万～67万円東京都文京区(後楽園駅)