7. searchFormBox(検索フォームボックス)

パーツリストに戻る

表示例

source:work/masabon/capture/7-1.png source:work/masabon/capture/7-2.png

マークアップ例

<div class="dparts searchFormBox"><div class="parts">
<div class="partsHeading"><h3>レビュー検索・並び替え</h3></div>
<div class="item">

<form method="post" action="./">
<input type="hidden" value="pc" name="m"/>
<input type="hidden" value="page_h_review_search" name="a"/>
<p class="form">
<span class="label">並び替え</span>
<a href="./?m=pc&amp;a=page_h_review_search&amp;keyword=&amp;category=&amp;orderby=r_num">登録数順</a>
|
<a href="./?m=pc&amp;a=page_h_review_search&amp;keyword=&amp;category=&amp;orderby=r_datetime">作成日順</a>
</p>

<p class="form">
<label for="keyword">キーワード</label>
<input type="text" size="15" value="" id="keyword" name="keyword" class="text"/>
<label for="category">カテゴリ</label>
<select id="category" name="category">
<option value="">指定なし</option>
<option value="1" label="和書">和書</option>
<option value="2" label="洋書">洋書</option>
<option value="4" label="CDポピュラー">CDポピュラー</option>
<option value="5" label="CDクラシック">CDクラシック</option>
<option value="6" label="DVD">DVD</option>
<option value="8" label="ゲーム">ゲーム</option>
<option value="9" label="ソフトウェア">ソフトウェア</option>
<option value="10" label="エレクトロニクス">エレクトロニクス</option>
<option value="11" label="キッチン">キッチン</option>
<option value="12" label="おもちゃ&ホビー">おもちゃ&ホビー</option>
<option value="13" label="スポーツ">スポーツ</option>
<option value="14" label="ヘルス&ビューティー">ヘルス&ビューティー</option>
<option value="15" label="時計">時計</option>
<option value="16" label="ベビー&マタニティ">ベビー&マタニティ</option>
<option value="17" label="アパレル&シューズ">アパレル&シューズ</option>

</select>
<input type="submit" value=" 検 索 " class="input_submit"/>
</p>
</form>

<ul class="moreInfo">
<li><a href="./?m=pc&amp;a=page_h_review_add">レビューを作成する</a></li>
</ul>

<div class="block">
<dl class="category">
<dt><span class="label">カテゴリ</span></dt>
<dd><p>
<a href="./?m=pc&amp;a=page_h_review_search&amp;category=1">和書</a>
 - <a href="./?m=pc&amp;a=page_h_review_search&amp;category=2">洋書</a>
 - <a href="./?m=pc&amp;a=page_h_review_search&amp;category=4">CDポピュラー</a>
 - <a href="./?m=pc&amp;a=page_h_review_search&amp;category=5">CDクラシック</a>
 - <a href="./?m=pc&amp;a=page_h_review_search&amp;category=6">DVD</a>
 - <a href="./?m=pc&amp;a=page_h_review_search&amp;category=8">ゲーム</a>
 - <a href="./?m=pc&amp;a=page_h_review_search&amp;category=9">ソフトウェア</a>
 - <a href="./?m=pc&amp;a=page_h_review_search&amp;category=10">エレクトロニクス</a>
 - <a href="./?m=pc&amp;a=page_h_review_search&amp;category=11">キッチン</a>
 - <a href="./?m=pc&amp;a=page_h_review_search&amp;category=12">おもちゃ&ホビー</a>
 - <a href="./?m=pc&amp;a=page_h_review_search&amp;category=13">スポーツ</a>
 - <a href="./?m=pc&amp;a=page_h_review_search&amp;category=14">ヘルス&ビューティー</a>
 - <a href="./?m=pc&amp;a=page_h_review_search&amp;category=15">時計</a>
 - <a href="./?m=pc&amp;a=page_h_review_search&amp;category=16">ベビー&マタニティ</a>
 - <a href="./?m=pc&amp;a=page_h_review_search&amp;category=17">アパレル&シューズ</a>
</p></dd>
</dl>
</div>

</div>
</div></div>
<div class="dparts searchFormBox"><div class="parts">
<div class="partsHeading"><h3>コミュニティ検索・並び替え</h3></div>
<div class="item">

<form method="get" action="./">
<input type="hidden" value="pc" name="m"/>
<input type="hidden" value="page_h_com_find_all" name="a"/>
<p class="form">
<span class="label">並び替え</span>
<a href="./?m=pc&amp;a=page_h_com_find_all&amp;val_order=count&amp;keyword=&amp;category_id=0">メンバー数順</a>
|
<a href="./?m=pc&amp;a=page_h_com_find_all&amp;val_order=r_datetime&amp;keyword=&amp;category_id=0">作成日順</a>
</p>

<p class="form">
<label for="keyword">キーワード</label>
<input type="text" size="15" value="" id="keyword2" name="keyword" class="input_text"/>
<label for="category_id">カテゴリ</label>
<select id="category_id" name="category_id">
<option value="0">指定なし</option>
<option value="25">芸能人、有名人</option>
<option value="26">テレビ番組</option>
<option value="27">お笑い</option>
<option value="5">映画</option>
<option value="6">スポーツ</option>
<option value="7">ゲーム</option>
<option value="8">本、マンガ</option>
<option value="9">旅行</option>
<option value="10">車、バイク</option>
<option value="11">占い</option>
<option value="12">趣味</option>
<option value="13">動物、ペット</option>
<option value="14">PC,インターネット</option>
<option value="15">学問、研究</option>
<option value="16">ビジネス、経済</option>
<option value="17">アート</option>
<option value="18">地域</option>
<option value="19">グルメ、お酒</option>
<option value="20">ファッション</option>
<option value="21">学校</option>
<option value="22">会社、団体</option>
<option value="23">サークル、ゼミ</option>
<option value="24">同年代</option>
<option value="28">イベント</option>
<option value="30">OpenPNEプロジェクト</option>
<option value="29">その他</option>
<option value="2">PNE向上委員会</option>
<option value="3">雑談</option>
</select>
<input type="submit" value=" 検 索 " class="input_submit"/>
</p>
</form>

<ul class="moreInfo">
<li><a href="./?m=pc&amp;a=page_h_com_add">新規作成</a>(作成の前に、似たコミュニティがないかご確認ください)</li>
<li><a href="./?m=pc&amp;a=page_h_com_topic_find_all">トピック検索</a></li>
</ul>

<div class="block">
<dl class="categories">
<dt><span class="label">カテゴリ</span></dt>
<dd>
<table class="category">
<tbody><tr>
<th>芸能</th>
<td>
<a href="./?m=pc&amp;a=page_h_com_find_all&amp;order=r_datetime&amp;keyword=&amp;category_id=25">芸能人、有名人(28)</a>
 - <a href="./?m=pc&amp;a=page_h_com_find_all&amp;order=r_datetime&amp;keyword=&amp;category_id=26">テレビ番組(4)</a>
 - <a href="./?m=pc&amp;a=page_h_com_find_all&amp;order=r_datetime&amp;keyword=&amp;category_id=27">お笑い(5)</a>
</td>
</tr>
<tr>
<th>娯楽</th>
<td>
<a href="./?m=pc&amp;a=page_h_com_find_all&amp;order=r_datetime&amp;keyword=&amp;category_id=5">映画(3)</a>
 - <a href="./?m=pc&amp;a=page_h_com_find_all&amp;order=r_datetime&amp;keyword=&amp;category_id=6">スポーツ(8)</a>
 - <a href="./?m=pc&amp;a=page_h_com_find_all&amp;order=r_datetime&amp;keyword=&amp;category_id=7">ゲーム(3)</a>
 - <a href="./?m=pc&amp;a=page_h_com_find_all&amp;order=r_datetime&amp;keyword=&amp;category_id=8">本、マンガ(5)</a>
 - <a href="./?m=pc&amp;a=page_h_com_find_all&amp;order=r_datetime&amp;keyword=&amp;category_id=9">旅行(8)</a>
 - <a href="./?m=pc&amp;a=page_h_com_find_all&amp;order=r_datetime&amp;keyword=&amp;category_id=10">車、バイク(4)</a>
 - <a href="./?m=pc&amp;a=page_h_com_find_all&amp;order=r_datetime&amp;keyword=&amp;category_id=11">占い(4)</a>
 - <a href="./?m=pc&amp;a=page_h_com_find_all&amp;order=r_datetime&amp;keyword=&amp;category_id=12">趣味(9)</a>
 - <a href="./?m=pc&amp;a=page_h_com_find_all&amp;order=r_datetime&amp;keyword=&amp;category_id=13">動物、ペット(9)</a>
</td>
</tr>
<tr>
<th>知識</th>
<td>
<a href="./?m=pc&amp;a=page_h_com_find_all&amp;order=r_datetime&amp;keyword=&amp;category_id=14">PC,インターネット(29)</a>
 - <a href="./?m=pc&amp;a=page_h_com_find_all&amp;order=r_datetime&amp;keyword=&amp;category_id=15">学問、研究(11)</a>
 - <a href="./?m=pc&amp;a=page_h_com_find_all&amp;order=r_datetime&amp;keyword=&amp;category_id=16">ビジネス、経済(20)</a>
 - <a href="./?m=pc&amp;a=page_h_com_find_all&amp;order=r_datetime&amp;keyword=&amp;category_id=17">アート(8)</a>
</td>
</tr>
<tr>
<th>生活</th>
<td>
<a href="./?m=pc&amp;a=page_h_com_find_all&amp;order=r_datetime&amp;keyword=&amp;category_id=18">地域(18)</a>
 - <a href="./?m=pc&amp;a=page_h_com_find_all&amp;order=r_datetime&amp;keyword=&amp;category_id=19">グルメ、お酒(7)</a>
 - <a href="./?m=pc&amp;a=page_h_com_find_all&amp;order=r_datetime&amp;keyword=&amp;category_id=20">ファッション(1)</a>
</td>
</tr>
<tr>
<th>グループ</th>
<td>
<a href="./?m=pc&amp;a=page_h_com_find_all&amp;order=r_datetime&amp;keyword=&amp;category_id=21">学校(4)</a>
 - <a href="./?m=pc&amp;a=page_h_com_find_all&amp;order=r_datetime&amp;keyword=&amp;category_id=22">会社、団体(11)</a>
 - <a href="./?m=pc&amp;a=page_h_com_find_all&amp;order=r_datetime&amp;keyword=&amp;category_id=23">サークル、ゼミ(11)</a>
 - <a href="./?m=pc&amp;a=page_h_com_find_all&amp;order=r_datetime&amp;keyword=&amp;category_id=24">同年代(3)</a>
</td>
</tr>
<tr>
<th>イベント</th>
<td>
<a href="./?m=pc&amp;a=page_h_com_find_all&amp;order=r_datetime&amp;keyword=&amp;category_id=28">イベント(12)</a>
</td>
</tr>
<tr>
<th>その他</th>
<td>
<a href="./?m=pc&amp;a=page_h_com_find_all&amp;order=r_datetime&amp;keyword=&amp;category_id=30">OpenPNEプロジェクト(30)</a>
 - <a href="./?m=pc&amp;a=page_h_com_find_all&amp;order=r_datetime&amp;keyword=&amp;category_id=29">その他(69)</a>
 - <a href="./?m=pc&amp;a=page_h_com_find_all&amp;order=r_datetime&amp;keyword=&amp;category_id=2">PNE向上委員会(60)</a>
 - <a href="./?m=pc&amp;a=page_h_com_find_all&amp;order=r_datetime&amp;keyword=&amp;category_id=3">雑談(31)</a>
</td>
</tr>
</tbody></table>
</dd>
</dl>
</div>

</div>
</div></div>

関連情報