複数のinputのグループ化

たとえば年月日

date01<br />
<input type="text" name="year01" id="year01" size="4" value="" />年
<input type="text" name="month01" id="month01" size="2" value="" />月
<input type="text" name="day01" id="day01" size="2" value="" />日

や、ハイフンで区切った

- -
日付<br />
<input type="text" name="year02" id="year02" size="4" value="" />-
<input type="text" name="month02" id="month02" size="2" value="" />-
<input type="text" name="day02" id="day02" size="2" value="" />

のように複数の入力タグをグループ化して一まとめにして扱うことも可能です。通常フォームの設定ではタグ(変数)名に対して入力定義配列を指定しますが、

$this->addPart('変数名', 入力定義配列);

グループ化する場合にはグループ名に対してグループを定義する連想配列(グループ定義配列)を指定します。

$this->addPart('グループ名', グループ定義配列);

グループ定義配列の要素(構造)は

'グループ名'	=> array(
	'parts'			=> array (
		'変数名' => 入力定義配列,
		'変数名' => 入力定義配列,
			:
	),
	'caption'		=> 'キャプション',
	'description'	=> '説明文',
	'separator'		=> '区切り文字',
	'validate'		=> フィルタ配列,
)

となります。グループ定義配列のキーpartsの値としてグループを構成する個別の入力タグの定義配列をもたせます。キーcaptionの値でグループ全体に対するキャプションを、キーdescriptionの値でグループ全体に対する説明文を指定します。キーseparatorの値で入力タグのセパレータを指定することもできます。キーvalidationの値でグループ全体に対するバリデーションをかけることも可能です。

先の年月日の例の場合、

'date01' => array(
	'parts' 		=> array(
		'year01' => array(
			'type'		=> 'text',
			'tail_str'	=> '年',
			'option'	=> 'size="4"',
		),
		'month01' => array(
			'type'		=> 'text',
			'tail_str'	=> '月',
			'option'	=> 'size="2"',
		),
		'day01' => array(
			'type'		=> 'text',
			'tail_str'	=> '日',
			'option'	=> 'size="2"',
		),
	),
),
'date02' => array(
	'parts'			=> array(
		'year02' => array(
			'type'		=> 'text',
			'option'	=> 'size="4"',
		),
		'month02' => array(
			'type'		=> 'text',
			'option'	=> 'size="2"',
		),
		'day02' => array(
			'type'		=> 'text',
			'option'	=> 'size="2"',
		),
	),
	'caption'		=> '日付',
	'description'	=> '年は西暦4桁、月は1~12、日は1~31の値で入力してください。',
	'separator'		=> '-',
),

となります。以下のように複数のチェックボックスやセレクトボックスもグループ化することもできます。

'chkgrp01' => array(
	'parts'			=> array(
		'check04'	=> array(
			'type'		=> 'checkbox',
			'label'		=> '履歴書',
			'default_value'	=> TRUE,
		),
		'check05'	=> array(
			'type'		=> 'checkbox',
			'label'		=> '職務経歴書',
		),
	),
	'caption'		=> '添付書類',
	'description'	=> '書類の内容を再度確認してからチェックを入れてください。',
	'separator'		=> '/',
),
'chkgrp02' => array(
	'caption'	=> '得意なプログラム言語は',
	'parts'		=> array(
		'check06' => array(
			'type'		=> 'checkbox',
			'label'		=> 'PHP',
			'default_value'	=> TRUE,
		),
		'check07' => array(
			'type'		=> 'checkbox',
			'label'		=> 'Java',
		),
		'check08' => array(
			'type'		=> 'checkbox',
			'label'		=> 'Ruby',
		),
		'check09' => array(
			'type'		=> 'checkbox',
			'label'		=> 'プログラムを書けない',
		),
	),
),
'date03' => array(
	'parts' 	=> array(
		'year03' => array(
			'type'		=> 'select',
			'table'		=> array(
				'2010'  => 2010,
				'2011'  => 2011,
				'2012'  => 2012,
			),
			'default_value'	=> 2011,
		),
		'month03' => array(
			'type'		=> 'select',
			'table'		=> array(
				'1'  => 1,
				'2'  => 2,
				'3'  => 3,
			),
			'default_value'	=> 1,
		),
		'day03' => array(
			'type'		=> 'select',
			'table'		=> array(
				'1'  => 1,
				'2'  => 2,
				'3'  => 3,
			),
			'default_value'	=> 1,
		),
	),
	'caption'	=> '申込年月日',
	'separator'	=> '-',
),

これに対応して出力されるHTMLタグは

<table border="1" width="700">
	<tr>
		<th width="30%">
			<font color="#FF7700">*</font>添付書類
		</th>
		<td width="70%">
			<font color="#0000FF">書類の内容を再度確認してからチェックを入れてください。</font><br /><input type="checkbox" name="check04" id="check04" checked="checked" />履歴書/<input type="checkbox" name="check05" id="check05" />職務経歴書
		</td>
	</tr>
	<tr>
		<th width="30%">
			<font color="#FF7700">*</font>得意なプログラム言語は
		</th>
		<td width="70%">
			<input type="checkbox" name="check06" id="check06" checked="checked" />PHP<input type="checkbox" name="check07" id="check07" />Java<input type="checkbox" name="check08" id="check08" />Ruby<input type="checkbox" name="check09" id="check09" />プログラムを書けない
		</td>
	</tr>
	<tr>
		<th width="30%">
			<font color="#FF7700">*</font>申込年月日
		</th>
		<td width="70%">
			<select name="year03" id="year03"><option value="2010" selected="selected">2010</option><option value="2011">2011</option><option value="2012">2012</option></select>-<select name="month03" id="month03"><option value="1" selected="selected">1</option><option value="2">2</option><option value="3">3</option></select>-<select name="day03" id="day03"><option value="1" selected="selected">1</option><option value="2">2</option><option value="3">3</option></select>
		</td>
	</tr>
</table>

以上のサンプルはこちらになります。

前後のページ

ページトップへ