wiki:pne-xhtmlcss/parts/7
 ここの情報は古いです。ご理解頂いた上でお取り扱いください。

Version 5 (modified by ogawa, 14 years ago) (diff)

マークアップ例を更新

TOC

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

パーツリストに戻る

表示例

source:OpenPNE/branches/prj/xhtmlcss/parts/capture/7.png

マークアップ例

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

<form action="./" method="post">
<fieldset>
<input type="hidden" name="m" value="pc" />
<input type="hidden" name="a" value="page_h_review_search" />
<p class="desc">レビューを書きたい商品を検索します。<br />
キーワードを入力し、該当するカテゴリを選択してください。</p>

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

<p class="form">
<label for="keyword">キーワード</label> <input type="text" class="input_text" name="keyword" id="keyword" value="" size="15" />
<label for="category">カテゴリ</label> <select name="category" id="category">
<option value="" selected="selected">指定なし</option>
<option value="1">和書</option>
<option value="2">洋書</option>
<option value="3">CDポピュラー</option>
<option value="4">CDクラシック</option>
<option value="5">DVD</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>
</select>
<input type="submit" class="input_submit" value=" 検 索 " />
</p>
</fieldset>
</form>

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

<!-- ※日記検索のマークアップ例 // 開始 --><!-- "keyword-" は "keyword" に書き直してください : この文書内でidの重複を回避しているだけです -->
<form action="./" method="get">
<fieldset>
<input type="hidden" name="m" value="pc" />
<input type="hidden" name="a" value="page_h_diary_list_all" />
<p class="form">
<label for="keyword-">キーワード</label> <input type="text" class="input_text" name="keyword" id="keyword-" size="15" value="" />
<input type="submit" class="input_submit" value=" 検 索 " />
 <a href="./?m=pc&amp;a=page_h_com_find_all&amp;keyword=">コミュニティ検索</a>
 | <a href="http://www.google.com/search?hl=ja&amp;lr=lang_ja&amp;q=" target="_blank">ウェブ検索</a>
</p>
<p class="note">※タイトル、本文より検索をおこないます。スペースで区切ると複数キーワードでの検索ができます。</p>
</fieldset>
</form>
<!-- ※日記検索のマークアップ例 // 終了 -->

<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=3">CDポピュラー</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">DVD</a>
 - <a href="./?m=pc&amp;a=page_h_review_search&amp;category=6">ゲーム</a>
 - <a href="./?m=pc&amp;a=page_h_review_search&amp;category=7">ソフトウェア</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>
</p></dd>
</dl>
</div>

<div class="block">
<dl class="categories">
<dt><span class="label">カテゴリ</span></dt>
<dd>
<table class="category">
<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">芸能人、有名人(25)</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">学校(3)</a>
 - <a href="./?m=pc&amp;a=page_h_com_find_all&amp;order=r_datetime&amp;keyword=&amp;category_id=22">会社、団体(10)</a>
 - <a href="./?m=pc&amp;a=page_h_com_find_all&amp;order=r_datetime&amp;keyword=&amp;category_id=23">サークル、ゼミ(10)</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">イベント(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=30">OpenPNEプロジェクト(31)</a>
 - <a href="./?m=pc&amp;a=page_h_com_find_all&amp;order=r_datetime&amp;keyword=&amp;category_id=29">その他(66)</a>
 - <a href="./?m=pc&amp;a=page_h_com_find_all&amp;order=r_datetime&amp;keyword=&amp;category_id=2">PNE向上委員会(57)</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>
</table>
</dd>
</dl>
</div>

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

関連情報