フォームブロックのソース設定において、プレースホルダー(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の箇所は適宜変更してください。
編集したフィールドが正しく設定されているか、テスト環境から動作確認してください。