こんにちは！SDP運営事務局の二木です。
今回は、ラジオボタン形式のセレクトフォームを設定して、“その他”の項目を設けた時に記述式の入力フォームを追加する方法を見ていきましょう。
DEMOはこちら ※Q2を参照ください。
▼vol.1～vol.7のリンクはこちら
“その他”の項目に入力欄を追加する
～ フォームデザインのカスタマイズ Vol.2 ～
1. データベースの設定
データベース設定の際、セレクトフォームとテキストフォーム両方用意しておいてくださいね。
そしてデフォルトのフォームを見てみると、二つの項目として表示されています。
2. HTMLの設定
それでは、デフォルトのHTMLソースを見ていきましょう。
<dl class="cf"> <dt class="title"> Q2.ご来場の目的 <span class="need">＊</span> </dt> <dd class="data multi2"> <ul class="cf"> <li><label><input class="input" type="checkbox" value="1" name="●●●" $●●●:1$><span>時期は未定だが購入を考えており、情報収集のため</span></label></li> <li><label><input class="input" type="checkbox" value="2" name="●●●" $●●●:2$><span>1年以内に購入を検討しているため</span></label></li> <li><label><input class="input" type="checkbox" value="3" name="●●●" $●●●:3$><span>投資のため</span></label></li> <li><label><input class="input" type="checkbox" value="4" name="●●●" $●●●:4$><span>賃貸にするか購入するか検討中のため</span></label></li> <li><label><input class="input" type="checkbox" value="5" name="●●●" $●●●:5$><span>関係者、友人に勧められたため</span></label></li> <li><label><input class="input" type="checkbox" value="6" name="●●●" $●●●:6$><span>その他</span></label></li> </ul> <input type="hidden" value="" name="●●●"> <span class="msg">$error:●●●$</span> </dd> </dl> <dl class="cf"> <dt class="title"> Q2.その他 </dt> <dd class="data "> <textarea class="$errorInputColor:●●●$" name="●●●" rows="4" wrap="soft" >$●●●$</textarea><br> <span class="msg">$error:●●●$</span> </dd> </dl>
※●●●には、データベース構築の際、フィールド名ごとに設定した差替キーワードが入ります。また、「$●●●:1$」の“:(コロン)”以降の数値は、セレクトの「ラベルIDナンバー」のことで、これは自動でHTMLに記載されます。
Q2のセレクト項目”その他”の後に入力欄＝textarea要素を移動させます。
ddの終了タグ直前に挿入にさせてください。
<dl class="cf"> <dt class="title"> Q2.ご来場の目的 <span class="need">＊</span> <span class="caution">複数選択可</span> </dt> <dd class="data multi2"> <ul class="cf"> <li><label><input class="input" type="checkbox" value="1" name="●●●" $●●●:1$><span>時期は未定だが購入を考えており、情報収集のため</span></label></li> <li><label><input class="input" type="checkbox" value="2" name="●●●" $●●●:2$><span>1年以内に購入を検討しているため</span></label></li> <li><label><input class="input" type="checkbox" value="3" name="●●●" $●●●:3$><span>投資のため</span></label></li> <li><label><input class="input" type="checkbox" value="4" name="●●●" $●●●:4$><span>賃貸にするか購入するか検討中のため</span></label></li> <li><label><input class="input" type="checkbox" value="5" name="●●●" $●●●:5$><span>関係者、友人に勧められたため</span></label></li> <li><label><input class="input" type="checkbox" value="6" name="●●●" $●●●:6$><span>その他</span></label></li> </ul> <input type="hidden" value="" name="●●●"> <span class="msg">$error:●●●$</span> <!-- その他に入力欄を追加する --> <textarea name="f●●●" rows="4" wrap="soft" >$●●●$</textarea><br> </dd> </dl>
カスタマイズ後
