基礎編 第3回 : 入力項目を追加してみよう

　今回のチュートリアルでは、フォームに任意の項目を追加してみたいと思います。ラジオボックスを利用し、年代の項目を増やします。

入力側に追加するときの記述について

　エンドユーザーが入力画面として利用するのは、初期の入力画面( step )と、再入力画面( step#reapply )なので、まずはそれらのブロックを編集します。下記にサンプルコードを用意しました。このコードを元にチュートリアルを進めます。

入力画面( step )のサンプルコード

<dt>年代</dt>
<dd>
<label><input type="radio" name="age" value="10〜20代" />10〜20代</label>
<label><input type="radio" name="age" value="30〜40代" />30〜40代</label>
<label><input type="radio" name="age" value="50代以上" />50代以上</label>
<input type="hidden" name="field[]" value="age" />
</dd>

項目を追加するときの手順

初期の入力画面( step )には、上のサンプルコードをそのまま貼り付けるだけです。

1. HTMLでフォームパーツを記述する
2. 追加したフォームパーツにシステム用の記述を加える

---

上図で[システム用の記述]とかいてあるinput要素は、value属性を追加したフォームパーツのname属性に合わせて値を書き換えるだけです。[フィールドの定義]の部分の編集は必要ありません。

入力された値を引き継ぐための記述

再入力画面( step#reapply )の場合、前の画面で既に入力されている情報があるので、それを引き継ぐ為の記述を加えます。これを加えないと、再入力するたびに全て空欄に戻ってしまいます。

再入力画面( step#reapply )のサンプルコード

<dt>年代</dt>
<dd>
<label><input type="radio" name="age" value="10〜20代"{age:checked#10〜20代} />10〜20代</label>
<label><input type="radio" name="age" value="30〜40代"{age:checked#30〜40代} />30〜40代</label>
<label><input type="radio" name="age" value="50代以上"{age:checked#50代以上} />50代以上</label>
<input type="hidden" name="field[]" value="age" />
</dd>

それぞれのinput要素のvalue属性のあとに、{age:checked#10〜20代}のような記述が加えられています。前の画面で入力があった場合は、この記述がchecked="checked"に変換されて表示されます。

再入力画面( step#reapply )の他のinput要素にも、value属性の中に記述が加わっています。

<input type="text" name="address" value="{address}" />
<textarea name="comment" cols="50" rows="5">{comment}</textarea>

テキスト系のフォームパーツであれば、name属性を波括弧 ( { } )で囲った記述を入れる事で、前の画面の入力情報を引き継ぐことができるようになります。

出力側に追加するときの記述について

入力が終わった後、確認として内容を出力するのは、確認画面( step#confirm )と結果画面( step#result )です。先ほどはchecked="checked"を出力する記述でしたが、今度はvalue属性の値を出力するだけです。つまり、先に挙げたテキスト系フォームパーツと同様の記述を使うことができます。

確認画面( step#confirm )と結果画面( step#result )のサンプルコード

<dl>
<dt>ハンドルネーム</dt>
<dd>
{name}
</dd><!-- BEGIN address:veil -->
<dt>メールアドレス</dt>
<dd>
{address}
</dd><!-- END address:veil -->
<dt>コメント</dt>
<dd>
{comment}[nl2br]
</dd><!-- BEGIN age:veil -->
<dt>年代</dt>
<dd>
{age}
</dd><!-- END age:veil -->
</dl>

上のサンプルコードでは以下の変更を加えました

年代の表示を追加

年代の表示は単純に{age}として項目を追加しています。入力側フォームパーツのvalue属性の中に入っていた情報が出力されます。

必須入力でない項目をveilブロックで囲う

veilブロックで囲むことで、入力が無く{address}や{age}が空であった場合にはそのブロック内は一切表示されなくなり、逆に入力があればブロック内が表示されます。これにより、dd要素の中が空であるにも関わらず、dt要素の項目名だけ表示されることを避けることができます。

{comment}のあとに校正オプションを追加

{comment}のあとに追加した[nl2br]という校正オプションは、改行コードをHTMLのbr要素に変換するものです。textarea要素の中で書かれた改行を、HTMLとして出力する際に再現するために必要になります。

動作を確認してみましょう

全4ステップ（初期入力、再入力、確認、結果）のブロック内のソースコードを編集し終わったら、正しい動作になっているかを確認してみてください。

動作を確認したら次回のチュートリアルに続きます。次は入力された値をチェックしたり、変換したりする、バリデーターとコンバーターについてです。

---