English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Bootstrap4 基礎教程

Bootstrap4 フォーム

HTMLフォームはウェブページとアプリケーションにとって欠かせない一部ですが、CSSを使って一つずつ手動でフォームのレイアウトを作成したり、フォームコントロールのスタイルを設定することは退屈です。Bootstrapは、事前定義された一連のクラスを通じて、フォームコントロール（タグ、入力フィールド、セレクトボックス、テキストエリア、ボタンなど）のスタイルとアライメントプロセスを大幅に簡略化します。

この章では、Bootstrapを使ってフォームを作成する方法を学びます。Bootstrapは、いくつかの簡単なHTMLタグと拡張されたクラスを使って、さまざまなスタイルのフォームを作成できます。

フォーム要素<input>, <textarea>, 和 <select>要素 を使用するとき、幅はすべて-controlクラスの設定の場合、幅はすべて 100%。

Bootstrap4 フォームレイアウト

  • スタックフォーム（全画面幅）：垂直方向

  • インラインフォーム：水平方向

Bootstrapは2種類のフォームレイアウトを提供しています：

スタックフォーム

以下のサンプルでは、2つの入力フィールド、1つのチェックボックス、1つの送信ボタンを使用してスタックフォームを作成しています：

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　サンプル</title>
　　<meta　charset="utf-8">-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>スタックフォーム</h2>
　　<form>
　　　　<div　class="form-group">
　　　　　　<label　for="email">メール:</label/label>
　　　　　　<input　type="email"　class="form-control"　id="email"　placeholder="メールを入力">
　　　　</div>
　　　　<div　class="form-group">
　　　　　　<label　for="pwd">パスワード:</label/label>
　　　　　　<input　type="password"　class="form-control"　id="pwd"　placeholder="パスワードを入力">
　　　　</div>
　　　　<div　class="form-check">
　　　　　　<label　class="form-check-label">
　　　　　　　　<input　class="form-check-input"　type="checkbox">　覚えておく
　　　　　　</label>
　　　　</div>
　　　　<button　type="submit"　class="btn　btn-primary">提出</button>
　　</form>
</div>
</body>
</html>
テストしてみる ‹/›

実行後の効果は以下の通りです：

インラインフォーム

すべてのインラインフォームの要素は左寄せです。

注意：スクリーン幅が 576pxで垂直にスタック表示されます。もしスクリーン幅が576pxでフォーム要素が同じ水平線上に表示されます。

インラインフォームを作成するには、<form>要素に　.form-inlineクラスを使用しています。

以下のサンプルでは、2つの入力フィールド、1つのチェックボックス、1つの送信ボタンを使用してインラインフォームを作成しています：

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　サンプル</title>
　　<meta　charset="utf-8">-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>インラインフォーム</h2>
　　<p>スクリーン幅が　576px　で水平に表示されます。もし　576px　でフォームがスタック表示されます。</p>
　　<form　class="form-inline">
　　　　<label　for="email">メール:</label/label>
　　　　<input　type="email"　class="form-control"　id="email"　placeholder="メールを入力">
　　　　<label　for="pwd">パスワード: </label>
　　　　<input　type="password"　class="form-control"　id="pwd"　placeholder="パスワードを入力">
　　　　<div　class="form-check">
　　　　　　<label　class="form-check-label">
　　　　　　　　<input　class="form-check-input"　type="checkbox">　覚えておく
　　　　　　</label>
　　　　</div>
　　　　<button　type="submit"　class="btn　btn-primary">提出</button>
　　</form>
</div>
</body>
</html>
テストしてみる ‹/›

実行後の効果は以下の通りです：


Bootstrap4 フォームコントロールBootstrap4 パンくずリストナビゲーション