.NET開発者のためのブログメディア

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

PG: BootstrapはHTML・CSS・JavaScriptで構成されたWebアプリケーションフレームワークでしたね！

PL: そうですね。デザインの知識がなくても、短い時間でスタイリッシュなフォームを作成することができます。

Bootstrap4で新設された機能

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

レンジ入力

切り替えスイッチ

自動サイズ設定

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

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

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

<!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>