フォーム

システムのさまざまな画面でユーザーからの情報入力を受け付けるフォーム。その基本的なコーディングの共通ルールです。

フォームパーツの状態

必須（*）マーク付き

未入力のままでは処理を進められない、入力が必須のフォームパーツに付けます。テキストフィールドに限らず、他の種類のフォームパーツでもマークアップは同様です。

包括するdiv要素に.requiredを付けます。

<div class="form-group required">
  <label><span class="label-text">ラベル</span></label>
  <input type="text" class="form-control" placeholder="プレースホルダー">
</div>

表組内での必須入力

表組内の入力項目にはラベルがないため、通常のもの（ラベルに「＊」付加）とは必須項目の表示が異なります。マークアップの方法は通常と同じで、包括するdiv要素に.requiredを付けます。

<td>
  <div class="form-group required">
    ...
  </div>
</td>

Disabled

inputのdisabledは一時的に入力が無効化されたもの（条件が満たされれば有効化する）に使用します。入力を受け付けず表示のみのもの（他の入力に連動してデータベースから引っ張ってきた情報を表示するなど）の場合は、次の表示のみのスタイルを使います。

<input>にdisabledを指定します。

<div class="form-group">
  <label><span class="label-text">ラベル</span></label>
  <input type="text" class="form-control" placeholder="プレースホルダー" value="入力内容" disabled>
</div>

<label class="checkbox"><input type="checkbox" data-toggle="checkbox" disabled>選択肢1</label>
<label class="radio"><input type="radio" data-toggle="radio" id="" disabled>選択肢1</label>
<div class="js-tgl-swt js-tgl-swt--rnd">
  <input type="checkbox" checked data-toggle="switch" components="switch" disabled/>
</div>

ボタンも同様に<a>、<button>にdisabledを指定することでボタンやリンクを無効化できます。

<button class="btn btn-primary" disabled>ボタン（button）</button>
<a class="btn btn-primary" href="#" disabled>ボタン（a）</a>
<a href="#" disabled>テキストリンク</a>

表示のみ

入力を受け付けず表示のみのもの（他の入力に連動してデータベースから引っ張ってきた情報を表示するなど）に使用します。iOSデバイスではdisabledのものは強制的に淡く表示され、cssで取り消せませんので、disabledで代用しないでください。inputのdisabledは一時的に入力が無効化されたもの（条件が満たされれば有効化する）の場合に使用します。

.form-groupに.viewonlyを追加します。<input>の代わりに<p class="viewonly-text"></p>を使用します。

<div class="form-group viewonly">
  <label><span class="label-text">ラベル</span></label>
  <p class="viewonly-text">表示内容</p>
</div>

エラー時

入力エラー発生時は当該入力パーツのスタイルを変えて、エラーの原因となっている箇所を明示します。

包括する<div>タグに.has-errorクラスを指定します。

<div class="form-group has-error">
  <label><span class="label-text">ラベル</span></label>
  <input type="text" class="form-control" placeholder="プレースホルダー" value="エラーになる入力内容">
  <p class="help-block">エラーメッセージ（注釈がある場合は置き換える）</p>
</div>