ユーザ登録(変更)画面のデザイン変更(1/2)
バージョン1.4.0以降
ユーザ登録画面のデザイン変更について
ユーザ登録フォームは/register/IndexPage.htmlで表示されています。
(変更の場合は/edit/Indexpage.html)
始めに<form soy:id="form">で囲い、
その中にinputをはめていきます。
<form soy:id="form">
<h2>お客様情報の入力</h2>
<table>
<tr>
<th>[必須]メールアドレス</th>
<td>
<input soy:id="user_mail_address" type="text" value="" />
<p soy:id="mail_address_error">○○が△△△△です。</p>
<!-- soy:id="***_error"はエラーメッセージ表示用のsoy:id -->
</td>
</tr>
</table>
</form soy:id="form">
このページで使用するsoy:idは下記の通り、
| soy:id | 使用できるタグ | 詳細 |
|---|---|---|
| user_mail_address(必須) | type="text" | メールアドレスの入力フォーム |
| password(*1) | type="text" | パスワードの入力フォーム |
| user_name(必須) | type="text" | 氏名の入力フォーム |
| user_reading(必須) | type="text" | フリガナの入力フォーム |
| user_post_number(必須) | type="text" | 郵便番号の入力フォーム |
| user_area(必須) | select | 県名のセレクトボックス |
| user_address1(必須) | type="text" | アドレス1の入力フォーム |
| user_address2(必須) | type="text" | アドレス2の入力フォーム |
| user_tel_number(必須) | type="text" | 電話番号の入力フォーム |
| gender_male | type="radio" | 性別男のラジオボタン |
| gender_female | type="radio" | 性別女のラジオボタン |
| birth_year | type="text" | 誕生日の西暦の入力フォーム |
| birth_month | type="text" | 誕生日の月の入力フォーム |
| birth_day | type="text" | 誕生日の日の入力フォーム |
| user_fax_number | type="text" | ファックスの入力フォーム |
| user_keitai_number | type="text" | 携帯の電話番号入力フォーム |
| user_office | type="text" | 勤務先名称の入力フォーム |
| order_memo | textarea | 備考のテキストエリア |
エラーメッセージの表示ですが、
<!-- soy:display="has_error" -->で囲った箇所が、
入力に不備があった場合に必ず表示されます。
<!-- soy:display="has_error" -->
<div class="error_box">
<ul>
<li>入力項目に不備があります。</li>
</ul>
</div>
<!-- /soy:display="has_error" -->
続いて、
個々の項目に対応するエラーメッセージの表示ですが、
エラーメッセージのsoy:idは下記の通り、
| mail_address_error | すべて | メールアドレスのエラーメッセージを表示します |
|---|---|---|
| password_error | すべて | パスワードのエラーメッセージを表示します |
| name_error | すべて | 名前のエラーメッセージを表示します |
| reading_error | すべて | フリガナのエラーメッセージを表示します |
| zip_code_error | すべて | 郵便番号のエラーメッセージを表示します |
| address_error | すべて | アドレス1のエラーメッセージを表示します |
| tel_number_error | すべて | 電話番号のエラーメッセージを表示します |
