登録フォームブロックのインプットタグ部分の構造や役割を解説いたします。
フォームブロック全体のソースについては「登録フォームブロックのソース解説」を、
Thymeleafの記法や動作についてはSPIRAL ver.2 サポートサイト Thymeleaf記法をご参照ください。
フォームブロック全体のソースについては「登録フォームブロックのソース解説」を、
Thymeleafの記法や動作についてはSPIRAL ver.2 サポートサイト Thymeleaf記法をご参照ください。
ソース内の「f0○○」について
テキスト
テキストエリア
メールアドレス
メールアドレス入力欄を生成するタグ
<input type="email" class="sp-form-control" name="f01" th:value="${inputs['f01']}">
確認入力項目を生成するタグ(確認入力が「使用する」に設定されている場合)
th:if属性による分岐処理で、確認入力が「使用する」に設定されている場合のみこのタグ内の記載が画面上に出力されます。<div th:if="${fields['f01'].collation}"> ︙ </div>
フォームブロックのフィールド設定、または共通設定にて設定されている確認入力ラベルを表示するタグです。
確認入力ラベルが設定されていない場合は、デフォルトラベルの「確認入力」が表示されます。
<span class="sp-form-email-reenter" th:text="${fields['f01'].reenterLabel}">Re-enter to confirm</span>
<input type="email" class="sp-form-control" name="f01:reenter" th:value="${inputs['f01:reenter']}">
セレクト(ラジオボタン)
ラジオボタンの並び順を指定するタグ
縦並びの場合は「class="sp-form-selection-vertical"」横並びの場合は「class="sp-form-selection-horizontal"」
のclassが指定されます。
classを変更することで、ソース設定でも選択肢レイアウトの切り替えが可能です。
<div class="sp-form-selection-vertical"> ︙ </div>
ラベルを繰り返し生成するタグ
th:each属性による繰り返し処理でラベル(labelタグ)を自動生成します。常にDBの設定を参照してラベルを生成する仕組みになっているため、ラベルの追加や変更があった場合でもソースを編集する必要はありません。
<label class="sp-form-selection" th:each="option : ${fields['f01'].options}"> ︙ </label>
「th:checked="${inputs['f01'] == #strings.toString(option.id)}"」は次のステップから戻ってきた場合や入力エラーが発生した際に、選択していたラベルを引継ぐための記載です。
<input type="radio" name="f01" th:value="${option.id}" th:checked="${inputs['f01'] == #strings.toString(option.id)}">
フォームブロックのフィールド設定にてフォーム表示のラベル名が設定されている場合はそのラベル名で生成され、
設定されていない場合はDB側で設定したラベル名で生成されます。
<span class="sp-form-selection-label" th:text="${option.label}">Item</span>
セレクト(プルダウン)
プルダウン全体を囲うタグ
<div class="sp-form-dropdown"> ︙ </div>
プルダウンメニューを生成するタグ
<select class="sp-form-control" name="f01"> ︙ </select>
フォームブロックのフィールド設定、または共通設定にて設定されている未選択ラベルを表示するタグです。
未選択ラベルが設定されていない場合は、デフォルトラベルの「----- 選択してください -----」が表示されます。
「th:selected="${inputs['f01'] == null}"」の記載により、ラベルがまだ未選択の場合は、未選択ラベルが選択されているようになります。
<option value="" th:text="${fields['f01'].unselectedLabel}" th:selected="${inputs['f01'] == null}">Select option</option>
th:each属性による繰り返し処理でラベル(optionタグ)を自動生成します。
常にDBの設定を参照してラベルを生成する仕組みになっているため、ラベルの追加や変更があった場合でもソースを編集する必要はありません。
フォームブロックのフィールド設定にてフォーム表示のラベル名が設定されている場合はそのラベル名で生成され、
設定されていない場合はDB側で設定したラベル名で生成されます。
「th:selected="${inputs['f01'] == #strings.toString(option.id)}"」は次のステップから戻ってきた場合や入力エラーが発生した際に、選択していたラベルを引継ぐための記載です。
<option th:each="option : ${fields['f01'].options}" th:value="${option.id}" th:text="${option.label}" th:selected="${inputs['f01'] == #strings.toString(option.id)}">Item</option>
プルダウンメニューの「▾」アイコンを生成するタグ
<span class="sp-form-dropdown-icon"></span>
マルチセレクト
チェックボックスの並び順を指定するタグ
縦並びの場合は「class="sp-form-selection-vertical"」横並びの場合は「class="sp-form-selection-horizontal"」
のclassが指定されます。
classを変更することで、ソース設定でも選択肢レイアウトの切り替えが可能です。
<div class="sp-form-selection-vertical"> ︙ </div>
ラベルを繰り返し生成するタグ
th:each属性による繰り返し処理でラベル(labelタグ)を自動生成します。常にDBの設定を参照してラベルを生成する仕組みになっているため、ラベルの追加や変更があった場合でもソースを編集する必要はありません。
<label class="sp-form-selection" th:each="option : ${fields['f01'].options}"> ︙ </label>
「th:checked="${inputs['f01'] != null ? #lists.contains(inputs['f01'], #strings.toString(option.id)) : false}"」は次のステップから戻ってきた場合や入力エラーが発生した際に、選択していたラベルを引継ぐための記載です。
<input type="checkbox" name="f01" th:value="${option.id}" th:checked="${inputs['f01'] != null ? #lists.contains(inputs['f01'], #strings.toString(option.id)) : false}">
フォームブロックのフィールド設定にてフォーム表示のラベル名が設定されている場合はそのラベル名で生成され、
設定されていない場合はDB側で設定したラベル名で生成されます。
<span class="sp-form-selection-label" th:text="${option.label}">Item</span>
整数
数値
電話番号
電話番号フィールド全体を囲うタグ
<div class="sp-form-phone"> ︙ </div>
国コードのプルダウンを生成するタグ(許可国コードが「全て」に設定されている場合)
th:if属性による分岐処理で、DB側フィールド設定の許可国コードが「全て」に設定されている場合のみ、このタグ内の記載が画面上に出力されます。許可国コードはデフォルトでは「日本」が選択されており、この場合は国コードのプルダウンは生成されません。
<div class="sp-form-dropdown" th:if="${fields['f01'].countryCode == null}"> ︙ </div>
国コードのプルダウンメニューを生成するタグ
<select class="sp-form-control" name="f01:countryCode"> ︙ </select>
フォームブロックのフィールド設定、または共通設定にて設定されている未選択ラベルを表示するタグです。
未選択ラベルが設定されていない場合は、デフォルトラベルの「----- 選択してください -----」が表示されます。
「th:selected="${inputs['f01:countryCode'] == null}"」の記載により、国コードがまだ未選択の場合は、未選択ラベルが選択されているようになります。
<option value="" th:text="${fields['f01'].unselectedCodeLabel}" th:selected="${inputs['f01:countryCode'] == null}">Select option</option>
th:each属性による繰り返し処理で国コードのラベル(optionタグ)を自動生成します。
「th:selected="${inputs['f01:countryCode'] == countryCode.country.alpha2Code}"」は次のステップから戻ってきた場合や入力エラーが発生した際に、選択していた国コードを引継ぐための記載です。
<option th:each="countryCode : ${fields['f01'].countryCodes}" th:value="${countryCode.country.alpha2Code}" th:text="|${countryCode.country.alpha2Code}(+${countryCode.code})|" th:selected="${inputs['f01:countryCode'] == countryCode.country.alpha2Code}">Item</option>
プルダウンメニューの「▾」アイコンを生成するタグ
<span class="sp-form-dropdown-icon"></span>
電話番号入力欄を生成するタグ
type="tel"が指定されたinputタグで、モバイル端末から入力しようとしたときに自動で数字入力用のキーボードが開かれます。<input type="tel" class="sp-form-control" name="f01" th:value="${inputs['f01']}">
日時
日時フィールド全体を囲うタグ
<div class="sp-form-datetimes"> ︙ </div>
年月日の入力欄を生成するタグ
<div class="sp-form-date"> ︙ </div>
「f01:○○」の記述によってそれぞれ入力欄が異なります。
「f01:year」は年、「f01:month」は月、「f01:day」は日の入力欄に対応しています。
<input type="number" class="sp-form-control" name="f01:○○" th:value="${inputs['f01:○○']}">
年月日の入力欄の区切り文字「/」を表示するタグです。
<span class="sp-form-date-separator">/</span>
時分秒の入力欄を生成するタグ
<div class="sp-form-time"> ︙ </div>
「f01:○○」の記述によってそれぞれ入力欄が異なります。
「f01:hour」は時、「f01:minute」は分、「f01:second」は秒の入力欄に対応しています。
<input type="number" class="sp-form-control" name="f01:○○" th:value="${inputs['f01:○○']}">
年月日の入力欄の区切り文字「:」を表示するタグです。
<span class="sp-form-date-separator">:</span>
タイムゾーンの選択欄生成するタグ(タイムゾーン設定が「フォーム上で選択」に設定されているとき)
<div class="sp-form-timezone" th:if="${fields['f01'].timeZone == null}"> <div class="sp-form-dropdown"> ︙ </div> </div>
タイムゾーンのプルダウン部分を生成するタグ
<select class="sp-form-control" name="f01:tz"> ︙ </select>
フォームブロックのフィールド設定、または共通設定にて設定されている未選択ラベルを表示するタグです。
未選択ラベルが設定されていない場合は、デフォルトラベルの「----- 選択してください -----」が表示されます。
「th:selected="${inputs['f01:tz'] == null}"」の記載により、タイムゾーンがまだ未選択の場合は、未選択ラベルが選択されているようになります。
<option value="" th:text="${fields['f01'].unselectedTimeZoneLabel}" th:selected="${inputs['f01:tz'] == null}">Select option</option>
th:each属性による繰り返し処理でタイムゾーンのラベル(optionタグ)を自動生成します。
「th:selected="${inputs['f01:tz'] == timeZone.id}"」は次のステップから戻ってきた場合や入力エラーが発生した際に、選択していたタイムゾーンを引継ぐための記載です。
<option th:each="timeZone : ${fields['f01'].timeZones}" th:value="${timeZone.id}" th:text="|(UTC${timeZone.offset}) ${timeZone.id}|" th:selected="${inputs['f01:tz'] == timeZone.id}">Item</option>
<span class="sp-form-dropdown-icon"></span>
日付
日付フィールド全体を囲うタグ
<div class="sp-form-datetimes"> <div class="sp-form-date"> ︙ </div> </div>
「f01:○○」の記述によってそれぞれ入力欄が異なります。
「f01:year」は年、「f01:month」は月、「f01:day」は日の入力欄に対応しています。
<input type="number" class="sp-form-control" name="f01:○○" th:value="${inputs['f01:○○']}">
年月日の入力欄の区切り文字「/」を表示するタグです。
<span class="sp-form-date-separator">/</span>
月日
月日フィールド全体を囲うタグ
<div class="sp-form-datetimes"> <div class="sp-form-date"> ︙ </div> </div>
「f01:○○」の記述によってそれぞれ入力欄が異なります。
「f01:month」は月、「f01:day」は日の入力欄に対応しています。
<input type="number" class="sp-form-control" name="f01:○○" th:value="${inputs['f01:○○']}">
月日の入力欄の区切り文字「/」を表示するタグです。
<span class="sp-form-date-separator">/</span>
時刻
時刻フィールド全体を囲うタグ
<div class="sp-form-datetimes"> <div class="sp-form-time"> ︙ </div> </div>
「f01:○○」の記述によってそれぞれ入力欄が異なります。
「f01:hour」は時、「f01:minute」は分、「f01:second」は秒の入力欄に対応しています。
<input type="number" class="sp-form-control" name="f01:○○" th:value="${inputs['f01:○○']}">
年月日の入力欄の区切り文字「:」を表示するタグです。
<span class="sp-form-date-separator">:</span>
ファイル
パスワード
パスワード入力欄を生成するタグです。
type="password"が指定されたinputタグで、入力値がブラウザ側で「●」や「*」などに置き換えられて表示されます。<input type="password" class="sp-form-control" name="f01" th:value="${inputs['f01']}">
確認入力が「使用する」に設定されている場合に、確認入力項目を生成するタグ
<div th:if="${fields['f01'].collation}"> ︙ </div>
フォームブロックのフィールド設定、または共通設定にて設定されている確認入力ラベルを表示するタグです。
確認入力ラベルが設定されていない場合は、デフォルトラベルの「確認入力」が表示されます。
<span class="sp-form-password-reenter" th:text="${fields['f01'].reenterLabel}">Re-enter to confirm</span>
<input type="password" class="sp-form-control" name="f01:reenter" th:value="${inputs['f01:reenter']}">