ラベル再定義フォーム

名前

RELABELFORM02

パーツバージョン

1.0.0

GCバージョン

1.2.0～

パーツアイコン

要旨

選択領域に含まれるフォーム部品を取り出し、ラベル再定義データに設定したテキスト情報をフォーム部品の周辺に配置したHTMLを出力します。

RELABELFORM01とは以下の点が異なります。

► LABEL要素を付加します。
► A要素が取り込み可能です。
► input[type=”image”]をinput[type=”submit”]に変換可能です。
► input[type=”image”]で指定された画像リソースを変更可能です。
► input要素の属性を変更可能です。

入出力仕様

FORM要素を含む領域を選択します。変換できるフォームは１つのみです。

オプション

なし

ビューの種類

定義リストスタイル

定義リスト（DL/DT/DD要素）のレイアウトでフォームを出力します。

フォーム部品の周辺にはラベル情報が以下のように配置されます。

ヘッダ（header）
前(prev)	(フォーム部品)	後(next)
フッタ１(footer1)
フッタ２(footer2)

出力HTMLの外枠にDIV要素が配置されます。

ビュー編集

ラベル再定義データ

各フォーム部品に関連するテキスト情報を定義するデータです。

「ラベル再定義データの作成」の手順にしたがってフォームに表示するテキスト情報を作成してください。

プリプロセス

なし

サンプル

入力HTML例	<div class="samples"> <div class="formspace"> <p>花検索</p> <form action="" method="get"> <dl> <dt>名前から検索</dt> <dd><input name="searchname" type="text" /></dd> </dl> <dl> <dt>色から検索</dt> <dd><select name="color" value="color1"> <option>赤</option> <option>橙</option> <option>黄</option> <option>緑</option> <option>青</option> </select></dd> </dl> <dl> <dt>季節から検索</dt> <dd><input name="spring" type="radio" value="spring1" class="season" /> <span>春</span><input name="summer" type="radio" value="summer1" class="season" /><span>夏 </span><input name="autumn" type="radio" value="autumn1 class="season"" /> <span>秋</span><input name="winter" type="radio" value="winter1 class="season"" /> <span>冬</span></dd> </dl> <p><input width="147" type="image" height="31" value="検索する" name="BtnTypePresent" alt="検索する" src="img/btn_fsearch04.gif"></p> </form> </div> </div>
出力HTML（例）	<div class="gcpRelabelForm02"> <form action="" method="get"> <dl class="list"> <dt class="header"> <span class="text">花の名前</span> </dt> <dd class="field"> <label> <span class="input i_searchname"> <input name="searchname" type="text"> </span> </label> </dd> <dt class="header"> <span class="text">お色</span> </dt> <dd class="field"> <label> <span class="input i_color"> <select name="color" value="color1"> <option>赤</option> <option>橙</option> <option>黄</option> <option>緑</option> <option>青</option> </select> </span> </label> </dd> <dt class="header"> <span class="text">季節</span> </dt> <dd class="field inline inline1"> <label> <span class="input i_spring"> <input class="season" name="spring" type="radio" value="spring1"> </span> </label> </dd> <dd class="footer1"> <span class="text">春</span> </dd> <dd class="field inline inline1"> <label> <span class="input i_summer"> <input class="season" name="summer" type="radio" value="summer1"> </span> </label> </dd> <dd class="footer1"> <span class="text">夏</span> </dd> <dd class="field inline inline1"> <label> <span class="input i_autumn"> <input name="autumn" season="" type="radio" value="autumn1 class="> </span> </label> </dd> <dd class="footer1"> <span class="text">秋</span> </dd> <dd class="field inline inline1"> <label> <span class="input i_winter"> <input name="winter" season="" type="radio" value="winter1 class="> </span> </label> </dd> <dd class="footer1"> <span class="text">冬</span> </dd> <dd class="field"> <label> <span class="input i_BtnTypePresent"> <input alt="検索する" height="31" name="BtnTypePresent" type="image" value="検索する" width="147"> </span> </label> </dd> </dl> </form> </div>

入力HTML例

           <div class="samples">
             <div class="formspace">
            	<p>花検索</p>
            	<form action="" method="get">
                	<dl>
                    	<dt>名前から検索</dt>
                        <dd><input name="searchname" type="text" /></dd>
                    </dl>
                	<dl>
                    	<dt>色から検索</dt>
                        <dd><select name="color" value="color1">
                          <option>赤</option>
                          <option>橙</option>
                          <option>黄</option>
                          <option>緑</option>
                          <option>青</option>
                        </select></dd>
                    </dl>
                    <dl>
                    	<dt>季節から検索</dt>
                        <dd><input name="spring" type="radio" value="spring1" class="season" />
<span>春</span><input name="summer" type="radio" value="summer1" class="season" /><span>夏
                        </span><input name="autumn" type="radio" value="autumn1 class="season"" />
<span>秋</span><input name="winter" type="radio" value="winter1 class="season"" />
                        <span>冬</span></dd>
                    </dl>
					<p><input width="147" type="image" height="31" value="検索する" 
name="BtnTypePresent" alt="検索する" src="img/btn_fsearch04.gif"></p>
                </form>
             </div>	
            </div>

出力HTML（例）

        <div class="gcpRelabelForm02">
          <form action="" method="get">
            <dl class="list">
              <dt class="header">
                <span class="text">花の名前</span>
              </dt>
              <dd class="field">
                <label>
                  <span class="input i_searchname">
                    <input name="searchname" type="text">
                  </span>
                </label>
              </dd>
              <dt class="header">
                <span class="text">お色</span>
              </dt>
              <dd class="field">
                <label>
                  <span class="input i_color">
                    <select name="color" value="color1">
                      <option>赤</option>
                      <option>橙</option>
                      <option>黄</option>
                      <option>緑</option>
                      <option>青</option>
                    </select>
                  </span>
                </label>
              </dd>
              <dt class="header">
                <span class="text">季節</span>
              </dt>
              <dd class="field inline inline1">
                <label>
                  <span class="input i_spring">
                    <input class="season" name="spring" type="radio" value="spring1">
                  </span>
                </label>
              </dd>
              <dd class="footer1">
                <span class="text">春</span>
              </dd>
              <dd class="field inline inline1">
                <label>
                  <span class="input i_summer">
                    <input class="season" name="summer" type="radio" value="summer1">
                  </span>
                </label>
              </dd>
              <dd class="footer1">
                <span class="text">夏</span>
              </dd>
              <dd class="field inline inline1">
                <label>
                  <span class="input i_autumn">
                    <input name="autumn" season="" type="radio" value="autumn1 class=">
                  </span>
                </label>
              </dd>
              <dd class="footer1">
                <span class="text">秋</span>
              </dd>
              <dd class="field inline inline1">
                <label>
                  <span class="input i_winter">
                    <input name="winter" season="" type="radio" value="winter1 class=">
                  </span>
                </label>
              </dd>
              <dd class="footer1">
                <span class="text">冬</span>
              </dd>
              <dd class="field">
                <label>
                  <span class="input i_BtnTypePresent">
                    <input alt="検索する" height="31" name="BtnTypePresent" type="image"
 value="検索する" width="147">
                  </span>
                </label>
              </dd>
            </dl>
          </form>
        </div>

注：下記の説明文はサンプルと異なる例です

ラベル再定義データの作成

フォーム部品情報を収集する

(1). テンプレート上に「ラベル再定義フォーム」を追加します

(2). 元コンテンツページのフォーム領域を選択し、セレクタを取得します（基本タブのセレクタ取得ボタン）

(3). プロパティペイン上部の「フォームから項目を取得」ボタンをクリックします。「viewを上書きしてもよろしいですか？」のメッセージダイアログが表示されますので、「OK」ボタンをクリックします

(4). テンプレートのビューの中に、データ定義に収集したフォーム部品情報が書き込まれ、ビュー編集タブが表示されます

/* // データ定義サンプル

{

title : '(グループ見出しを入力します。例）お客様情報、メールマガジンの配信設定)',

items : [

{

header : '(各入力項目の見出しを入力します。例）メンバーID、お名前、電話番号)',

footer1 : '(入力フォーム部品の下部に表示する文言を入力します。)',

footer2 : '(入力フォーム部品の下部に表示する文言を入力します。)',

inputs : [

// 入力フォーム部品の情報を入力します。

// name: フォーム部品要素のname属性値（必須）

// value: フォーム部品要素のvalue属性値（任意）

// prev: フォーム部品の前に表示する文言

// next: 後に表示する文言

// placeholder: プレースホルダ文言

{ name : '(NAME)', value : '(VALUE)', prev: '(前)', next: '(後)', placeholder : '(プレースホルダ)' },

layout: '(フォーム部品を横並び配置する場合はinlineを指定します。)'

},*/

{

title:'',

items:[

{

header:'',

footer1:'',

footer2:'',

inputs:[

{

name:'name',

placeholder:'',

prev:'',

next:'',

layout:''

{

header:'',

footer1:'',

footer2:'',

inputs:[

{

name:'tel',

placeholder:'',

prev:'',

next:'',

layout:''

{

header:'',

footer1:'',

footer2:'',

inputs:[

{

name:'category',

value:'01',

prev:'',

next:'',

{

name:'category',

value:'02',

prev:'',

next:'',

{

name:'category',

value:'03',

prev:'',

next:'',

layout:'inline'

]

</script>

フォーム部品項目収集直後のビュー例

収集データにテキスト情報を設定する

(1). ラベル再定義データのテキスト情報を設定します。テキスト情報は以下の種類があります

A) title：いくつかのフォーム部品項目をまとめた場合に、そのグループに対して付ける見出し文言。
フォーム部品項目収集直後の状態では、１グループに全フォーム部品がまとまっています。これを複数グループに分けて設定したい場合は、設定データの最上位の中括弧 {}を1グループとしてデータを変更します。
例：「お客様情報」「お届け先情報」「アンケートにお答えください」等

{

title:'お客様情報',

items:[

{

header:'お名前',

footer1:'※必須入力です',

footer2:'例）山田太郎',

inputs:[

{

name:'name',

placeholder:'',

prev:'',

next:'',

layout:''

{

header:'電話番号',

footer1:'※必須入力です',

footer2:'※市外局番から入力してください',

inputs:[

{

name:'tel',

placeholder:'例）00-0000-0000',

prev:'',

next:'',

layout:''

]

{

title:'アンケート項目',

items:[

{

header:'この商品について興味を持った点は何ですか',

footer1:'※複数選択可',

footer2:'',

inputs:[

{

name:'category',

value:'01',

prev:'',

next:'製品説明の依頼',

{

name:'category',

value:'資料請求',

prev:'',

next:'',

{

name:'category',

value:'その他',

prev:'',

next:'',

layout:'inline'

]

</script>

フォーム部品項目を２つのグループに分けた設定例

B) header：各フォーム部品に付ける見出し文言。フォーム部品の上部に配置されます。
例：「メンバーID」「お名前」「電話番号」等

C) footer1,footer2：各フォーム部品に付ける補足文言。フォーム部品の下部に配置されます。この項目にはHTMLタグが入力できます。
例：「入力例：03-XXXX-XXXX」「半角数字6～10文字」「<a href="/privacy.php">個人情報の取り扱い</a>に同意の上で送信して下さい。」等

D) prev：各フォーム部品の直前に表示する文言
例：「姓」「名」「郵便番号」等

E) next：各フォーム部品の直後に表示する文言
例：「男性」「はい」「希望する」等

F) placeholder：テキストボックスフォーム部品のプレースホルダに表示する文言
例：「入力してください」「株式会社○○○○」等

(2). 配置に関する項目を設定します

G) layout：フォーム部品を横に並べたいときに、「inline」を設定します。指定がない場合は縦に並びます

(3). 設定が終わったら、「確定」ボタンで内容を保存します。

(4). 設定例と出力結果イメージ

メールアドレス
{ header:'メールアドレス', footer1:'※必須入力です', footer2:'※携帯メールアドレスは登録できません', inputs:[ { name:'MAILADDRESS', placeholder:'例：user1@sample.com', prev:'', next:'', }, ], layout:'' },
電話番号
{ header:'電話番号', footer1:'※必須入力です', footer2:'', inputs:[ { name:'TEL1', placeholder:' ', prev:'', next:' - ', }, { name:'TEL2', placeholder:' ', prev:'', next:' - ', }, { name:'TEL3’, placeholder:' ', prev:'', next:'', }, ], layout:'inline' },
メールマガジン受け取り確認（チェックボックス）
{ header:'メールマガジン購読', footer1:'※ショップからのお知らせを希望する方はチェックしてください', footer2:'', inputs:[ { name:'MAILMAGAZINE', placeholder:' ', prev:'', next:' 購読する ', }, ], layout:'' },