Bootstrap 4 tutorial

コンポーネント(5): フォーム

日本語 (Japanese)英語 (English)

フォーム

概要

基本例
We'll never share your email with anyone else.

フォームコントロール

テキスト用コントロール( input, select, textarea )には .form-control を設定する(横幅100%で角丸ボーダー表示)。

input +属性 type="(text|email|password|number|...)" の場合

ブラウザデフォルトの input +属性 type="email"

input.form-control +属性 type="email"

select の場合

ブラウザデフォルトの select

select.form-control

ブラウザデフォルトの select +属性 multiple

select.form-control +属性 multiple

textarea の場合

ブラウザデフォルトの textarea

textarea.form-control

input +属性 type="file" の場合

ファイル選択コントロール( input +属性 type="file" )には.form-control-file を設定する。

ブラウザデフォルトの input +属性 type="file"

input.form-control-file +属性 type="file" (⇒ 注1)

サイズ設定

.form-control に .form-control-(sm|lg) を追加する。

input の場合

input.form-control.form-control-sm

input.form-control

input.form-control.form-control-lg

select の場合

select.form-control.form-control-sm

select.form-control

select.form-control.form-control-lg

レンジ入力

ブラウザデフォルトの input +属性 type="range"

input.form-control-range +attribute type="range" (親要素幅にフィット)

readonly 属性

コントロールに属性 readonly を設定すると値を変更できなくなる(選択はできるためコピーは可能)。

例: input.form-control +属性 type="text" value="Read-only value" readonly
通常テキスト表示

コントロールに .form-control-plaintext を設定すると枠を除去し通常テキストと同じように表示する。

表示例(次行): input.form-control-plaintext +属性 type="text" value="Read-only value" readonly
応用例1
応用例2

チェックボックス, ラジオ(ボタン)

上下配置(デフォルト)
チェックボックスの例
ラジオ(ボタン)の例
インライン(横並び)

div.form-check に .form-check-inline を追加

インライン配置のチェックボックス

インライン配置のラジオボタン

ラベルなし

ラベルなしの場合は input に .position-static を追加

レイアウト

フォームグループ

コントロール要素( input , select , textarea , etc.)とそれに対応するラベル label は div.form-group の中に配置する。

例: 構造表示用に form に灰色, div.form-group にオレンジのボーダー追加
フォームグリッド

グリッド を利用してより高度でレスポンシブなフォームレイアウトを作成できる。次の例は単純に div.colで左右2分割した場合(間が空く)。

フォーム用グリッド行

グリッドの行を div.form-row に変更するとフォーム用の短めの間隔に設定する。

応用例

公式ドキュメントより(構造表示のため .form-group にオレンジのボーダーを追加)。

水平フォーム

ラベルとコントロールを水平配置するレイアウト。

Radios
Checkbox
水平フォームのラベルサイズ

左が (label|legend).col-form-label 、右が フォームコントロール .form-control の場合

設定例

左 label.col-form-label.col-form-label-sm , 右 input.form-control.form-control-sm

左 label.col-form-label , 右 input.form-control

左 label.col-form-label.col-form-label-lg , 右 input.form-control.form-control-lg

列の幅設定

グリッド を用いた列幅の設定例

自動幅設定

列を .col から .col(-sm|-md|-lg|-xl)?-auto に変更すると幅をブラウザデフォルト値(内部コンテンツに対して可変)に設定する(⇒ グリッド - 幅の自動設定)。これを利用してフォーム要素を横(インライン)に並べて配置できる。

例1
@

次節のインラインフォーム - 基本例とほぼ同じだが幅smブレークポイント未満(<576px)の場合が異なる。インラインフォームは auto を解除して横幅100%の縦配置に組み替えるが、こちらは常に auto が有効で幅に応じて適宜要素を折り返す。

例2

レスポンシブ動作の設定例(公式ドキュメントの例を少し改良)。

@

例1と構成は同じだが、幅変更に対して入力コントロールの幅が常に一定範囲を確保するようにレスポンシブ動作を個別調整している(インラインフォームはsmブレークポイントでの切り替えしかできないので、自分で細かく設定したい場合はこの方法を用いるとよい)。

例3

カスタムフォームコントロール を用いた例。

インラインフォーム

(form).form-inline は構成要素を横に並べるレイアウト設定で、内部要素の設定を次のように変更する。

機能はひとつ前の自動幅設定と似ているが、ナビゲーションバーでの使用を前提として作り込まれており、自動幅設定より楽にインライン配置を組める。ただしレスポンシブブレークポイントはsm固定で変更できない(細かい調整が必要な場合は自動幅設定が必要)。
設定上の注意
基本例
@
応用: カスタムフォームを用いた例

ヘルプテキスト

small.form-text(.text-muted) を用い、アクセシビリティ用IDを付ける。

Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.

インラインレイアウトの場合は .form-text を付けない。

Must be 8-20 characters long.

disabled 属性

コントロールに属性 disabled を設定してdisabled状態にできる。またグループの親要素として fieldset を使いそこに disabled を設定するとグループ全体をdisabled状態にできる(⇒ 注4)。

バリデーション

HTMLのバリデーション機能はバージョン5.0で導入された(詳しくはMDN - フォームデータの検証を参照)。今ではBootstrap 4の対応ブラウザ全てで使用できる(対応状況は Can I Use を参照)。しかし動作に環境依存がありどのブラウザでも同じ振る舞いにならない。またバリデーションメッセージはスクリーンリーダに対応していない(現状では認識困難)。

そこでBootstrap 4ではブラウザ依存を低減しスクリーンリーダがメッセージを判別できる独自方式を開発している。以下(公式ドキュメントと順番を入れ替えて)まずブラウザ標準の方法を示し、次にBootstrap方式を説明する。

ブラウザ標準のバリデーション

required を利用した簡単なバリデーションの例。レイアウトの説明は省略し、バリデーションに関するポイントのみ示す。ただし送信時の応答にブラウザ依存性があり、表示されるメッセージやその表現方法も異なることに注意(本例を用いて色々なブラウザで実行すれば確認できる)。

@
Bootstrap方式

Bootstrap 4のバリデーション方式で作ったフォーム例。

Looks good!
Please input your name.
Looks good!
@
Please choose a username.
Please provide a valid city.
Please provide a valid state.
Please provide a valid zip.
You must agree before submitting.

HTMLはバリデーションに関するポイントのみ説明する。

次にBootstrap 4 (CSS)のバリデーション機能についてまとめる。

処理にはJavaScriptが必要。

  
// DOM版(公式ドキュメントより)
(function() {
  'use strict';
  window.addEventListener('load', function() {
    // Fetch all the forms we want to apply custom Bootstrap 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);
})();
// jQuery版
$('.needs-validation').on('submit', function(event) {
  if (!this.checkValidity()) {
    event.preventDefault();
    event.stopPropagation();
  }
  $(this).addClass('was-validated');
});
サーバー側バリデーション

送信してサーバ側でバリデーションを行い、サーバ側から結果を反映したフォームを送り返す場合は疑似クラスは使えない。そこで代替手段として .is-valid と .is-invalid を用いて上記バリデーションと同じ表示効果を得ることができる。

次はその設定例。ブラウザから送信後にサーバでバリデーションを行い、First nameとLast nameは正しく後は不正という結果を送り返した状態を表したもの。

Looks good!
Looks good!
@
Please choose a username.
Please provide a valid city.
Please provide a valid state.
Please provide a valid zip.
You must agree before submitting.
カスタムフォームコントロールの利用

Bootstrapバリデーションはカスタムフォームコントロールに対応しており、通常のフォームコントロールと同じように使うことができる。次はその設定サンプルでデモ用に最初からバリデーション状態にしてある(送信もなし)。どれも入力すると表示が赤から緑に変化する。

Please enter a message in the textarea.
Example invalid feedback text
More example invalid feedback text
Example invalid custom select feedback
Example invalid custom file feedback
ツールチップの利用

バリデーションの応答メッセージとして背景が半透明のツールチップをポップアップ表示できる。この方法を用いればレイアウト位置を変えずにバリデーション表示を行うことができる。

Looks good!
Looks good!
@
Please choose a unique and valid username.
Please provide a valid city.
Please provide a valid state.
Please provide a valid zip.

カスタムフォームコントロール

Bootstrap 4で導入された表示カスタマイズ、ブラウザ依存改善、アクセシビリティ向上のためのフォーム用部品。ブラウザデフォルトのコントロールを置き換えて利用できる。

チェックボックス

3番目のチェックボックスは初期状態を - にしてある。これは :indeterminate 疑似クラスを用いたもので、次のコードで設定している(要JavaScript)。 

document.getElementById('custom-check-3').indeterminate = true;

jQueryを利用する場合は次でもよい。

$('#custom-check-3').prop('indeterminate', true);
ラジオボタン
ラジオボタン(インライン)
スイッチ
メニュー選択

select.custom-select.custom-select-sm

select.custom-select

select.custom-select.custom-select-lg

属性 multiple を設定した場合の表示

属性 size="3" を設定した場合の表示

レンジ

デフォルトの範囲は 0..100 、値は 50 、ステップは 1 に設定される。

範囲は min と max 、値は value で設定する。

ステップは step で設定する。

ファイルブラウザ

文字のカスタマイズ/多言語対応

カスタムファイルブラウザの表示 Browse は任意の文字に変更できる。

HTMLからの変更

(4.2以降) label.custom-file-label に data-browse="{表示する文字列}" を追加することにより設定できる。以下は英語(en)、日本語(ja)、スペイン語(es)の設定例。

Sass(Scss)ソースのカスタマイズ

より本格的にbootstrap.cssをソースコードからカスタマイズすることにより、label.custom-file-label の言語属性(lang="{言語コード}")に対して表示を変更するように設定できる。ただしSass(.scss)とnode.js開発環境の知識が必要。詳しくは本節の公式ドキュメント本文参照。

カスタムCSSによる変更

Sassの知識がなくてもBootstrap CSSの後に自分用のカスタムCSSを追加すれば同じように設定できる。単純にすべて日本語に変更する場合はHTMLの head ブロックの最後に次のCSS設定を追加すればよい。

<style>.custom-file-label::after { content: "ファイル選択"; }</style>

label 要素の lang 属性に応じて自動判別する場合は次のCSSコード例を参照。この場合はSass(Cscc)ソースレベルからのカスタマイズと全く同じ効果が得られる。

/* en(英語,デフォルト)はbootstrap.cssに設定済み(略) */
/* ja(日本語) */
.custom-file-input:lang(ja) ~ .custom-file-label::after {
  content: "ファイル選択";
}
/* es(スペイン語) */
.custom-file-input:lang(es) ~ .custom-file-label::after {
  content: "Elegir";
}

設定例は次の通り(en/ja/es)。

ファイル名の更新(要JavaScript)

カスタムファイルブラウザは要素のデフォルト表示を( style="opacity: 0;" で)消去しその上にカスタム表示を行っている。そのためファイル名表示のための別要素が必要で、その更新にJavaScriptコードを用いる。例を示す(jQuery版を本サイト全体に設定済)。

  
// DOM版
(function() {
  window.addEventListener('load', function() {
    var input = document.getElementById('custom-file');
    input.addEventListener('change', function(event) {
      var label = document.querySelector('[for="custom-file"]');
      label.textContent = event.target.files[0].name;
    }, false);
  }, false);
})();
// jQuery版
$('#custom-file').on('change', function(event) {
  $('[for="custom-file"]').text($(this).prop('files')[0].name);
});