フォームブロックのソース設定において、プレースホルダー（placeholder）の記載方法を知りたい
入力フォームへの入力欄に入力補助文を表示するプレースホルダー（placeholder）について、
登録、更新フォームブロックなどのソース設定においては、入力ステップ上のinput/textareaタグにplaceholder属性を記述する必要があります。
以下、登録フォームブロックのテキストフィールド、メールアドレスフィールド、テキストエリアフィールドのソースフォーマットを例にご案内いたします。
※ビジュアル設定については、フィールド設定から設定可能です。
ソース修正方法
※各フィールドタイプの前後のdivタグなど、一部ソースは省略して記載しています。
テキストフィールド
【修正前】
<input type="text" class="sp-form-control" th:name="${fields['f0X'].name}" th:value="${inputs['f0X']}" th:if="${fields['f0X'].control == 'text'}">
【修正後】
<input type="text" class="sp-form-control" th:name="${fields['f0X'].name}" placeholder="スパイラル 太郎" th:value="${inputs['f0X']}" th:if="${fields['f0X'].control == 'text'}">
メールアドレスフィールド
【修正前】
<div class="sp-form-data">
<input type="email" class="sp-form-control" th:name="${fields['f0X'].name}" th:value="${inputs['f0X']}">
<div th:if="${fields['f0X'].collation}">
<input type="email" class="sp-form-control" th:name="${fields['f0X:reenter'].name}" th:value="${inputs['f0X:reenter']}">
</div>
</div>
【修正後】
<div class="sp-form-data">
<input type="email" class="sp-form-control" th:name="${fields['f0X'].name}" placeholder="spiral@example.com" th:value="${inputs['f0X']}">
<div th:if="${fields['f0X'].collation}">
<input type="email" class="sp-form-control" th:name="${fields['f0X:reenter'].name}" placeholder="spiral@example.com" th:value="${inputs['f0X:reenter']}">
</div>
</div>
テキストエリアフィールド
【修正前】
<textarea class="sp-form-control" th:name="${fields['f0X'].name}" th:text="${inputs['f0X']}"></textarea>
【修正後】
<textarea class="sp-form-control" th:name="${fields['f0X'].name}" placeholder="お問い合わせ内容を入力してください。" th:text="${inputs['f0X']}"></textarea>
※f0Xの箇所は適宜変更してください。
編集したフィールドが正しく設定されているか、テスト環境から動作確認してください。
