とほほのBootstrap 4入門

1. トップ
2. Bootstrap 4入門
3. フォーム

テキスト・パスワード・テキストボックス

テキスト・パスワード・テキストボックスでは、入力部品のグループに .form-group を、入力部品に .form-control を指定します。

<div class="form-group">
  <label for="text1">Text:</label>
  <input type="text" id="text1" class="form-control">
</div>
<div class="form-group">
  <label for="passwd1">Password:</label>
  <input type="password" id="passwd1" class="form-control">
</div>
<div class="form-group">
  <label for="textarea1">Textarea:</label>
  <textarea id="textarea1" class="form-control"></textarea>
</div>

セレクト部品

セレクト部品の場合は、.form-control を用います。

<div class="form-group">
  <label for="select1a">Select:</label>
  <select id="select1a" class="form-control">
    <option>Select A</option>
    <option>Select B</option>
  </select>
</div>

ファイル

ファイル部品の場合は .form-control の代わりに .form-control-file を指定します。

<div class="form-group">
  <label for="file1">File:</label>
  <input type="file" id="file1" class="form-control-file">
</div>

レンジ

レンジ部品の場合は .form-control-range を指定します。

<div class="form-group">
  <label for="range1">Range:</label>
  <input type="range" id="range1" class="form-control-range">
</div>

チェックボックス

チェックボックスの場合は .form-check, .form-check-input, .form-check-label を用います。

<div class="form-check">
  <input class="form-check-input" type="checkbox" id="check1a" checked>
  <label class="form-check-label" for="check1a">Check A</label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" id="check1b">
  <label class="form-check-label" for="check1b">Check B</label>
</div>

チェックボックスやラジオボタンをラベル無しで表示する場合は .position-static を指定します。

<div class="form-check">
  <input class="form-check-input position-static" type="checkbox">
</div>
<div class="form-check">
  <input class="form-check-input position-static" type="checkbox">
</div>

ラジオボタン

ラジオボタンの場合も同様、.form-check, .form-check-input, .form-check-label を用います。

<div class="form-check">
  <input class="form-check-input" type="radio" name="radio1" id="radio1a" checked>
  <label class="form-check-label" for="radio1a">Check A</label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="radio1" id="radio1b">
  <label class="form-check-label" for="radio1b">Check B</label>
</div>

カスタムコントロール

.custom-control, .custom-control-label, .custom-control-input, .custom-checkbox, .custom-radio, .custom-select, .custom-file, .custom-file-label, .custom-file-input, .custom-range を使用して、少しデザインの異なる部品を表示することもできます。

<form>
  <div class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input" id="custom-check-1">
    <label class="custom-control-label" for="custom-check-1">Check A</label>
  </div>
  <div class="custom-control custom-radio">
    <input type="checkbox" class="custom-control-input" id="custom-radio-1">
    <label class="custom-control-label" for="custom-radio-1">Radio A</label>
  </div>
  <div class="custom-file">
    <input type="file" class="custom-file-input" id="custom-file-1" required>
    <label class="custom-file-label" for="custom-file-1">Choose file...</label>
  </div>
  <div class="form-group">
    <label for="custom-select-1b">Select(Normal):</label>
    <select id="custom-select-1b" class="custom-select">
      <option>Select A</option>
      <option>Select B</option>
    </select>
  </div>
  <div class="form-group">
    <label for="custom-select-1a">Select(Small):</label>
    <select id="custom-select-1a" class="custom-select custom-select-sm">
      <option>Select A</option>
      <option>Select B</option>
    </select>
  </div>
  <div class="form-group">
    <label for="custom-select-1c">Select(Large):</label>
    <select id="custom-select-1c" class="custom-select custom-select-lg">
      <option>Select A</option>
      <option>Select B</option>
    </select>
  </div>
  <div class="form-group">
    <label for="custom-range-1">Range:</label>
    <input type="range" class="custom-range" id="custom-range-1">
  </div>
</form>

インラインフォーム

.form-inline は、横に並ぶインラインフォームを表示します。

<form class="form-inline">
    :
</form>

チェックボックスやラジオボタンの場合は、.form-check-inline を指定します。

<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="radio2" id="radio2a" value="A">
  <label class="form-check-label" for="radio2a">A</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="radio2" id="radio2b" value="B">
  <label class="form-check-label" for="radio2b">B</label>
</div>

ラベルの横置並べ

.row と .col-sm-2 などを用いて、ラベルとフォーム部品を横並びにすることができます。下記の例では *-sm-* を用いているので、xs サイズでは縦並び、sm サイズ以上の時に横並びになります。

<form>
  <div class="form-group row">
    <label for="text3a" class="col-sm-2 col-form-label">First Name</label>
    <div class="col-sm-10">
      <input type="text" id="text3a" class="form-control">
    </div>
  </div>
  <div class="form-group row">
    <label for="text3b" class="col-sm-2 col-form-label">Last name</label>
    <div class="col-sm-10">
      <input type="text" id="text3b" class="form-control">
    </div>
  </div>
</form>

フォームの横並べ

フォームを横に並べるには、.form-row と .col-sm-6 などを用います。.row にくらべて .form-row の方が、マージンが少なくなります。

<div class="form-row">
  <div class="form-group col-sm-6">
    <label for="text4a">First name</label>
    <input type="text" class="form-control" id="text4a" placeholder="First name">
  </div>
  <div class="form-group col-sm-6">
    <label for="text4b">Last name</label>
    <input type="text" class="form-control" id="text4b" placeholder="Last name">
  </div>
</div>
<div class="row">
  <div class="form-group col-sm-6">
    <label for="text4c">First name</label>
    <input type="text" class="form-control" id="text4c" placeholder="First name">
  </div>
  <div class="form-group col-sm-6">
    <label for="text4d">Last name</label>
    <input type="text" class="form-control" id="text4d" placeholder="Last name">
  </div>
</div>

オートサイジング

.col-auto はカラムの内容に応じて適宜にカラムサイズを調整します。

<form>
  <div class="form-row align-items-center">
    <div class="col-auto">
      <label class="sr-only" for="text5a">First Name</label>
      <input type="text" class="form-control mb-2" id="text5a" placeholder="First Name">
    </div>
    <div class="col-auto">
      <label class="sr-only" for="text5b">Last Name</label>
      <input type="text" class="form-control mb-2" id="text5b" placeholder="Last Name">
    </div>
    <div class="col-auto">
      <div class="form-check mb-2">
        <input class="form-check-input" type="checkbox" id="check5">
        <label class="form-check-label" for="check5">Check</label>
      </div>
    </div>
    <div class="col-auto">
      <button type="submit" class="btn btn-primary mb-2">Submit</button>
    </div>
  </div>
</form>

フォームサイズ

.form-control-lg, .col-form-label-lg は少し大きめのコントロールとラベルを、.form-control-sm, .col-form-label-sm は少し小さめのコントロールとラベルを表示します。

<div class="form-group">
  <label for="text6a" class="col-form-label-lg">Large size</label>
  <input class="form-control form-control-lg" type="text" id="text6a" placeholder="Large size">
</div>
<div class="form-group">
  <label for="text6b">Normal size</label>
  <input class="form-control" type="text" id="text6b" placeholder="Normal size">
</div>
<div class="form-group">
  <label for="text6c" class="col-form-label-sm">Small size</label>
  <input class="form-control form-control-sm" type="text" id="text6c" placeholder="Small size">
</div>

リードオンリー

リードオンリーの部品を表示するには readonly 属性を指定します。通常テキストとして表示するには、.form-control を .form-control-plaintext に変更します。

<input type="text" readonly class="form-control" value="Readonly">
<input type="text" readonly class="form-control-plaintext" value="Readonly plaintext">

無効化

disabled 属性は入力部品を無効化します。

<input type="text" disabled class="form-control" placeholder="Text">
<select disabled class="form-control">...</select>
<input type="checkbox" disabled class="form-check-input">
<input type="submit" disabled class="btn btn-primary">

インプットグループ

.input-group, .input-group-text, .input-group-prepend, .input-group-append を用いて、下記の様なインプットグループを表示することができます。

<div class="input-group">
  <div class="input-group-prepend"><div class="input-group-text">http://</div></div>
  <input type="text" class="form-control">
  <div class="input-group-append"><div class="input-group-text">.example.com/</div></div>
</div>

ヘルプテキスト

Bootstrap 3 ではヘルプ表示に .help-block を使用していましたが、Bootstrap 4 からは .form-text を使用することになりました。

<label for="passwd8">Password</label>
<input type="password" id="passwd8" class="form-control" aria-describedby="help8">
<span id="help8" class="form-text text-muted">
  Your password must be 8-20 characters ...
</span>

バリデーション

.is-valid は入力部品が正常値であること、.is-invalid は異常値であることを示します。.valid-feedback は正常時の、.invalid-feedback は異常時のフィードバックメッセージを表示します。.valid-tooltip は正常時の、.invalid-tooltip は異常時のツールチップを表示します。

<form>
  <div class="form-row align-items-center mb-3">
    <div class="col">
      <label for="text9a">First Name</label>
      <input type="text" id="text9a" class="form-control is-valid">
      <div class="valid-feedback">OK</div>
    </div>
    <div class="col">
      <label for="text9b">Last Name</label>
      <input type="text" id="text9b" class="form-control is-invalid">
      <div class="invalid-feedback">Please enter a last name.</div>
    </div>
  </div>
  <div class="form-row align-items-center mb-5">
    <div class="col">
      <label for="text9c">First Name</label>
      <input type="text" id="text9c" class="form-control is-valid">
      <div class="valid-tooltip">OK</div>
    </div>
    <div class="col">
      <label for="text9d">Last Name</label>
      <input type="text" id="text9d" class="form-control is-invalid">
      <div class="invalid-tooltip">Please enter a last name.</div>
    </div>
  </div>
  <div class="form-row align-items-center">   
    <div class="col">
      <div class="form-check">
        <input type="checkbox" id="check9a" class="form-check-input is-valid">
        <label for="check9a" class="form-check-label">Checkbox</label>
      </div>
    </div>      
    <div class="col">
      <div class="form-check">
        <input type="checkbox" id="check9b" class="form-check-input is-invalid">
        <label for="check9b" class="form-check-label">Checkbox</label>
      </div>
    </div>      
  </div>
</form>

HTMLバリデーション

require 程度のチェックであれば、HTML のバリデーション機能を利用することが可能です。下記の例では、HTML/CSS 標準の checkValidity() と :valid, :invalid を利用しています。フォームには novalidate 属性と、バリデート完了時に .was-validated クラスを追加します。

<form class="needs-validation" novalidate>
  <div class="form-group">
    <label for="text10">Name</label>
    <div class="input-group">
      <input type="text" class="form-control" id="text10" placeholder="Name" required>
      <div class="invalid-feedback">
        Please enter your name.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>
<script>
(function() {
  window.addEventListener('load', function() {
    var forms = document.getElementsByClassName('needs-validation');
    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>

---