ブートストラップ4フォーム

❮ 前次 ❯

Bootstrap4のデフォルト設定

フォームコントロールは、Bootstrapを使用してグローバルなスタイルを自動的に受け取ります。

クラスを持つすべてのテキスト、、、<input>および<textarea>要素の幅は100％です。<select>.form-control

ブートストラップ4フォームレイアウト

Bootstrapは、次の2種類のフォームレイアウトを提供します。

スタック（全幅）フォーム
インラインフォーム

ブートストラップ4スタックフォーム

Eメール：

パスワード：

私を覚えてますか

次の例では、2つの入力フィールド、1つのチェックボックス、および送信ボタンを持つスタックフォームを作成します。

.form-group適切なマージンを確保するために、各フォームコントロールの周りにラッパー要素を追加します。

例

<form action="/action_page.php">
<div class="form-group">
    <label for="email">Email address:</label>
    <input type="email" class="form-control" placeholder="Enter email" id="email">
</div>
<div class="form-group">
    <label for="pwd">Password:</label>
    <input type="password" class="form-control" placeholder="Enter password" id="pwd">
</div>
  <div class="form-group form-check">
    <label class="form-check-label">
      <input class="form-check-input" type="checkbox"> Remember me
    </label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>

ブートストラップインラインフォーム

インライン形式では、すべての要素がインラインで左揃えになります。

注：これは、少なくとも576px幅のビューポート内のフォームにのみ適用されます。576pxより小さい画面では、水平方向にスタックします。

インラインフォームの追加ルール：

要素にクラス.form-inlineを追加します<form>

次の例では、2つの入力フィールド、1つのチェックボックス、および1つの送信ボタンを持つインラインフォームを作成します。

例

<form class="form-inline" action="/action_page.php">
  <label for="email">Email address:</label>
  <input type="email" class="form-control" placeholder="Enter email" id="email">
  <label for="pwd">Password:</label>
  <input type="password" class="form-control" placeholder="Enter password" id="pwd">
<div class="form-check">
    <label class="form-check-label">
      <input class="form-check-input" type="checkbox"> Remember me
    </label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>

ユーティリティ付きインラインフォーム

上記のインラインフォームは「圧縮」されているように感じられ、Bootstrapのスペーシングユーティリティを使用すると見栄えがよくなります。次の例では、すべてのデバイス（小さいものと大きいもの）の各入力に右マージン（.mr-sm-2）を追加します。また、マージンボトムクラス（.mb-2）は、入力フィールドが壊れたときにスタイルを設定するために使用されます（十分なスペース/幅がないために水平から垂直に移動します）。

例

<form class="form-inline" action="/action_page.php">
  <label for="email" class="mr-sm-2">Email address:</label>
  <input type="email" class="form-control mb-2 mr-sm-2" placeholder="Enter email" id="email">
  <label for="pwd" class="mr-sm-2">Password:</label>
  <input type="password" class="form-control mb-2 mr-sm-2" placeholder="Enter password" id="pwd">
<div class="form-check mb-2 mr-sm-2">
    <label class="form-check-label">
      <input class="form-check-input" type="checkbox"> Remember me
    </label>
</div>
<button type="submit" class="btn btn-primary mb-2">Submit</button>
</form>

Bootstrap 4ユーティリティの章で、間隔とその他の「ヘルパー」クラスについて詳しく学習します。

フォーム行/グリッド

列（.col）を使用して、間隔ユーティリティを使用せずにフォーム入力の幅と配置を制御することもできます。.rowそれらをコンテナの中に入れることを忘れないでください。

以下の例では、並べて表示される2つの列を使用しています。ブートストラップグリッドの章で、列と行についてさらに詳しく学習します。

例

グリッドマージンを少なくしたい（デフォルトの列ガターをオーバーライドする）場合は、次.form-rowの代わりに使用し.rowます。

例

フォームの検証

さまざまな検証クラスを使用して、ユーザーに貴重なフィードバックを提供できます。フォームの送信前または送信後に検証フィードバックを提供するかどうかに応じて、要素に.was-validatedまたはを追加します。入力フィールドには、フォームに何が欠けているかを示すために、緑（有効）または赤（無効）の境界線が表示されます。またはメッセージを追加して、不足しているもの、またはフォームを送信する前に実行する必要があるものをユーザーに明示的に通知することもできます。.needs-validation<form>.valid-feedback.invalid-feedback

例

この例では.was-validated、フォームを送信する前に、不足しているものを示すために使用します。

<form action="/action_page.php" class="was-validated">
<div class="form-group">
    <label for="uname">Username:</label>
    <input type="text" class="form-control" id="uname" placeholder="Enter username" name="uname" required>
    <div class="valid-feedback">Valid.</div>
    <div class="invalid-feedback">Please fill out this field.</div>
</div>
<div class="form-group">
    <label for="pwd">Password:</label>
    <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd" required>
    <div class="valid-feedback">Valid.</div>
    <div class="invalid-feedback">Please fill out this field.</div>
</div>
<div class="form-group form-check">
    <label class="form-check-label">
      <input class="form-check-input" type="checkbox" name="remember" required> I agree on blabla.
      <div class="valid-feedback">Valid.</div>
      <div class="invalid-feedback">Check this checkbox to continue.</div>
    </label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>

例

この例では、を使用します.needs-validation。これにより、フォームが送信された後に検証効果が追加されます（不足しているものがある場合）。この例を正しく機能させるには、jQueryコードも追加する必要があることに注意してください。

<form action="/action_page.php" class="needs-validation" novalidate>
<div class="form-group">
    <label for="uname">Username:</label>
    <input type="text" class="form-control" id="uname" placeholder="Enter username" name="uname" required>
    <div class="valid-feedback">Valid.</div>
    <div class="invalid-feedback">Please fill out this field.</div>
</div>
<div class="form-group">
    <label for="pwd">Password:</label>
    <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd" required>
    <div class="valid-feedback">Valid.</div>
    <div class="invalid-feedback">Please fill out this field.</div>
</div>
<div class="form-group form-check">
    <label class="form-check-label">
      <input class="form-check-input" type="checkbox" name="remember" required> I agree on blabla.
      <div class="valid-feedback">Valid.</div>
      <div class="invalid-feedback">Check this checkbox to continue.</div>
    </label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>

<script>
// Disable form submissions if there are invalid fields
(function() {
'use strict';
window.addEventListener('load', function() {
    // Get the forms we want to add validation styles to
    var forms = document.getElementsByClassName('needs-validation');
    // Loop over them and prevent submission
    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('was-validated');
      }, false);
    });
}, false);
})();
</script>

❮ 前次 ❯

ブートストラップ4チュートリアル

ブートストラップ4グリッド

ブートストラップ4その他

ブートストラップ4Ref