スニペット"FormLister"：ログイン中のユーザーの情報を変更するフォームの実装

ログイン中のユーザーの情報を変更するフォームの実装をするには、次のようなコードで実装できます。
プロフィールはもちろん、ログインするためのユーザー名やパスワード、メールアドレスを変更する際などで用います。

※ あくまで実装例であり、使用するパラメーターや設定値などは参考程度のものです。

[!FormLister?
									&controller=`Profile`
									&formid=`profile`
									&rules=`{
										"password" : {
											"minLength" : {
												"params" : 6,
												"message" : "6文字以上で入力してください。"
											}
										},
										"email" : {
											"required" : "メールアドレスを入力してください。",
											"email" : "メールアドレスアドレスの形式で入力してください。"
										},
										"phone" : {
											"date" : {
												"params" : "/^\\d{8,}|\\d{1,}-\\d{1,}-\\d{1,}$/",
												"message" : "電話番号の形式で入力してください。"
											}
										}
									}`
									&formControls=`gender,state`
									&dateFormat=`Y-m-d`
									&formTpl=`@CODE:
								<form method="post">
									<input type="hidden" name="formid" value="profile">

<div class="user">
										<img src="[(base_url)][+photo.value+]" width="100" height="100" alt="">
										<p>[+username+]</p>
									</div>

<h2>ログイン情報</h2>
									<dl>
										<dt><label for="field-password">パスワード</label></dt>
										<dd [+password.class+]>
											<input type="password" name="password" id="field-password"><br>
											<p>※ 変更する場合のみ入力してください。</p>
											[+password.error+]
										</dd>
										<dt><label for="field-email">メールアドレス</label></dt>
										<dd [+email.class+]>
											<input type="email" name="email" value="[+email.value+]" id="field-email">
											[+email.error+]
										</dd>
									</dl>

<h2>個人情報</h2>
									<dl>
										<dt><label for="field-name">名前</label></dt>
										<dd [+fullname.class+]>
											<input name="fullname" value="[+fullname.value+]" id="field-name">
											[+fullname.error+]
										</dd>
										<dt><label for="field-dob">生年月日</label></dt>
										<dd [+dob.class+]>
											<input type="date" name="dob" value="[+dob.value+]" id="field-dob">
											[+dob.error+]
										</dd>
										<dt>性別</dt>
										<dd [+gender.class+]>
											<ul>
												<li><input type="radio" name="gender" value="1" id="field-gender-male" [+c.gender.1+]><label for="field-gender-male">男性</label></li>
												<li><input type="radio" name="gender" value="2" id="field-gender-woman" [+c.gender.2+]><label for="field-gender-woman">女性</label></li>
											</ul>
											[+gender.error+]
										</dd>
										<dt><label for="field-zip">郵便番号</label></dt>
										<dd [+zip.class+]>
											<input name="zip" value="[+zip.value+]" id="field-zip">
											[+zip.error+]
										</dd>
										<dt><label for="field-state">都道府県</label></dt>
										<dd [+state.class+]>
											<select name="state" id="field-state">
												<option value="">選択なし</option>
												<option value="北海道" [+s.state.北海道+]>北海道</option>
												<option value="青森県" [+s.state.青森県+]>青森県</option>
												<option value="岩手県" [+s.state.岩手県+]>岩手県</option>
												<option value="宮城県" [+s.state.宮城県+]>宮城県</option>
												<option value="秋田県" [+s.state.秋田県+]>秋田県</option>
												<option value="山形県" [+s.state.山形県+]>山形県</option>
												<option value="福島県" [+s.state.福島県+]>福島県</option>
												<option value="茨城県" [+s.state.茨城県+]>茨城県</option>
												<option value="栃木県" [+s.state.栃木県+]>栃木県</option>
												<option value="群馬県" [+s.state.群馬県+]>群馬県</option>
												<option value="埼玉県" [+s.state.埼玉県+]>埼玉県</option>
												<option value="千葉県" [+s.state.千葉県+]>千葉県</option>
												<option value="東京都" [+s.state.東京都+]>東京都</option>
												<option value="神奈川県" [+s.state.神奈川県+]>神奈川県</option>
												<option value="新潟県" [+s.state.新潟県+]>新潟県</option>
												<option value="富山県" [+s.state.富山県+]>富山県</option>
												<option value="石川県" [+s.state.石川県+]>石川県</option>
												<option value="福井県" [+s.state.福井県+]>福井県</option>
												<option value="山梨県" [+s.state.山梨県+]>山梨県</option>
												<option value="長野県" [+s.state.長野県+]>長野県</option>
												<option value="岐阜県" [+s.state.岐阜県+]>岐阜県</option>
												<option value="静岡県" [+s.state.静岡県+]>静岡県</option>
												<option value="愛知県" [+s.state.愛知県+]>愛知県</option>
												<option value="三重県" [+s.state.三重県+]>三重県</option>
												<option value="滋賀県" [+s.state.滋賀県+]>滋賀県</option>
												<option value="京都府" [+s.state.京都府+]>京都府</option>
												<option value="大阪府" [+s.state.大阪府+]>大阪府</option>
												<option value="兵庫県" [+s.state.兵庫県+]>兵庫県</option>
												<option value="奈良県" [+s.state.奈良県+]>奈良県</option>
												<option value="和歌山県" [+s.state.和歌山県+]>和歌山県</option>
												<option value="鳥取県" [+s.state.鳥取県+]>鳥取県</option>
												<option value="島根県" [+s.state.島根県+]>島根県</option>
												<option value="岡山県" [+s.state.岡山県+]>岡山県</option>
												<option value="広島県" [+s.state.広島県+]>広島県</option>
												<option value="山口県" [+s.state.山口県+]>山口県</option>
												<option value="徳島県" [+s.state.徳島県+]>徳島県</option>
												<option value="香川県" [+s.state.香川県+]>香川県</option>
												<option value="愛媛県" [+s.state.愛媛県+]>愛媛県</option>
												<option value="高知県" [+s.state.高知県+]>高知県</option>
												<option value="福岡県" [+s.state.福岡県+]>福岡県</option>
												<option value="佐賀県" [+s.state.佐賀県+]>佐賀県</option>
												<option value="長崎県" [+s.state.長崎県+]>長崎県</option>
												<option value="熊本県" [+s.state.熊本県+]>熊本県</option>
												<option value="大分県" [+s.state.大分県+]>大分県</option>
												<option value="宮崎県" [+s.state.宮崎県+]>宮崎県</option>
												<option value="鹿児島県" [+s.state.鹿児島県+]>鹿児島県</option>
												<option value="沖縄県" [+s.state.沖縄県+]>沖縄県</option>
											</select>
											[+state.error+]
										</dd>
										<dt><label for="field-city">市区町村</label></dt>
										<dd [+city.class+]>
											<input name="city" value="[+city.value+]" id="field-city">
											[+city.error+]
										</dd>
										<dt><label for="field-street">番地</label></dt>
										<dd [+street.class+]>
											<input name="street" value="[+street.value+]" id="field-street">
											[+street.error+]
										</dd>
										<dt><label for="field-phone">電話番号</label></dt>
										<dd [+phone.class+]>
											<input name="phone" value="[+phone.value+]" id="field-phone">
											[+phone.error+]
										</dd>
									</dl>

[+form.messages+]

<button>変更を確定</button>
								</form>`
									&errorTpl=`@CODE:<p class="error-message">[+message+]</p>`
									&messagesOuterTpl=`@CODE:<p class="error-messages">[+messages+]</p>`
									&successTpl=`@CODE:<div class="complete">変更に成功しました。</div>`
									&skipTpl=`@CODE:<div class="skip">プロフィールを変更するにはログインする必要があります。<br><a href="[(base_url)][~3~]">ログイン</a></div>`
								!]

サンプルコード上で使用されているパラメーターについては次の通りです。

パラメーター	説明
&controller	Profileを指定することでユーザー情報を変更するためのフォームとして機能します。参考ページ：実装するフォームの種類を選択
&formid	参考ページ：フォームの識別子
&rules	参考ページ：フィールドの検証（チェック）内容を設定
&formControls	参考ページ：制御するフィールドの指定
&dateFormat	生年月日を表示したり編集を行う場合は必須。参考ページ：生年月日の日付の書式
&formTpl	参考ページ：入力フォームのHTMLテンプレート
&errorTpl	参考ページ：フィールドの表示するエラーメッセージのHTMLテンプレート
&messagesOuterTpl	参考ページ：フォーム全体の表示するエラーメッセージのHTMLテンプレート
&successTpl	参考ページ：フォーム送信完了後に表示するHTMLテンプレート
&skipTpl	参考ページ：未ログイン時に表示するHTMLテンプレート

プレースホルダーについては次のページをご覧ください。
フォームやメールで使用するプレースホルダー

CMS「Evolution CMS」逆引きリファレンス一覧へ戻る